/* Shared scroll details for the public storefront. */
html{scrollbar-color:#1b212a #f0f1f2;scrollbar-width:auto}
html::-webkit-scrollbar{width:12px}
html::-webkit-scrollbar-track{background:#f0f1f2}
html::-webkit-scrollbar-thumb{border:3px solid #f0f1f2;border-radius:999px;background:linear-gradient(180deg,#202630,#181d25)}
html::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#202630,#1b212a)}

.scroll-progress{position:fixed;inset:0 0 auto;z-index:140;height:4px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.scroll-progress.is-active{opacity:1}
.scroll-progress__bar{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#181d25 0%,#202630 60%,#80dfd9 100%);box-shadow:0 2px 11px rgba(27, 33, 42,.36);transition:transform .1s linear}

/* Mobile browsers often hide the native scrollbar, so keep a small position marker visible. */
.mobile-scroll-rail{display:none;position:fixed;top:calc(var(--storefront-header-bottom, 134px) + 7px);right:3px;bottom:max(7px,env(safe-area-inset-bottom));z-index:65;width:5px;border-radius:999px;background:rgba(25, 30, 40,.13);opacity:0;pointer-events:none}
.mobile-scroll-rail__thumb{display:block;width:100%;min-height:38px;border-radius:999px;background:linear-gradient(180deg,#202630,#191e28);box-shadow:0 1px 6px rgba(22, 27, 34,.34);will-change:transform}

.scroll-to-top{position:fixed;right:20px;bottom:var(--scroll-top-bottom,20px);z-index:65;display:inline-flex;align-items:center;gap:9px;min-height:54px;padding:8px 15px 8px 8px;border:1px solid #e4e5e7;border-radius:17px;background:rgba(255,255,255,.97);color:#171b23;box-shadow:0 13px 35px rgba(19, 22, 27,.16),0 3px 9px rgba(16, 19, 25,.08);backdrop-filter:blur(12px);font:750 13px/1.1 'Montserrat',Arial,sans-serif;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.94);transition:opacity .22s ease,visibility .22s ease,transform .28s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease}
.scroll-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.scroll-to-top:hover{border-color:#88cfcb;box-shadow:0 17px 39px rgba(19, 22, 27,.2),0 4px 11px rgba(20, 24, 31,.12);transform:translateY(-3px)}
.scroll-to-top:active{transform:translateY(0) scale(.96)}
.scroll-to-top:focus-visible{outline:3px solid #1b212a;outline-offset:3px}
.scroll-to-top__icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:linear-gradient(135deg,#202630,#181d26);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.24),0 4px 10px rgba(27, 33, 42,.2)}
.scroll-to-top__icon svg{display:block;width:20px;height:20px;stroke:currentColor}

html.mobile-nav-open .scroll-to-top,
html.category-menu-open .scroll-to-top,
body.storefront:has(.inner-category-drawer.is-open) .scroll-to-top,
body.storefront:has(dialog[open]) .scroll-to-top{opacity:0;visibility:hidden;pointer-events:none;transition:none}
html.mobile-nav-open .scroll-progress,
html.category-menu-open .scroll-progress,
body.storefront:has(.inner-category-drawer.is-open) .scroll-progress,
body.storefront:has(dialog[open]) .scroll-progress{opacity:0;transition:none}
html.mobile-nav-open .mobile-scroll-rail,
html.category-menu-open .mobile-scroll-rail,
body.storefront:has(.inner-category-drawer.is-open) .mobile-scroll-rail,
body.storefront:has(dialog[open]) .mobile-scroll-rail{opacity:0 !important}

@media(max-width:800px){
  html{scrollbar-gutter:auto}
  html:has(.mobile-scroll-rail){scrollbar-width:none;scrollbar-gutter:auto}
  html:has(.mobile-scroll-rail)::-webkit-scrollbar{display:none;width:0}
  .mobile-scroll-rail.is-visible{display:block;opacity:1}
  .scroll-to-top{right:15px;left:auto;bottom:var(--scroll-top-bottom,max(15px,env(safe-area-inset-bottom)));width:50px;height:50px;min-height:50px;justify-content:center;padding:6px;border-radius:16px}
  .scroll-to-top__icon{width:36px;height:36px;border-radius:11px}
  .scroll-to-top__label{display:none}
}
@media(max-width:800px){
  @supports (-webkit-touch-callout:none){.mobile-scroll-rail{display:none!important}}
  @supports not (scrollbar-width:none){.mobile-scroll-rail{display:none!important}}
}
@media(prefers-reduced-motion:reduce){
  .scroll-progress,.scroll-progress__bar,.scroll-to-top{transition:none}
}