/* Small interactions around the existing 3D stages. No additional renderer. */
html { scroll-padding-top: 96px; }
body { accent-color: #ef493d; }
button, a, input, select, summary { -webkit-tap-highlight-color: #64d6d322; }
.hair-button { transition: border-color .22s, background-color .22s, color .22s, translate .32s cubic-bezier(.16,1,.3,1); }
.hair-button[data-magnetic] { translate: var(--button-x,0px) var(--button-y,0px); }
.hair-button:not(:disabled):hover::before, .hair-button:not(:disabled):hover::after { width:13px; height:13px; }
.hair-button::before, .hair-button::after { transition: width .24s, height .24s; }
.hair-button:focus-visible { translate:0 0; }
.hair-button.motion-toggle:not(:disabled):hover { background:#20343f; color:#eef5f7; }
.story-rail { position:fixed; z-index:18; left:19px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-start; gap:5px; direction:ltr; opacity:0; visibility:hidden; transition:opacity .25s; }
.story-rail[data-visible=true] { opacity:1; visibility:visible; }
.story-rail a { display:flex; align-items:center; min-height:32px; gap:10px; width:32px; color:#a7bac4; text-decoration:none; }
.story-rail a::before { content:''; flex-shrink:0; height:1px; width:12px; background:currentColor; transition:width .3s,color .3s; }
.story-rail span { font:500 11px/1.5 Vazirmatn,sans-serif; direction:rtl; white-space:nowrap; background:#07111a; padding:5px 9px; opacity:0; transform:translateX(-6px); transition:opacity .2s,transform .2s; pointer-events:none; }
.story-rail a[aria-current=location] { color:#c0f4ea; }
.story-rail a[aria-current=location]::before { width:25px; }
.story-rail a:hover span, .story-rail a:focus-visible span { opacity:1; transform:none; }
.story-rail a:hover, .story-rail a:focus-visible { width:auto; color:#f3faf7; }
.product-dialog .dialog-header { border-bottom:1px solid #6e868a40; }
.product-dialog .dialog-info { position:relative; }
.product-dialog .dialog-price { font-variant-numeric:tabular-nums; }
.product-dialog .dialog-navigation { border-top:1px solid #6e868a40; padding-top:17px; }
body[data-motion=paused] .hair-button[data-magnetic] { translate:0 0; transition:none; }
@media(max-width:1320px) { .story-rail { display:none; } }
@media(prefers-reduced-motion:reduce) {
  .hair-button, .hair-button::before, .hair-button::after, .story-rail, .story-rail a::before, .story-rail span { transition:none; }
  .hair-button[data-magnetic] { translate:0 0; }
}