@dcl/shop 1.6.4-31393274893.commit-fe5b3e4 → 1.6.4-31478985898.commit-31fbca5

package/_assets/browseLayout.styles-CEp4MDDk.js

@@ -0,0 +1,1050 @@
+import{r as w,j as e}from"./react-D4a12AOU.js";import{s as t,I as F,t as o,A as Ae,b as r,a6 as de,C as pe}from"./index-Cz0qQOE1.js";import{n as E,T as Oe}from"./Tooltip-dXqttMoC.js";import{T as Ue}from"./skeleton.styles-BL4LJ9kq.js";(function(){try{var i=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},a=new i.Error().stack;a&&(i._sentryDebugIds=i._sentryDebugIds||{},i._sentryDebugIds[a]="11fa1671-c897-4c90-9abf-92a1b0f48586",i._sentryDebugIdIdentifier="sentry-dbid-11fa1671-c897-4c90-9abf-92a1b0f48586")}catch{}})();function io(i){const a=w.useRef(null);w.useEffect(()=>{const h=a.current;a.current=i,!(h===null||h===i)&&window.scrollTo({top:0,left:0,behavior:"instant"})},[i])}const Ge=t(F)`
+  transition: transform 0.15s ease;
+
+  &[data-up='true'] {
+    transform: rotate(180deg);
+  }
+`;function N({up:i=!1,...a}){return e.jsx(Ge,{name:"chevron-down","data-up":i||void 0,...a})}const{colors:T,font:ee}=o,Ye=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  &[data-flat] {
+    background: none;
+    padding: 0;
+    width: auto;
+  }
+  &[data-flat] [data-cat]:hover,
+  &[data-flat] [data-sub]:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+  &[data-flat] [data-cat][data-selected],
+  &[data-flat] [data-sub][data-active] {
+    background: rgba(255, 255, 255, 0.16);
+  }
+`,he=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`,xe=t.div`
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.22s ease;
+
+  &[data-open] {
+    grid-template-rows: 1fr;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`,ue=t.div`
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`,te=Ae`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 40px;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+`,ge=t.button`
+  ${te};
+
+  /* Selected only: being open is signalled by the rotated chevron, not by tinting the row. */
+  &[data-selected] {
+    background: rgba(255, 255, 255, 0.14);
+  }
+`,qe=t.button`
+  ${te};
+  padding-left: 24px;
+
+  &[data-active] {
+    background: rgba(255, 255, 255, 0.16);
+  }
+  &[data-active] [data-sub-label] {
+    color: ${T.white};
+    font-weight: 600;
+  }
+
+  /* The chevron tracks the row's label: gray4 at rest, white on hover and while selected. */
+  [data-chevron] {
+    color: ${T.gray4};
+  }
+  &:hover [data-chevron],
+  &[data-active] [data-chevron] {
+    color: ${T.white};
+  }
+`,Qe=t.button`
+  ${te};
+  padding-left: 48px;
+
+  &[data-active] {
+    background: ${T.rarityBg};
+  }
+  &[data-active] [data-sub-label] {
+    color: ${T.rarity};
+    font-weight: 600;
+  }
+`,fe=t.span`
+  font-family: ${ee.sans};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.57;
+  color: ${T.softWhite};
+`,be=t.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+`,me=t(F)`
+  width: 24px;
+  height: 24px;
+  color: ${T.gray4};
+`,ye=t.span`
+  font-family: ${ee.sans};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  color: ${T.gray4};
+`,Ve=t.p`
+  font-family: ${ee.sans};
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: ${T.gray4};
+  margin: 0 0 4px;
+  padding: 8px 16px 0;
+`,oe=[{key:"all",labelKey:"categories.shopAll"},{key:"wearable",labelKey:"categories.wearables",expandable:!0,subs:[{key:"Head",labelKey:"categories.head",icon:"cat-head",expandable:!0,subs:[{key:"Facial Hair",labelKey:"categories.facialHair",icon:"cat-facial-hair"},{key:"Hair",labelKey:"categories.hair",icon:"cat-hair"},{key:"Eyes",labelKey:"categories.eyes",icon:"cat-eyes"},{key:"Eyebrows",labelKey:"categories.eyebrows",icon:"cat-eyebrows"},{key:"Mouth",labelKey:"categories.mouth",icon:"cat-mouth"}]},{key:"Upper Body",labelKey:"categories.upperBody",icon:"cat-upper"},{key:"Handwear",labelKey:"categories.handwear",icon:"cat-handwear"},{key:"Lower Body",labelKey:"categories.lowerBody",icon:"cat-lower"},{key:"Feet",labelKey:"categories.feet",icon:"cat-feet"},{key:"Accessories",labelKey:"categories.accessories",icon:"cat-accessories",expandable:!0,subs:[{key:"Earring",labelKey:"categories.earring",icon:"cat-earring"},{key:"Eyewear",labelKey:"categories.eyewear",icon:"cat-eyewear"},{key:"Hat",labelKey:"categories.hat",icon:"cat-hat"},{key:"Helmet",labelKey:"categories.helmet",icon:"cat-helmet"},{key:"Mask",labelKey:"categories.mask",icon:"cat-mask"},{key:"Tiara",labelKey:"categories.tiara",icon:"cat-tiara"},{key:"Top Head",labelKey:"categories.topHead",icon:"cat-top-head"}]},{key:"Skins",labelKey:"categories.skins",icon:"cat-skins"}]},{key:"emote",labelKey:"categories.emotes",expandable:!0,subs:[{key:"Dance",labelKey:"categories.dance",icon:"emote-dance"},{key:"Stunt",labelKey:"categories.stunt",icon:"emote-stunt"},{key:"Greetings",labelKey:"categories.greetings",icon:"emote-greetings"},{key:"Fun",labelKey:"categories.fun",icon:"emote-fun"},{key:"Poses",labelKey:"categories.poses",icon:"emote-poses"},{key:"Reactions",labelKey:"categories.reactions",icon:"emote-reactions"},{key:"Horror",labelKey:"categories.horror",icon:"emote-horror"},{key:"Miscellaneous",labelKey:"categories.miscellaneous",icon:"emote-misc"}]},{key:"names",labelKey:"categories.names"}];function Xe({category:i,subCategory:a,onCategory:h,onSub:u,title:d,flat:g=!1,collections:f=!1,onCollections:$,hideAll:m=!1,hideNames:b=!1,extraLabelKey:R="categories.collections"}){const[P,K]=w.useState(()=>i==="wearable"?"wearable":null),[y,j]=w.useState(null);function k(s){u(a===s.key?null:s.key),s.subs&&j(v=>v===s.key?null:s.key)}function S(s){s.subs?K(v=>{const l=v!==s.key;return l&&h(s.key),l?s.key:null}):(h(s.key),K(null))}return e.jsxs(Ye,{"data-flat":g||void 0,children:[d?e.jsx(Ve,{children:d}):null,oe.filter(s=>!(m&&s.key==="all")&&!(b&&s.key==="names")).map(s=>{const v=P===s.key&&!!s.subs,l=!f&&s.key===i&&!a;return e.jsxs(he,{children:[e.jsxs(ge,{type:"button","data-cat":!0,"data-expanded":v||void 0,"data-selected":l||void 0,onClick:()=>S(s),children:[e.jsx(fe,{children:r(s.labelKey)}),s.expandable?e.jsx(N,{up:v,size:24,color:o.colors.softWhite}):null]}),s.subs?e.jsx(xe,{"data-open":v||void 0,children:e.jsx(ue,{children:s.subs.map(x=>{const c=y===x.key&&!!x.subs;return e.jsxs("div",{children:[e.jsxs(qe,{type:"button","data-sub":!0,"data-active":a===x.key||void 0,onClick:()=>k(x),children:[e.jsxs(be,{children:[e.jsx(me,{name:x.icon,"aria-hidden":!0}),e.jsx(ye,{"data-sub-label":!0,children:r(x.labelKey)})]}),x.expandable?e.jsx(N,{up:c,size:24,"data-chevron":!0}):null]}),x.subs?e.jsx(xe,{"data-open":c||void 0,children:e.jsx(ue,{children:x.subs.map(C=>e.jsx(Qe,{type:"button","data-sub":!0,"data-active":a===C.key||void 0,onClick:()=>u(a===C.key?null:C.key),children:e.jsxs(be,{children:[e.jsx(me,{name:C.icon,"aria-hidden":!0}),e.jsx(ye,{"data-sub-label":!0,children:r(C.labelKey)})]})},C.key))})}):null]},x.key)})})}):null]},s.key)}),$?e.jsx(he,{children:e.jsx(ge,{type:"button","data-cat":!0,"data-selected":f||void 0,onClick:$,children:e.jsx(fe,{children:r(R)})})}):null]})}const{colors:B,radius:Te}=o,Je=t.div`
+  position: relative;
+  display: inline-block;
+`,Ze=t.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 4px 4px 4px 12px;
+  background: rgba(0, 0, 0, 0.12);
+  border: 0.5px solid ${B.muted2};
+  border-radius: ${Te.btn};
+  color: #ecebed;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.43;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+
+  &:hover {
+    border-color: ${B.white};
+  }
+  &:focus-visible {
+    outline: 0;
+    border-color: ${B.accent};
+  }
+`,et=t.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,tt=t.ul`
+  position: absolute;
+  top: calc(100% + 8px);
+  z-index: 40;
+  min-width: 174px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background: ${B.white};
+  border-radius: ${Te.btn};
+  box-shadow: 0 4px 25px 5px rgba(0, 0, 0, 0.25);
+  animation: cart-pop-in 0.16s ease;
+
+  &[data-align='left'] {
+    left: 0;
+  }
+  &[data-align='right'] {
+    right: 0;
+  }
+`,ot=t.button`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  text-align: left;
+  background: ${B.white};
+  border: 0;
+  padding: 4px 4px 4px 8px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${B.gray0};
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background: #f5f4f7;
+  }
+  &[data-active] {
+    background: ${B.media};
+  }
+`;function it({options:i,value:a,onChange:h,label:u,placeholder:d,align:g="left",className:f="",ariaLabel:$,open:m,onOpenChange:b}){const[R,P]=w.useState(!1),y=m!==void 0?m:R,j=w.useRef(null),k=w.useRef(b);k.current=b;const S=w.useCallback(l=>{var x;m!==void 0?(x=k.current)==null||x.call(k,l):P(l)},[m]),s=i.find(l=>l.value===a),v=u??(s==null?void 0:s.label)??d;return w.useEffect(()=>{if(!y)return;function l(c){j.current&&!j.current.contains(c.target)&&S(!1)}function x(c){c.key==="Escape"&&S(!1)}return document.addEventListener("pointerdown",l),document.addEventListener("keydown",x),()=>{document.removeEventListener("pointerdown",l),document.removeEventListener("keydown",x)}},[y,S]),e.jsxs(Je,{className:f||void 0,ref:j,children:[e.jsxs(Ze,{type:"button","data-dropdown-trigger":!0,"data-open":y||void 0,"aria-haspopup":"listbox","aria-expanded":y,"aria-label":$,onClick:()=>S(!y),children:[e.jsx(et,{children:v}),e.jsx(N,{up:y,size:24,color:o.colors.softWhite})]}),y?e.jsx(tt,{"data-align":g,role:"listbox",children:i.map(l=>e.jsx("li",{role:"none",children:e.jsx(ot,{type:"button",role:"option","aria-selected":l.value===a,"data-active":l.value===a||void 0,onClick:()=>{h(l.value),S(!1)},children:l.label})},l.value))}):null]})}const{colors:_}=o,at=t.div`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 36;
+  background: ${_.white};
+  border: 1px solid ${_.line};
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(22, 21, 24, 0.12);
+  padding: 8px;
+  animation: cart-pop-in 0.16s ease;
+
+  &[data-variant='rarity'] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2px;
+    min-width: 250px;
+  }
+  &[data-variant='price'] {
+    min-width: 240px;
+    padding: 12px;
+  }
+`,nt=t.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  text-transform: capitalize;
+  cursor: pointer;
+
+  &:hover {
+    background: #f5f4f7;
+  }
+  & input {
+    accent-color: ${_.accent};
+    width: 15px;
+    height: 15px;
+  }
+`;t.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  & input {
+    width: 100%;
+    border: 1px solid ${_.lineStrong};
+    border-radius: 10px;
+    padding: 8px 10px;
+    font-size: 14px;
+  }
+  & input:focus {
+    outline: 0;
+    border-color: ${_.accent};
+  }
+  & input::-webkit-outer-spin-button,
+  & input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;t.p`
+  margin: 8px 2px 0;
+  color: ${_.muted};
+  font-size: 12px;
+`;const{colors:p,media:D,radius:rt}=o,st=t.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+`,lt=t.span`
+  order: 1;
+  color: #ecebed;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.43;
+  white-space: nowrap;
+
+  /* Left end of the controls row, not a line of its own (2328:340761). */
+  ${D.maxWidth("lg")} {
+    order: 1;
+    flex: 0 0 auto;
+    font-size: 12px;
+    line-height: 1;
+    color: ${p.gray4};
+  }
+`,ct=t.div`
+  order: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+
+  ${D.maxWidth("lg")} {
+    order: 4;
+    flex-basis: 100%;
+    gap: 4px;
+  }
+`,dt=t.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px 6px 12px;
+  border: 0;
+  border-radius: ${rt.pill};
+  background: ${p.chipDark};
+  color: ${p.white};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.43;
+  white-space: nowrap;
+  cursor: pointer;
+
+  ${D.maxWidth("lg")} {
+    font-size: 10px;
+  }
+
+  &:hover {
+    background: ${p.text};
+  }
+  &:focus-visible {
+    outline: 2px solid ${p.accent};
+    outline-offset: 2px;
+  }
+`,pt=t(F)`
+  width: 14px;
+  height: 14px;
+  color: ${p.white};
+`,we=t.button`
+  padding: 0 4px;
+  background: none;
+  border: 0;
+  color: ${p.gray4};
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 1.43;
+  text-decoration: underline;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    color: ${p.white};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${p.accent};
+    outline-offset: 2px;
+  }
+`,ht=t.div`
+  flex: 0 1 405px;
+  min-width: 200px;
+
+  ${D.maxWidth("lg")} {
+    /* Shares the first row with Sort By + Filters, taking whatever they leave; the count drops below.
+       Deliberately no order property: it is the first child of Right already, and any positive order
+       would sort it BEHIND its unordered siblings. */
+    flex: 1 1 auto;
+    min-width: 130px;
+    margin-right: 16px;
+  }
+`,xt=t.div`
+  order: 4;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+
+  /* Sort By carries no height of its own — it is sized by its 12px label plus a 24px chevron, which lands
+     at 34px and left it visibly shorter than the 40px search field beside it. Pinned here, on the toolbar,
+     rather than on the Dropdown itself: that component is also used inside filter popovers and a modal,
+     where 40px is not the right size. Every toolbar gets the same pair of 40px controls. */
+  & [data-dropdown-trigger] {
+    height: 40px;
+  }
+
+  ${D.maxWidth("lg")} {
+    /* Owns the whole first row — search field then the two pills — with the count and chips below.
+       min-width: 0 defeats the flex item's automatic minimum, which would otherwise hold the row at its
+       min-content width (the pills never shrink) and push Filters off the right edge. */
+    order: 2;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-left: auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+
+    /* On mobile the Sort By dropdown is a pill matching the Filters pill (Figma 1304-310201): fully
+       rounded, 0.5px gray-3 hairline, title-case (not the desktop uppercase), same 28px height. */
+    & [data-dropdown-trigger] {
+      height: 36px;
+      padding: 8px 8px 8px 12px;
+      border-radius: 32px;
+      border: 1px solid ${p.softWhite};
+      color: ${p.softWhite};
+      background: ${p.glassFaint};
+      font-size: 12px;
+      font-weight: 500;
+      text-transform: none;
+      gap: 4px;
+    }
+  }
+`,ut=t.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 36px;
+  padding: 8px 8px 8px 12px;
+  background: ${p.glassFaint};
+  border: 1px solid ${p.softWhite};
+  border-radius: 32px;
+  color: ${p.softWhite};
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 1.43;
+  white-space: nowrap;
+  cursor: pointer;
+
+  ${D.minWidth("lg")} {
+    display: none;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  &:focus-visible {
+    outline: 2px solid ${p.accent};
+    outline-offset: 2px;
+  }
+`,gt=t(F)`
+  width: 20px;
+  height: 20px;
+  color: #ecebed;
+`,ft=t.div`
+  order: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`,bt=t.div`
+  position: relative;
+`,mt=t.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  color: ${p.gray4};
+  font-weight: 600;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: ${p.white};
+  }
+  &[data-open],
+  &[data-active] {
+    color: ${p.white};
+  }
+  &:focus-visible {
+    outline: 2px solid ${p.accent};
+    outline-offset: 2px;
+  }
+`,yt=t.span`
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: ${p.accent};
+  color: ${p.white};
+  font-size: 11px;
+  font-weight: 700;
+`,wt=t.div`
+  position: fixed;
+  inset: 0;
+  z-index: 34;
+`,J=["common","uncommon","epic","rare","legendary","exotic","mythic","unique"],kt=[{key:"newest",label:"filterBar.sortNewest",server:"newest"},{key:"price-asc",label:"filterBar.sortCheapest",server:"cheapest"},{key:"price-desc",label:"filterBar.sortMostExpensive",server:"most_expensive"},{key:"name",label:"filterBar.sortName",server:"name"}];function vt({panelKey:i,label:a,active:h,badge:u,panel:d,children:g}){const f=d.open===i;return e.jsxs(bt,{children:[e.jsxs(mt,{type:"button","data-open":f||void 0,"data-active":h||void 0,onClick:()=>d.toggle(i),children:[a," ",u?e.jsx(yt,{children:u}):null," ",e.jsx(N,{up:f,size:24,color:o.colors.text2})]}),f?g:null]})}function ao({sort:i,onSort:a,sortOptions:h=kt,total:u,loading:d,query:g,onOpenFilters:f,chips:$,onClearChips:m,rarities:b,onToggleRarity:R,rarityOptions:P=J,anyActive:K,onClear:y,renderLeading:j,renderTrailing:k,search:S}){const[s,v]=w.useState(null),l={open:s,toggle:c=>v(C=>C===c?null:c),close:()=>v(null)},x=!!R||!!j||!!k;return e.jsxs(e.Fragment,{children:[s?e.jsx(wt,{onClick:l.close,"aria-hidden":!0}):null,e.jsxs(st,{"data-testid":"browse-toolbar",children:[e.jsx(lt,{"data-testid":"browse-count","aria-busy":d||void 0,children:d?e.jsx(Ue,{className:"skeleton",width:72,"data-testid":"browse-count-skeleton","aria-hidden":!0}):e.jsxs(e.Fragment,{children:[r("filterBar.count",{count:u}),g?` ${r("filterBar.forQuery",{query:g})}`:""]})}),$&&$.length?e.jsxs(ct,{"data-testid":"filter-chips",children:[$.map(c=>e.jsxs(dt,{type:"button",onClick:c.onRemove,"aria-label":r("filterBar.removeFilter",{filter:c.label}),children:[e.jsx("span",{children:c.label}),e.jsx(pt,{name:"close","aria-hidden":!0})]},c.key)),m?e.jsx(we,{type:"button",onClick:m,children:r("filterBar.clearAll")}):null]}):null,x?e.jsxs(ft,{children:[j==null?void 0:j(l),R?e.jsx(vt,{panelKey:"rarity",label:r("filterBar.rarity"),active:((b==null?void 0:b.length)??0)>0,badge:(b==null?void 0:b.length)||void 0,panel:l,children:e.jsx(at,{"data-variant":"rarity",children:P.map(c=>e.jsxs(nt,{children:[e.jsx("input",{type:"checkbox",checked:(b==null?void 0:b.includes(c))??!1,onChange:()=>R(c)}),e.jsx("span",{children:c})]},c))})}):null,k==null?void 0:k(l),K?e.jsx(we,{type:"button",onClick:()=>{y==null||y(),l.close()},children:r("filterBar.clearAll")}):null]}):null,e.jsxs(xt,{children:[S?e.jsx(ht,{children:S}):null,e.jsx(it,{label:r("filterBar.sortBy"),ariaLabel:r("filterBar.sortBy"),value:i,options:h.map(c=>({value:c.key,label:r(c.label)})),onChange:a,align:"right",open:l.open==="sort",onOpenChange:c=>c?l.toggle("sort"):l.close()}),f?e.jsxs(ut,{type:"button",onClick:f,children:[r("filterBar.filters"),e.jsx(gt,{name:"filter","aria-hidden":!0})]}):null]})]})]})}const M=1e5,L=900,I=90,Y=I*2,Ee=L/I,Fe=M-L,ke=100;function ve(i){const a=Math.max(0,Math.min(Math.round(i),Y));if(a<=I)return a*Ee;const h=L+(a-I)/I*Fe;return Math.round(h/ke)*ke}function Z(i){const a=Math.max(0,Math.min(i,M));return a<=L?Math.round(a/Ee):I+Math.round((a-L)/Fe*I)}function $e(i){return Z(i)/Y*100}const $t=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+`,U=t.div`
+  height: 1px;
+  background: rgba(255, 255, 255, 0.25);
+  width: 100%;
+`,jt=t.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,St=t("button",E("desktopStatic"))`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  height: 40px;
+  padding: 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: ${o.colors.softWhite};
+  text-align: left;
+  cursor: pointer;
+
+  ${o.media.maxWidth("lg")} {
+    height: 52px;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+
+  ${({desktopStatic:i})=>i?`${o.media.minWidth("lg")} {
+          cursor: default;
+          &:hover { background: transparent; }
+        }`:""}
+`,Wt=t.span`
+  font-family: ${o.font.sans};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${o.colors.softWhite};
+
+  ${o.media.maxWidth("lg")} {
+    font-size: 16px;
+  }
+`,zt=t.span`
+  display: inline-flex;
+  ${o.media.minWidth("lg")} {
+    display: none;
+  }
+`,Rt=t("p",E("desktopHidden"))`
+  margin: 0;
+  padding: 0 4px 4px;
+  font-family: ${o.font.sans};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  color: ${o.colors.gray4};
+  text-transform: capitalize;
+
+  ${({desktopHidden:i})=>i?`${o.media.minWidth("lg")} { display: none; }`:""}
+`,Kt=t("div",E("open","desktopStatic"))`
+  display: grid;
+  grid-template-rows: ${({open:i})=>i?"1fr":"0fr"};
+  transition: grid-template-rows 0.22s ease;
+
+  ${({desktopStatic:i})=>i?`${o.media.minWidth("lg")} { grid-template-rows: 1fr; }`:""}
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`,Ct=t.div`
+  overflow: hidden;
+  min-height: 0;
+`,Tt=t.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 4px 0;
+`,je=t.label`
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+`,Se=t.span`
+  font-family: ${o.font.sans};
+  font-weight: 400;
+  font-size: 12px;
+  color: ${o.colors.gray4};
+`,We=t.span`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 42px;
+  padding: 8px;
+  border: 0.5px solid ${o.colors.softWhite};
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.1);
+
+  &:focus-within {
+    border-color: ${o.rarities.epic};
+  }
+`,ze=t.input`
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-family: ${o.font.sans};
+  font-size: 13px;
+  color: ${o.colors.softWhite};
+
+  &:focus {
+    outline: 0;
+  }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`,Et=t.span`
+  padding-bottom: 12px;
+  color: ${o.colors.softWhite};
+  font-family: ${o.font.sans};
+  font-size: 13px;
+`,Ft=t.div`
+  position: relative;
+  height: 20px;
+  margin: 24px 4px 0;
+`,Pt=t.div`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+`,Bt=t("div",E("minPct","maxPct"))`
+  position: absolute;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  left: ${({minPct:i})=>`${i}%`};
+  right: ${({maxPct:i})=>`${100-i}%`};
+  background: ${o.colors.rarity};
+  border-radius: 2px;
+`,Re=t.input`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  pointer-events: none;
+
+  /* The two inputs are stacked, so where the thumbs overlap only the one on top can be grabbed — and by
+     DOM order that is always Max. Once they meet, dragging left does nothing (Max is clamped against
+     Min) and the pair can only ever be separated rightwards; meeting at the ceiling wedges them for
+     good. Min claims the top half of the track, which is the half where it is the one against a wall. */
+  &[data-on-top] {
+    z-index: 2;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    pointer-events: auto;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: ${o.colors.white};
+    border: 2px solid ${o.colors.rarity};
+    box-shadow: 0 1px 3px rgba(22, 21, 24, 0.25);
+    cursor: pointer;
+  }
+  &::-moz-range-thumb {
+    pointer-events: auto;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: ${o.colors.white};
+    border: 2px solid ${o.colors.rarity};
+    box-shadow: 0 1px 3px rgba(22, 21, 24, 0.25);
+    cursor: pointer;
+  }
+`,It=t.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 4px 0;
+`,Ke=t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-family: ${o.font.sans};
+  font-size: 13px;
+  color: ${o.colors.softWhite};
+`,Ce=t(F)`
+  width: 16px;
+  height: 16px;
+  color: ${o.colors.softWhite};
+`,Ht=t.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 9px 4px 9px 8px;
+
+  ${o.media.maxWidth("lg")} {
+    gap: 12px 16px;
+  }
+`,Mt=t("button",E("selected"))`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: ${({selected:i})=>i?"rgba(0, 0, 0, 0.3)":"transparent"};
+  border: ${({selected:i})=>i?`1px solid ${o.colors.softWhite}`:"0.5px solid rgba(255, 255, 255, 0.3)"};
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+
+  &:hover {
+    border-color: ${o.colors.softWhite};
+  }
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+`,_t=t("span",E("color"))`
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: ${({color:i})=>i};
+  flex: none;
+`,Dt=t(F)`
+  position: absolute;
+  inset: 0;
+  width: 16px;
+  height: 16px;
+  color: ${o.colors.white};
+`,Nt=t("span",E("selected"))`
+  font-family: ${o.font.sans};
+  font-weight: ${({selected:i})=>i?600:400};
+  font-size: 12px;
+  line-height: 1.43;
+  /* Gray 5 at rest, soft-white when selected (Figma) — both read on the purple field. */
+  color: ${({selected:i})=>i?o.colors.softWhite:o.colors.media};
+  text-transform: capitalize;
+
+  ${o.media.maxWidth("lg")} {
+    font-size: 14px;
+  }
+`,Lt=t.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 40px;
+  padding: 4px 4px 4px 24px;
+  cursor: pointer;
+
+  /* The whole row is the target, so pointing at the label previews the same red the radio takes when
+     it is picked. Selected by tag rather than by interpolating StatusRadio (see CLAUDE.md). */
+  @media (hover: hover) {
+    &:hover input[type='radio'] {
+      border-color: ${o.colors.dclRed};
+    }
+  }
+`,At=t.input`
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border: 2px solid ${o.colors.media};
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  flex: none;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+
+  /* The dot is painted as a background rather than a child element, which a replaced element can't
+     have. The half-pixel feather on the stop keeps its edge from going jagged. */
+  &:checked {
+    border-color: ${o.colors.dclRed};
+    background: radial-gradient(circle at center, ${o.colors.dclRed} 0 4px, transparent 4.5px);
+  }
+  &:focus-visible {
+    outline: 2px solid ${o.colors.dclRed};
+    outline-offset: 2px;
+  }
+`,Ot=t.span`
+  font-family: ${o.font.sans};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${o.colors.gray4};
+`,Ut=t.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  height: 40px;
+  padding: 4px;
+
+  /* On mobile SMART is a peer of the collapsible section headers (Figma 1304-307965): same 52px row
+     height so it doesn't read as a smaller afterthought. */
+  ${o.media.maxWidth("lg")} {
+    height: 52px;
+  }
+`,Gt=t.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`,Yt=t(F)`
+  width: 14px;
+  height: 14px;
+  color: ${o.colors.softWhite};
+
+  ${o.media.maxWidth("lg")} {
+    width: 16px;
+    height: 16px;
+  }
+`,qt=t.span`
+  font-family: ${o.font.sans};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${o.colors.softWhite};
+  /* Figma labels SMART in uppercase (the flash-feature label), unlike the title-case section names. */
+  text-transform: uppercase;
+
+  /* Match the section-header title size on mobile so SMART has the same hierarchy as Price/Rarity/etc. */
+  ${o.media.maxWidth("lg")} {
+    font-size: 16px;
+  }
+`,Qt=t(F)`
+  width: 12px;
+  height: 12px;
+  color: ${o.colors.muted2};
+`,Vt=t("button",E("on"))`
+  position: relative;
+  width: 24px;
+  height: 14px;
+  padding: 0;
+  border-radius: 100px;
+  border: 0;
+  background: ${({on:i})=>i?o.colors.dclRed:"rgba(255, 255, 255, 0.1)"};
+  cursor: pointer;
+  flex: none;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+
+  /* Bigger, tappable switch on mobile (the 24×14 desktop pill reads as too small on a phone). */
+  ${o.media.maxWidth("lg")} {
+    width: 40px;
+    height: 22px;
+  }
+`,Xt=t("span",E("on"))`
+  position: absolute;
+  top: 50%;
+  left: ${({on:i})=>i?"calc(100% - 12px)":"0px"};
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  /* White knob in both states (Figma switch knob is soft-white) — only its position animates. */
+  background: ${o.colors.softWhite};
+  box-shadow: 0 1px 2px rgba(22, 21, 24, 0.3);
+  transition: left 0.15s ease;
+
+  ${o.media.maxWidth("lg")} {
+    width: 18px;
+    height: 18px;
+    left: ${({on:i})=>i?"calc(100% - 18px)":"2px"};
+  }
+`;function Jt(i){var a;for(const h of oe){const u=(a=h.subs)==null?void 0:a.find(d=>d.key===i);if(u)return r(u.labelKey)}return i}function G({title:i,open:a,onToggle:h,summary:u,desktopStatic:d,headerTestId:g,headerAria:f,children:$}){const m=e.jsx(N,{up:a,size:24,color:o.colors.softWhite});return e.jsxs(jt,{children:[e.jsxs(St,{type:"button",desktopStatic:d,onClick:h,"aria-expanded":a,"aria-label":f,"data-testid":g,children:[e.jsx(Wt,{children:i}),d?e.jsx(zt,{children:m}):m]}),!a&&u?e.jsx(Rt,{desktopHidden:d,children:u}):null,e.jsx(Kt,{open:a,desktopStatic:d,children:e.jsx(Ct,{children:$})})]})}function no({category:i,subCategory:a,onCategory:h,onSub:u,priceMin:d,priceMax:g,onPriceMin:f,onPriceMax:$,rarities:m,onToggleRarity:b,status:R,onStatus:P,smart:K,onSmart:y,hideNames:j=!1,collections:k=!1,onCollections:S}){var ce;const[s,v]=w.useState(!0),[l,x]=w.useState(!0),[c,C]=w.useState(!1),[Pe,Be]=w.useState(!0),q=d&&!Number.isNaN(Number(d))?Number(d):void 0,Q=g&&!Number.isNaN(Number(g))?Number(g):void 0,[W,V]=w.useState({}),ie=q!=null?Math.min(q,M):0,ae=Q!=null?Math.min(Q,M):M,A=W.min??ie,O=W.max??ae,ne=$e(A),Ie=$e(O),re=n=>n<=0?"":String(n),se=n=>n>=M?"":String(n);function He(n){V(z=>{const X=z.max??ae;return{...z,min:Math.min(ve(n),X)}})}function Me(n){V(z=>{const X=z.min??ie;return{...z,max:Math.max(ve(n),X)}})}function H(){W.min===void 0&&W.max===void 0||(W.min!==void 0&&f(re(W.min)),W.max!==void 0&&$(se(W.max)),V({}))}const le=(ce=oe.find(n=>n.key===i))==null?void 0:ce.labelKey,_e=k?r("categories.collections"):a?Jt(a):le&&i!=="all"?r(le):"",De=q!=null||Q!=null?`${d||"0"}-${g||"∞"}`:"",Ne=J.filter(n=>m.includes(n)).map(de).join(", "),Le=R==="on_sale"?r("filter.onSale"):R==="not_for_sale"?r("filter.notForSale"):"";return e.jsxs($t,{children:[e.jsx(G,{title:r("assets.category"),open:s,onToggle:()=>v(n=>!n),summary:_e,desktopStatic:!0,children:e.jsx(Xe,{category:i,subCategory:a,onCategory:h,onSub:u,hideNames:j,collections:k,onCollections:S})}),e.jsx(U,{}),e.jsxs(G,{title:r("filter.price"),open:l,onToggle:()=>x(n=>!n),summary:De,desktopStatic:!0,children:[e.jsxs(Tt,{children:[e.jsxs(je,{children:[e.jsx(Se,{children:r("assets.min")}),e.jsx(We,{children:e.jsx(ze,{type:"number",min:"0","aria-label":r("assets.minPriceAria"),placeholder:"0",value:W.min!==void 0?re(W.min):d,onChange:n=>f(n.target.value)})})]}),e.jsx(Et,{children:r("assets.priceTo")}),e.jsxs(je,{children:[e.jsx(Se,{children:r("assets.max")}),e.jsx(We,{children:e.jsx(ze,{type:"number",min:"0","aria-label":r("assets.maxPriceAria"),placeholder:"0",value:W.max!==void 0?se(W.max):g,onChange:n=>$(n.target.value)})})]})]}),e.jsxs(Ft,{children:[e.jsx(Pt,{"aria-hidden":!0}),e.jsx(Bt,{minPct:ne,maxPct:Ie,"aria-hidden":!0}),e.jsx(Re,{type:"range",min:0,max:Y,value:Z(A),"aria-label":r("assets.minPriceSliderAria"),"aria-valuetext":A.toLocaleString(),"data-on-top":ne>=50?"":void 0,onChange:n=>He(Number(n.target.value)),onPointerUp:H,onKeyUp:H,onBlur:H}),e.jsx(Re,{type:"range",min:0,max:Y,value:Z(O),"aria-label":r("assets.maxPriceSliderAria"),"aria-valuetext":O.toLocaleString(),onChange:n=>Me(Number(n.target.value)),onPointerUp:H,onKeyUp:H,onBlur:H})]}),e.jsxs(It,{children:[e.jsxs(Ke,{children:[e.jsx(Ce,{name:pe.iconName,"aria-hidden":!0}),A.toLocaleString()]}),e.jsxs(Ke,{children:[e.jsx(Ce,{name:pe.iconName,"aria-hidden":!0}),O.toLocaleString()]})]})]}),e.jsx(U,{}),e.jsx(G,{title:r("assets.rarity"),open:c,onToggle:()=>C(n=>!n),summary:Ne,headerTestId:"sidebar-section-toggle",children:e.jsx(Ht,{"data-testid":"rarity-filter",children:J.map(n=>{const z=m.includes(n);return e.jsxs(Mt,{type:"button",selected:z,"aria-pressed":z,onClick:()=>b(n),"data-testid":"rarity-filter-check",children:[e.jsx(_t,{color:o.rarities[n],children:z?e.jsx(Dt,{name:"check","aria-hidden":!0}):null}),e.jsx(Nt,{selected:z,children:de(n)})]},n)})})}),e.jsx(U,{}),e.jsx(G,{title:r("filter.status"),open:Pe,onToggle:()=>Be(n=>!n),summary:Le,children:[["all",r("filter.statusAll")],["on_sale",r("filter.onSale")],["not_for_sale",r("filter.notForSale")]].map(([n,z])=>e.jsxs(Lt,{children:[e.jsx(At,{type:"radio",name:"shop-status",checked:R===n,onChange:()=>P(n)}),e.jsx(Ot,{children:z})]},n))}),e.jsx(U,{}),e.jsxs(Ut,{children:[e.jsxs(Gt,{children:[e.jsx(Yt,{name:"smart","aria-hidden":!0}),e.jsx(qt,{children:r("filter.smart")}),e.jsx(Oe,{content:r("filter.smartHint"),placement:"bottom",children:e.jsx(Qt,{name:"info",role:"img","aria-label":r("filter.smartHint"),tabIndex:0,"data-testid":"smart-hint"})})]}),e.jsx(Vt,{type:"button",role:"switch",on:K,"aria-checked":K,"aria-label":r("filter.smart"),onClick:()=>y(!K),children:e.jsx(Xt,{on:K})})]})]})}const ro={Head:["head","hair","facial_hair","eyes","eyebrows","mouth"],"Facial Hair":["facial_hair"],Hair:["hair"],Eyes:["eyes"],Eyebrows:["eyebrows"],Mouth:["mouth"],"Upper Body":["upper_body"],Handwear:["hands_wear"],"Lower Body":["lower_body"],Feet:["feet"],Accessories:["earring","eyewear","hat","helmet","mask","tiara","top_head"],Earring:["earring"],Eyewear:["eyewear"],Hat:["hat"],Helmet:["helmet"],Mask:["mask"],Tiara:["tiara"],"Top Head":["top_head"],Skins:["skin"],Dance:["dance"],Stunt:["stunt"],Greetings:["greetings"],Fun:["fun"],Poses:["poses"],Reactions:["reactions"],Horror:["horror"],Miscellaneous:["miscellaneous"]},so=t.div`
+  position: relative;
+  display: flex;
+  gap: 32px;
+  align-items: flex-start;
+
+  ${o.media.maxWidth("lg")} {
+    display: block;
+  }
+`,lo=t.div`
+  flex: 1;
+  min-width: 0;
+
+  ${o.media.maxWidth("lg")} {
+    width: 100%;
+  }
+`,co=t.aside`
+  flex: none;
+  width: 265px;
+
+  /* Desktop only (mobile is the off-canvas drawer below). Pin the filter column so it accompanies the
+     grid's scroll, and let it scroll internally when every section is expanded instead of overflowing
+     the page. The row's align-items: flex-start (Root) keeps this a content-height item, which is what
+     makes sticky able to move within the row.
+     data-static opts out (the collection storefront, whose column flows with the page). */
+  ${o.media.minWidth("lg")} {
+    &:not([data-static]) {
+      position: sticky;
+      /* Sit flush below the fixed ui2 navbar (92px) + the sticky shop sub-nav (66px = its height) so
+         the sidebar tracks scroll without hiding under them or floating in a gap (see index.css). */
+      top: 158px;
+      /* Scroll inside the column when the expanded filters exceed the viewport; the 24px keeps the
+         last control clear of the screen edge. */
+      max-height: calc(100vh - 158px - 24px);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      /* Scrollbar fully hidden (it used to fade in on hover, which read as a glitch on the dark
+         theme). Wheel/trackpad/keyboard scrolling still works; the column just never shows a bar. */
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        width: 0;
+        display: none;
+      }
+    }
+  }
+
+  ${o.media.maxWidth("lg")} {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    z-index: 9999;
+    width: 100%;
+    max-height: 88vh;
+    display: flex;
+    flex-direction: column;
+    border-radius: 16px 16px 0 0;
+    background: #2b0e44;
+    padding: 0 16px;
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
+    transform: translateY(100%);
+    transition: transform 0.26s ease;
+    visibility: hidden;
+
+    &[data-open] {
+      transform: translateY(0);
+      visibility: visible;
+    }
+  }
+`,po=t.div`
+  ${o.media.maxWidth("lg")} {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    /* Room so the last filter row clears the sticky "Show items" bar (Figma bottom bar). */
+    padding-bottom: 24px;
+  }
+`,ho=t.div`
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background: rgba(0, 0, 0, 0.4);
+`,xo=t.div`
+  display: none;
+
+  ${o.media.maxWidth("lg")} {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #2b0e44;
+    margin: 0 -16px 8px;
+    padding: 16px 16px 12px;
+    border-radius: 16px 16px 0 0;
+  }
+`,uo=t.span`
+  font-family: ${o.font.sans};
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+  color: ${o.colors.softWhite};
+`,go=t.button`
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+  border: 0;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  color: ${o.colors.softWhite};
+
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+`,fo=t.div`
+  display: none;
+
+  ${o.media.maxWidth("lg")} {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    position: sticky;
+    bottom: 0;
+    margin: 8px -16px 0;
+    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
+    background: #2b0e44;
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
+    z-index: 1;
+  }
+`,bo=t.button`
+  flex: 1;
+  height: 40px;
+  border: 0;
+  border-radius: 8px;
+  background: ${o.colors.accent};
+  color: ${o.colors.softWhite};
+  font-family: ${o.font.sans};
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.46px;
+  line-height: 24px;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(1.08);
+  }
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+`;export{oe as C,U as D,G as F,lo as M,J as R,Lt as S,Xe as a,Ht as b,Mt as c,_t as d,Dt as e,Nt as f,At as g,Ot as h,so as i,ho as j,co as k,xo as l,uo as m,go as n,po as o,fo as p,bo as q,ao as r,ro as s,kt as t,io as u,no as v};
+//# sourceMappingURL=browseLayout.styles-CEp4MDDk.js.map