.btt-wrap { position: fixed; right: calc(50px + env(safe-area-inset-right, 0px)); bottom: calc(50px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s }
.btt-wrap.show { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s }
@media (max-width: 575px) { .btt-wrap { right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)) } }
.btt { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: 0 14px 34px var(--btn-shadow); display: grid; place-items: center; cursor: pointer; padding: 0; overflow: hidden; transition: transform .25s ease, background .2s ease }
.btt:hover { background: var(--btn-hover); border-color: var(--btn-hover); transform: translateY(-4px) }
.btt svg.chev { position: relative; z-index: 2; transform: translateY(-1px); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s }
.btt .fill, .btt .pct, .btt-wrap > .ring { pointer-events: none }


[data-fashion-btt] { --r: 12px; --w: 44px; --p: 0 }
[data-fashion-btt][data-shape="circle"] { --r: 50% }
[data-fashion-btt][data-shape="soft"] { --r: 6px }
[data-fashion-btt][data-shape="sharp"] { --r: 0px }
[data-fashion-btt][data-shape="pill"] { --r: 22px; --w: 60px }


[data-fashion-btt] { --accent: var(--ink); --btn-bg: #ebebeb; --btn-hover: #dedede; --btn-ink: #000000; --btn-fill: rgba(0,0,0,.12) }
[data-fashion-btt][data-accent]:not([data-accent="default"]) { --btn-bg: var(--accent); --btn-hover: color-mix(in srgb, var(--accent) 86%, #000); --btn-ink: #ffffff; --btn-fill: rgba(255,255,255,.22) }

[data-fashion-btt] .btt-wrap, [data-fashion-btt] .btt { width: var(--w) }
[data-fashion-btt] .btt { border-radius: var(--r) }


.btt-wrap > .ring { position: absolute; inset: -4px; border-radius: var(--r); padding: 2px; opacity: 0; transition: opacity .2s;
  background: conic-gradient(from 0deg, var(--accent) calc(var(--p) * 1turn), var(--line-2) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) }
[data-fashion-btt][data-shape="rounded"] .ring, [data-fashion-btt][data-shape="pill"] .btt-wrap > .ring { border-radius: calc(var(--r) + 4px) }
[data-fashion-btt][data-shape="soft"] .btt-wrap > .ring { border-radius: 10px }
[data-fashion-btt][data-v="ring"] .btt-wrap > .ring { opacity: 1 }


.btt .fill { position: absolute; inset: auto 0 0 0; height: 0%; background: var(--btn-fill); z-index: 1; transition: height .12s linear; display: none }
[data-fashion-btt][data-v="fill"] .btt .fill { display: block }


[data-fashion-btt][data-v="spring"] .btt-wrap { transform: translateY(16px) scale(.6) }
[data-fashion-btt][data-v="spring"] .btt-wrap.show { transform: none; transition: opacity .25s ease, transform .55s cubic-bezier(.34,1.56,.64,1), visibility 0s }
[data-fashion-btt][data-v="spring"] .btt-wrap.show .chev { animation: fashion-btt-nudge 2.6s ease-in-out 1s infinite }
@keyframes fashion-btt-nudge { 0%, 70%, 100% { transform: translateY(-1px) } 80% { transform: translateY(-5px) } 90% { transform: translateY(0) } }


[data-fashion-btt][data-v="velocity"] .btt { transition: transform .18s ease-out, background .2s }


.btt .pct { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px/1 var(--body); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; z-index: 2 }
[data-fashion-btt][data-v="percent"] .btt.scrolling .pct { opacity: 1; transform: none }
[data-fashion-btt][data-v="percent"] .btt.scrolling .chev { opacity: 0; transform: translateY(-10px) }


.btt.launch .chev { transform: translateY(-30px); opacity: 0; transition: transform .3s cubic-bezier(.5,0,.75,0), opacity .3s }
[data-fashion-btt][data-v="original"] .btt.launch .chev { transform: translateY(-1px); opacity: 1 }

@media (prefers-reduced-motion: reduce) {
  .btt-wrap, .btt-wrap.show, .btt, .btt svg.chev, .btt .fill, .btt .pct { transition: none !important; animation: none !important }
}

[data-fashion-btt] { --btn-shadow: rgba(7,17,29,.28); --line-2: #e5e5e5; --body: Poppins, sans-serif; }
[data-fashion-btt] .btt:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media(max-width:767px) { [data-fashion-btt] .btt-wrap { bottom: calc(117px + env(safe-area-inset-bottom,0px)); right: calc(20px + env(safe-area-inset-right,0px)); } }
@media(prefers-reduced-motion:reduce) { [data-fashion-btt] .ring {transition:none!important;animation:none!important;} }