.fsb{--fsb-h: 26px;--fsb-bh: calc(var(--fsb-h) * 1.8);--fsb-bw: calc(var(--fsb-bh) * 1.0625);display:block;background:var(--fsb-bg, #1d140f);color:var(--fsb-fg, #f7f3e3);padding:10px 16px;text-align:center}.fsb__text{position:absolute;inset:0 calc(var(--fsb-bw) * .86 + var(--fsb-h) * 2) 0 calc(var(--fsb-h) * 1.2);z-index:1;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;white-space:nowrap;font-family:var(--font-body--family);font-style:var(--font-body--style);font-weight:var(--font-body--weight);font-size:.8125rem;line-height:1;letter-spacing:.1em;color:#fff;text-shadow:0 0 2px #000,0 0 4px #000,0 1px 6px rgb(0 0 0 / .9);transition:color .3s ease,text-shadow .3s ease}.fsb__track{position:relative;max-width:720px;height:var(--fsb-h);margin:0 auto}.fsb__strap{position:absolute;inset:0 calc(var(--fsb-bw) * .86) 0 0;clip-path:polygon(0 50%,calc(var(--fsb-h) * .25) 30%,calc(var(--fsb-h) * 1.1) 0,100% 0,100% 100%,calc(var(--fsb-h) * 1.1) 100%,calc(var(--fsb-h) * .25) 70%)}.fsb__belt{position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--fsb-belt);background-repeat:repeat-x;background-size:auto 100%;background-position:left center}.fsb__belt--plain{background:#d6b88f var(--fsb-leather) repeat-x left center / auto 100%}.fsb__belt--lit{clip-path:inset(0 calc(100% - var(--fsb-p, 0%)) 0 0);transition:clip-path 2.6s cubic-bezier(.45,0,.25,1)}.fsb__roller{--fsb-rw: calc(var(--fsb-h) * .9);position:absolute;z-index:1;top:0;bottom:0;left:calc((100% - var(--fsb-bw) * .86) * var(--fsb-pn, .06));width:var(--fsb-rw);transform:translate(-50%);overflow:hidden;border-radius:3px;background:#8a9096;box-shadow:2px 0 4px #0009;transition:left 2.6s cubic-bezier(.45,0,.25,1),opacity .3s ease;pointer-events:none}.fsb__roller:before,.fsb__roller:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.fsb__roller:before{background-image:var(--fsb-roller-img, var(--fsb-belt));background-repeat:repeat-x;background-size:auto 100%;filter:none;background-position:var(--fsb-roll, 0px) 0;transition:background-position 2.6s cubic-bezier(.45,0,.25,1)}.fsb__roller:after{background:linear-gradient(90deg,#14181ca6,#fff0 22%,#ebf0f566 38%,#ffffff0d 52%,#14181c40 72%,#14181cb3)}.fsb--done .fsb__roller{opacity:0;transition:left 2.6s cubic-bezier(.45,0,.25,1),opacity .5s ease 2.6s}.fsb__belt--dye{background-image:var(--fsb-belt-done);opacity:0;transition:opacity .4s ease}.fsb--done .fsb__belt--dye{opacity:1;transition:opacity 1.2s ease 2.4s}.fsb__holes{position:absolute;top:50%;left:calc(var(--fsb-h) * 1.7);display:flex;gap:calc(var(--fsb-h) * .85);transform:translateY(-50%)}.fsb__holes i{width:calc(var(--fsb-h) * .28);height:calc(var(--fsb-h) * .17);border-radius:50%;background:var(--fsb-bg, #1d140f);box-shadow:inset 0 1px 1px #000c,0 0 0 1px #00000059}.fsb__screws{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;pointer-events:none}.fsb__screws i{position:absolute;top:50%;margin-top:calc(var(--fsb-h) * -.13);width:calc(var(--fsb-h) * .26);height:calc(var(--fsb-h) * .26);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#d8d8d8 25%,#8c8c8c 60%,#4a4a4a);box-shadow:0 1px 1px #0009}.fsb__screws i:first-child{right:calc(var(--fsb-bw) * .86 + var(--fsb-h) * .2)}.fsb__screws i:last-child{right:calc(var(--fsb-bw) * .86 + var(--fsb-h) * 1.6)}.fsb__screws i:after{content:"";position:absolute;top:45%;right:15%;bottom:45%;left:15%;background:#0000008c;transform:rotate(35deg)}.fsb__keeper{position:absolute;z-index:2;top:50%;right:calc(var(--fsb-bw) * .86 + var(--fsb-h) * .6);height:calc(var(--fsb-h) * 1.35);width:auto;transform:translateY(-50%);filter:drop-shadow(1px 1px 2px rgb(0 0 0 / .6));pointer-events:none}.fsb__buckle{position:absolute;right:0;top:50%;width:var(--fsb-bw);height:var(--fsb-bh);object-fit:contain;transform:translateY(-50%);opacity:1;filter:drop-shadow(0 1px 2px rgb(0 0 0 / .6));transition:opacity .6s ease .5s,filter .6s ease .5s;pointer-events:none}.fsb--done .fsb__buckle{opacity:1;filter:drop-shadow(0 1px 2px rgb(0 0 0 / .6))}.fsb--done .fsb__text{transition:color .6s ease 2.6s,text-shadow .6s ease 2.6s;color:#fff;text-shadow:0 0 2px #000,0 0 4px #000,0 1px 6px rgb(0 0 0 / .9);font-weight:600}@media(max-width:749px){.fsb{--fsb-h: 22px;padding:8px 12px}.fsb__text{font-size:.6875rem;letter-spacing:.06em}.fsb__holes{gap:calc(var(--fsb-h) * .6)}.fsb__holes i:nth-child(n+4){display:none}}@media(prefers-reduced-motion:reduce){.fsb__belt--lit,.fsb__buckle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/31/assets/free-shipping-belt.css.map */