@dcl/shop 0.1.0-30381444187.commit-e5b9f13 → 0.1.0-30412251367.commit-a3b4797

package/assets/CollectionCarousel-QT5SE2Qn.js

@@ -0,0 +1,786 @@
+import{j as t,r as v}from"./react-BcSuIh9F.js";import{s as e,t as o,d as g,m as k,X as j,b6 as C,e as G,P as X,I as Q,H as Y,g as W,C as B,a as Z,b7 as J,b8 as F,L as q}from"./index-CKryZsyO.js";import{s as ee,i as H,A as U,g as K,r as te,m as ne,e as ae}from"./authorizations-D9SdrCKu.js";import{i as ie}from"./errors-BnsKc9DV.js";import{E as oe}from"./ErrorNotice-D5gYmXmi.js";import{b as se}from"./buy-D5aQviUN.js";import{d as re,f as ce}from"./trade-encoding-Bjf-A7RZ.js";import{s as de,M as le,E as pe}from"./sendMetaTransaction-B3dSruz9.js";import{I as he,C as ue}from"./ethers-BcJP3Jlu.js";const L="shop:resume_after_signin",xe=900*1e3;function rt(a){try{sessionStorage.setItem(L,JSON.stringify({...a,at:Date.now()}))}catch{}}function ct(a){let n;try{n=sessionStorage.getItem(L)}catch{return null}if(!n)return null;try{sessionStorage.removeItem(L)}catch{}let i;try{i=JSON.parse(n)}catch{return null}return!i||i.type!==a||typeof i.at!="number"||Date.now()-i.at>xe?null:i.type==="cart-checkout"?{type:"cart-checkout"}:{type:"item-buy",path:i.path}}function ge(a,n){return(a+n-1n)/n}function fe(a,n,i){return a<=0||n<=0?0n:a>=n?i:ge(i*BigInt(a),BigInt(n))}function dt(a){var m,f,w;const n=Number.isFinite(a.priceCents)?Math.max(0,Math.trunc(a.priceCents)):0,i=Number.isFinite(a.balanceCents)?Math.max(0,Math.trunc(a.balanceCents)):0,s=a.priceManaWei>0n?a.priceManaWei:0n,d=a.manaBalanceWei>0n?a.manaBalanceWei:0n;if(n<=0)return{options:[],preferred:null,manaShortfall:null};const c=[];if(i>=n&&c.push({method:"credits",creditsCents:n,manaWei:0n}),s>0n&&i>0&&i<n){const l=n-i,b=fe(l,n,s);d>=b&&c.push({method:"combined",creditsCents:i,manaWei:b})}s>0n&&d>=s&&c.push({method:"mana",creditsCents:0,manaWei:s});const p=((m=c.find(l=>l.method==="credits"))==null?void 0:m.method)??((f=c.find(l=>l.method==="combined"))==null?void 0:f.method)??((w=c.find(l=>l.method==="mana"))==null?void 0:w.method)??null,y=!c.some(l=>l.method==="mana"||l.method==="combined")&&s>0n&&d>0n?{manaWei:d,manaCents:me(d,n,s),priceCents:n}:null;return{options:c,preferred:p,manaShortfall:y}}function me(a,n,i){return Number(a*BigInt(n)/i)}function lt(a,n){let i=Number.isFinite(n)?Math.max(0,Math.trunc(n)):0;return a.map(s=>{const d=Number.isFinite(s)?Math.max(0,Math.trunc(s)):0,c=Math.min(d,i);return i-=c,c})}function z(a){return Number.isFinite(a)?Math.max(0,a)/10:0}function pt(a,n){return a.options.find(i=>i.method===n)??null}function ht(a,n){if(!Number.isFinite(a)||a<=0||n<=0n)return null;const i=a/10;return Number(n)/1e18/i}const E="data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Group%201'%3e%3cpath%20id='Vector'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12%202L22%2012L12%2022L2%2012L12%202ZM12%204.8L19.2%2012L12%2019.2L4.8%2012L12%204.8ZM12%2015.6C12.9548%2015.6001%2013.8705%2015.2209%2014.5457%2014.5459C15.2209%2013.8708%2015.6003%2012.9552%2015.6004%2012.0004C15.6005%2011.0456%2015.2213%2010.1299%2014.5463%209.45471C13.8712%208.7795%2012.9556%208.40011%2012.0008%208.4C11.0461%208.4%2010.1304%208.77928%209.45525%209.45442C8.78012%2010.1295%208.40083%2011.0452%208.40083%2012C8.40083%2012.9548%208.78012%2013.8705%209.45525%2014.5456C10.1304%2015.2207%2011.0461%2015.6%2012.0008%2015.6H12Z'%20fill='white'/%3e%3cg%20id='Rectangle%201'%3e%3c/g%3e%3c/g%3e%3c/svg%3e",be=e.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: stretch;
+  width: 100%;
+`,_=`
+  width: 100%;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 12px;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    filter 0.15s ease;
+  font-family: ${o.font.sans};
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 24px;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+  color: ${o.colors.softWhite};
+
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`,ye=e.button`
+  ${_}
+  background: ${o.gradients.amethyst};
+
+  &:hover:not(:disabled) {
+    filter: brightness(1.08);
+  }
+`,T=e.button`
+  ${_}
+  background: ${o.colors.text2};
+
+  &:hover:not(:disabled) {
+    background: ${o.colors.gray0};
+  }
+`,M=e.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-transform: none;
+  letter-spacing: 0;
+
+  span {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: normal;
+  }
+  .ico {
+    width: 24px;
+    height: 24px;
+    background: ${o.colors.softWhite};
+  }
+`,N=e.span`
+  position: relative;
+  display: block;
+  width: 30px;
+  height: 30px;
+  flex: none;
+
+  /* Centred in the slot, not pinned to its top: the slot is taller than the glyph and sits next to a
+     vertically centred amount, so a top-pinned mark reads as floating above the number. */
+  img {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+    display: block;
+  }
+`,we=e.span`
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  opacity: 0.85;
+`,ve=e.span`
+  font-size: 18px;
+  font-weight: 600;
+  opacity: 0.7;
+`,ke=e.p`
+  margin: 0;
+  font-family: ${o.font.sans};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1;
+  color: ${o.colors.muted};
+  text-align: center;
+`,$e=e.p`
+  margin: -4px 0 0;
+  font-family: ${o.font.sans};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.4;
+  color: ${o.colors.muted};
+  text-align: center;
+`;function ut({options:a,totalCents:n,onPay:i,busy:s=!1,rateNote:d,creditsLabel:c,shortfall:p}){return t.jsxs(be,{children:[a.map(h=>h.method==="credits"?t.jsxs(ye,{type:"button","data-testid":"pay-with-credits",onClick:()=>i("credits"),disabled:s,children:[t.jsx("span",{children:c??g("buyModal.buy")}),t.jsxs(M,{children:[t.jsx(k,{}),t.jsx("span",{children:j(z(h.creditsCents))})]})]},"credits"):h.method==="mana"?t.jsxs(T,{type:"button","data-testid":"pay-with-mana",onClick:()=>i("mana"),disabled:s,children:[t.jsx("span",{children:g("buyModal.buyWithMana")}),t.jsxs(M,{children:[t.jsx(N,{children:t.jsx("img",{src:E,alt:"","aria-hidden":!0})}),t.jsx("span",{children:C(h.manaWei)})]})]},"mana"):t.jsxs(T,{type:"button","data-testid":"pay-with-combined",onClick:()=>i("combined"),disabled:s,children:[t.jsx("span",{children:g("buyModal.buyWith")}),t.jsxs(M,{children:[t.jsx(k,{}),t.jsx("span",{children:j(z(h.creditsCents))}),t.jsx(ve,{children:"+"}),t.jsx(N,{children:t.jsx("img",{src:E,alt:"","aria-hidden":!0})}),t.jsx("span",{children:C(h.manaWei)}),t.jsx(we,{children:"MANA"})]})]},"combined")),p?t.jsxs(t.Fragment,{children:[t.jsxs(T,{type:"button","data-testid":"pay-with-mana-disabled",disabled:!0,children:[t.jsx("span",{children:g("buyModal.buyWithMana")}),t.jsxs(M,{children:[t.jsx(N,{children:t.jsx("img",{src:E,alt:"","aria-hidden":!0})}),t.jsx("span",{children:C(p.manaWei)})]})]},"mana-short"),t.jsx($e,{"data-testid":"mana-shortfall-note",children:g("buyModal.manaWorth",{mana:C(p.manaWei),credits:j(z(p.manaCents)),price:j(z(p.priceCents)),currency:G.name})})]}):null,d?t.jsx(ke,{"data-testid":"mana-rate-note",children:d}):null,t.jsx("span",{hidden:!0,"data-testid":"pay-total-cents",children:n})]})}function xt(a,n){const i=(s,...d)=>void a.invalidateQueries({queryKey:n?[s,...d]:[s]});a.invalidateQueries({queryKey:["usd-balance"]}),a.invalidateQueries({queryKey:["detail-trade"]}),a.invalidateQueries({queryKey:["shop-item"]}),i("owned-token",n==null?void 0:n.contractAddress,n==null?void 0:n.tokenId),i("public-token",n==null?void 0:n.contractAddress,n==null?void 0:n.tokenId),i("item-resales",n==null?void 0:n.contractAddress,n==null?void 0:n.itemId),a.invalidateQueries({queryKey:["shop-items"]}),a.invalidateQueries({queryKey:["catalog-items"]}),a.invalidateQueries({queryKey:["overview-listings"]}),a.invalidateQueries({queryKey:["upsell-listings"]}),a.invalidateQueries({queryKey:["my-assets"]}),a.invalidateQueries({queryKey:["purchases"]}),a.invalidateQueries({queryKey:["owned-item-count"]})}const je=X`
+  to { transform: rotate(360deg); }
+`,Ce=e.div`
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(22, 21, 24, 0.55);
+`,ze=e.div`
+  width: 480px;
+  max-width: 100%;
+  max-height: 92vh;
+  overflow-y: auto;
+  background: ${o.colors.white};
+  border-radius: 16px;
+  padding: 12px 16px 16px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`,Me=e.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${o.colors.gray4};
+`,Ae=e.h2`
+  margin: 0;
+  font-family: ${o.font.sans};
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1.6;
+  color: ${o.colors.text};
+`,We=e.button`
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: ${o.colors.text};
+
+  .ico {
+    width: 18px;
+    height: 18px;
+  }
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+`,Ie=e.div`
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 18px;
+  background: ${o.colors.white};
+  border: 1px solid ${o.colors.line};
+  border-radius: 16px;
+`,Se=e.div`
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: ${o.colors.media};
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${o.colors.muted2};
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  .ccy-mark {
+    width: 26px;
+    height: 26px;
+  }
+`,Ee=e.div`
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`,Te=e.span`
+  font-weight: 700;
+  color: ${o.colors.text};
+`,Ne=e.span`
+  font-size: 13px;
+  line-height: 1.45;
+  color: ${o.colors.muted};
+`,Be=e.p`
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${o.colors.muted2};
+`,Le=e.div`
+  display: flex;
+  gap: 12px;
+
+  ${o.media.maxWidth("mobile")} {
+    flex-direction: column-reverse;
+  }
+`,Re=e.button`
+  flex: 1 1 0;
+  height: 48px;
+  border: 2px solid ${o.colors.accent};
+  border-radius: 12px;
+  background: transparent;
+  color: ${o.colors.accent};
+  cursor: pointer;
+  font-family: ${o.font.sans};
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 24px;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+
+  &:hover:not(:disabled) {
+    background: rgba(105, 31, 169, 0.06);
+  }
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+`,Pe=e.button`
+  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 48px;
+  border: 0;
+  border-radius: 12px;
+  background: ${o.colors.accent};
+  color: ${o.colors.softWhite};
+  cursor: pointer;
+  font-family: ${o.font.sans};
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 24px;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+
+  &:hover:not(:disabled) {
+    background: ${o.colors.accentHover};
+  }
+  &:disabled {
+    cursor: default;
+    background: rgba(105, 31, 169, 0.4);
+  }
+  &:focus-visible {
+    outline: 2px solid ${o.colors.accent};
+    outline-offset: 2px;
+  }
+`,Fe=e.span`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-top-color: ${o.colors.white};
+  animation: ${je} 0.7s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;function gt({auth:a,signer:n,title:i,reason:s,name:d,image:c,icon:p,onAuthorized:h,onCancel:y,onClose:m}){const[f,w]=v.useState(!1),[l,b]=v.useState(null);async function $(){w(!0),b(null);try{await ee({auth:a,signer:n,active:!0}),h()}catch(u){ie(u)?b(g("authorizeStep.errorRejected")):(Y(u,{flow:"authorize_step",kind:a.kind}),b(g("authorizeStep.errorGeneric"))),w(!1)}}return t.jsx(Ce,{onClick:f?void 0:m,role:"presentation",children:t.jsxs(ze,{onClick:u=>u.stopPropagation(),role:"dialog","aria-modal":"true","aria-label":i,children:[t.jsxs(Me,{children:[t.jsx(Ae,{children:i}),t.jsx(We,{onClick:m,disabled:f,"aria-label":g("authorizeStep.close"),children:t.jsx(Q,{name:"close",className:"ico"})})]}),t.jsxs(Ie,{"data-testid":"authorize-step-row",children:[t.jsx(Se,{children:c?t.jsx("img",{src:c,alt:""}):p}),t.jsxs(Ee,{children:[t.jsx(Te,{title:d,children:d}),t.jsx(Ne,{children:s})]})]}),t.jsx(Be,{children:g("authorizeStep.note")}),t.jsx(oe,{message:l}),t.jsxs(Le,{children:[t.jsx(Re,{type:"button",onClick:y,disabled:f,children:g("authorizeStep.cancel")}),t.jsx(Pe,{type:"button","data-testid":"authorize-step-action",onClick:()=>void $(),disabled:f,children:f?t.jsxs(t.Fragment,{children:[t.jsx(Fe,{"aria-hidden":!0}),g("authorizeStep.authorizing")]}):g("authorizeStep.authorize")})]})]})})}async function ft(a){const[n]=await Ke({...a,trades:[a.trade]});return n}async function Ke(a){const{trades:n,buyer:i,signer:s,onSigned:d}=a;if(n.length===0)throw new Error("No items to buy");const c=new Map;for(const h of n){const y=`${h.chainId}:${h.contract.toLowerCase()}`,m=c.get(y);m?m.push(h):c.set(y,[h])}const p=[];for(const h of c.values())p.push(await De({trades:h,buyer:i,signer:s,onSigned:d}));return p}async function De(a){const{trades:n,buyer:i,signer:s,onSigned:d}=a,c=n[0],p=W(Z(c.contract),c.chainId),h=W(B.MANAToken,c.chainId);await H({auth:{kind:U.Allowance,contractAddress:h.address,spenderAddress:p.address,chainId:c.chainId},signer:s});const y=n.map(l=>re(l,i));if(K.enabled)try{const l=new he(p.abi).encodeFunctionData("accept",[y]),b=te(),$=ne(s.provider,b),u=await de($,b,l,p,{serverURL:K.relayerUrl});return d==null||d(),await b.waitForTransaction(u,1,12e4),u}catch(l){if(l instanceof le&&l.code===pe.USER_DENIED)throw l;console.warn("[buyWithMana] gasless meta-tx failed, falling back to a direct tx:",l)}await ae(s.provider,c.chainId);const f=await new ue(p.address,p.abi,s).accept(y,ce(c.chainId));return d==null||d(),(await f.wait()).transactionHash}async function mt(a){const{trade:n,buyer:i,signer:s,credits:d,manaGapWei:c}=a;if(d.length===0)throw new Error("No credits to spend — use buyWithMana for a MANA-only purchase");if(c<=0n)throw new Error("No MANA gap to cover — use buyWithCredits for a credits-only purchase");const p=W(B.MANAToken,n.chainId),h=W(B.CreditsManager,n.chainId);await H({auth:{kind:U.Allowance,contractAddress:p.address,spenderAddress:h.address,chainId:n.chainId},signer:s});const m=(d.reduce((f,w)=>f+BigInt(w.availableAmount),0n)+c).toString();return se({trade:n,buyer:i,signer:s,credits:d,maxCreditedValue:m})}function bt(a){return t.jsx("svg",{viewBox:"0 0 18 18",width:"18",height:"18","aria-hidden":!0,...a,children:t.jsx("path",{d:"M4 4l10 10M14 4L4 14",stroke:"#161518",strokeWidth:"1.8",strokeLinecap:"round"})})}function yt(a){return t.jsxs("svg",{viewBox:"0 0 24 24",width:"24",height:"24","aria-hidden":!0,...a,children:[t.jsx("path",{d:"M12 3L2 20h20L12 3z",fill:"none",stroke:"#691fa9",strokeWidth:"1.8",strokeLinejoin:"round"}),t.jsx("path",{d:"M12 9v5",stroke:"#691fa9",strokeWidth:"1.8",strokeLinecap:"round"}),t.jsx("circle",{cx:"12",cy:"17",r:"1.1",fill:"#691fa9"})]})}const{colors:r,gradients:O,radius:V,z:Qe}=o,wt=e.div`
+  position: fixed;
+  inset: 0;
+  z-index: ${Qe.overlay};
+  display: grid;
+  place-items: center;
+  padding: 20px;
+`,vt=e.div`
+  position: absolute;
+  inset: 0;
+  background: rgba(22, 21, 24, 0.45);
+`,kt=e.div`
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  /* Wide enough to fit all 4 credit bundles comfortably in a single row (the credits-server returns 4;
+     the Figma mock showed 3 at ~180px). The pack tiles flex to share this width. */
+  max-width: 700px;
+  /* Grid-item auto-minimum can otherwise push the card past the viewport on a narrow screen. */
+  min-width: 0;
+  background: ${r.white};
+  border-radius: 16px;
+  padding: 12px 16px 16px;
+  box-shadow: 0 24px 60px rgba(22, 21, 24, 0.28);
+  animation: cart-pop-in 0.16s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  &[data-tall] {
+    min-height: 379px;
+    justify-content: space-between;
+  }
+`,$t=e.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${r.gray4};
+`,jt=e.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+`,Ct=e.h2`
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.6;
+  color: ${r.text};
+`,zt=e.button`
+  flex-shrink: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 2px;
+  line-height: 0;
+`,Mt=e.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`,At=e.span`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${r.muted1};
+`,Wt=e(k)`
+  width: 14px;
+  height: 14px;
+  background: ${r.text};
+`,It=e.span`
+  font-size: 14px;
+  color: ${r.text};
+`,St=e.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  /* Processing / loading states centre a single element in a taller body. */
+  &[data-processing] {
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+    padding: 24px 0;
+  }
+`,Et=e.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+`,Tt=e.div`
+  flex-shrink: 0;
+  width: 180px;
+  height: 180px;
+  background: ${r.media};
+  border: 1px solid ${r.muted2};
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+
+  & img {
+    width: 83%;
+    height: 83%;
+    object-fit: contain;
+    filter: drop-shadow(0.7px 2.9px 3.7px rgba(0, 0, 0, 0.1));
+  }
+`,Nt=e.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 8px;
+`,Bt=e.div`
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.57;
+  color: ${r.text};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,Lt=e(J)`
+  font-size: 10px;
+  line-height: 1.43;
+  color: ${r.muted};
+`,Rt=e.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  & span {
+    font-size: 24px;
+    font-weight: 600;
+    color: ${r.text2};
+  }
+`,Pt=e(k)`
+  width: 24px;
+  height: 24px;
+  background: ${r.text2};
+`,Ft=e.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  background: rgba(255, 162, 90, 0.3);
+  border-radius: ${V.btn};
+  padding: 12px 8px;
+`,Kt=e.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.334;
+  color: ${r.text2};
+  text-align: center;
+
+  & b {
+    font-weight: 700;
+  }
+`,Dt=e.div`
+  display: flex;
+  gap: 12px;
+`,Qt=e.button`
+  flex: 1;
+  height: 109px;
+  border: 1px solid ${r.muted2};
+  background: ${r.media};
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: border-color 0.12s ease;
+
+  &[data-on] {
+    border: 4px solid ${r.magenta};
+  }
+`,Ht=e(k)`
+  width: 24px;
+  height: 24px;
+  background: ${r.text};
+`,Ut=e.span`
+  font-size: 24px;
+  font-weight: 500;
+  color: ${r.text};
+`,_t=e.span`
+  font-size: 14px;
+  color: ${r.text};
+`,Ot=e.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid ${r.gray4};
+  padding-top: 12px;
+`,Vt=e.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 24px;
+  font-weight: 700;
+  color: ${r.text};
+`,Gt=e(k)`
+  width: 30px;
+  height: 30px;
+  background: ${r.text};
+`,Xt=e.span`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${r.muted1};
+`,Yt=e.div`
+  display: flex;
+  gap: 12px;
+`,Zt=e.button`
+  flex: 1;
+  /* Let the CTAs shrink so their min-content can't widen the modal past the viewport on mobile. */
+  min-width: 0;
+  height: 46px;
+  border-radius: ${V.btn};
+  border: 0;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  &[data-full] {
+    width: 100%;
+  }
+  &[data-variant='gradient'] {
+    background: ${O.amethyst};
+    color: ${r.softWhite};
+  }
+  &[data-variant='outline'] {
+    background: transparent;
+    border: 2px solid ${r.accent};
+    color: ${r.accent};
+    font-size: 13px;
+  }
+  &[data-variant='ruby'] {
+    background: ${r.dclRed};
+    color: ${r.softWhite};
+    font-size: 13px;
+    letter-spacing: 0.61px;
+  }
+  // Solid accent fill (the error state's "Try again").
+  &[data-variant='purple'] {
+    background: ${r.accent};
+    color: ${r.softWhite};
+    font-size: 13px;
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`,Jt=e.img`
+  width: 61px;
+  height: 61px;
+`,qt=e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  background: rgba(255, 201, 213, 0.5);
+  border-radius: 16px;
+  padding: 24px 16px;
+`,en=e.img`
+  width: 64px;
+  height: 80px;
+  object-fit: contain;
+`,tn=e.p`
+  margin: 0;
+  text-align: center;
+  font-size: 20px;
+  line-height: 1.334;
+  font-weight: 400;
+  color: ${r.text2};
+
+  & b {
+    font-weight: 700;
+  }
+`,nn=e.div`
+  font-size: 20px;
+  font-weight: 700;
+  color: ${r.text2};
+  text-align: center;
+`,an=e.div`
+  width: 100%;
+  max-width: 456px;
+  height: 12px;
+  background: ${r.media};
+  border-radius: 100px;
+  overflow: hidden;
+`,on=e.span`
+  display: block;
+  height: 100%;
+  width: 40%;
+  border-radius: 100px;
+  background: ${O.amethyst};
+  animation: buy-modal-progress 1.1s ease-in-out infinite;
+
+  @keyframes buy-modal-progress {
+    0% {
+      transform: translateX(-120%);
+    }
+    100% {
+      transform: translateX(320%);
+    }
+  }
+
+  &[data-step] {
+    animation: none;
+    min-width: 12px;
+    transition: width 0.35s ease;
+  }
+`,sn=e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  background: rgba(193, 238, 207, 0.5);
+  border-radius: 16px;
+  padding: 24px 16px;
+
+  &[data-wide] {
+    flex-direction: row;
+    align-items: center;
+    gap: 24px;
+    padding: 16px 24px;
+  }
+  @media (max-width: 600px) {
+    &[data-wide] {
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px;
+    }
+  }
+`,rn=e.p`
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.334;
+  color: ${r.text2};
+  text-align: center;
+
+  & b {
+    font-weight: 700;
+  }
+
+  &[data-wide] {
+    text-align: left;
+    font-size: 18px;
+  }
+  @media (max-width: 600px) {
+    &[data-wide] {
+      text-align: center;
+    }
+  }
+`,{colors:I,media:A}=o,He=e.section`
+  margin-top: 40px;
+`,Ue=e.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+`,_e=e.h2`
+  font-size: 22px;
+  font-weight: 700;
+  color: ${I.text};
+`,Oe=e.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: ${I.accent};
+  font-weight: 700;
+  font-size: 13px;
+  letter-spacing: 0.046em;
+  text-transform: uppercase;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`,Ve=e(Q)`
+  transform: rotate(-90deg);
+`,Ge=e.div`
+  position: relative;
+`,D=e.button`
+  position: absolute;
+  top: 112px;
+  transform: translateY(-50%);
+  z-index: 5;
+  width: 53px;
+  height: 53px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
+  transition:
+    transform 0.15s ease,
+    filter 0.15s ease,
+    opacity 0.15s ease;
+
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  // Sit the arrows in the page gutter (aligned to the nav's 54px), not over the cards — at -40px their
+  // inner edge landed ~13px onto the first/last card.
+  &[data-side='left'] {
+    left: -53px;
+  }
+  &[data-side='right'] {
+    right: -53px;
+  }
+  &[data-side='left'] img {
+    transform: scaleX(-1);
+  }
+  &:hover:not(:disabled) {
+    transform: translateY(-50%) scale(1.07);
+  }
+  &:disabled {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+  ${A.maxWidth("lg")} {
+    display: none;
+  }
+`,Xe=e.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: calc((100% - 64px) / 5);
+  gap: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 12px 14px;
+  margin-left: -14px;
+  scroll-padding-inline: 14px;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  & > * {
+    scroll-snap-align: start;
+  }
+  ${A.maxWidth("xl")} {
+    grid-auto-columns: calc((100% - 48px) / 4);
+  }
+  ${A.maxWidth("lg")} {
+    grid-auto-columns: calc((100% - 32px) / 3);
+  }
+  ${A.maxWidth("sm")} {
+    grid-auto-columns: calc((100% - 16px) / 2);
+  }
+`,Ye=e.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 18px;
+`,Ze=e.button`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 0;
+  padding: 0;
+  background: ${I.lineStrong};
+  opacity: 0.5;
+  cursor: pointer;
+  transition:
+    opacity 0.12s ease,
+    background 0.12s ease,
+    transform 0.12s ease;
+
+  &:hover {
+    opacity: 0.8;
+  }
+  &[data-active] {
+    background: ${I.accent};
+    opacity: 1;
+    transform: scale(1.1);
+  }
+`;function cn({title:a,items:n,onViewAll:i}){const s=v.useRef(null),[d,c]=v.useState(1),[p,h]=v.useState(0),[y,m]=v.useState(!0),[f,w]=v.useState(!1),l=v.useCallback(()=>{const u=s.current;if(!u)return;const{scrollLeft:x,scrollWidth:R,clientWidth:S}=u,P=Math.max(1,Math.ceil(R/S));c(P),h(Math.min(P-1,Math.round(x/S))),m(x<=1),w(x+S>=R-1)},[]);if(v.useEffect(()=>{l();const u=s.current;if(u)return u.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l),()=>{u.removeEventListener("scroll",l),window.removeEventListener("resize",l)}},[l,n.length]),n.length===0)return null;function b(u){const x=s.current;x&&x.scrollBy({left:u*x.clientWidth,behavior:"smooth"})}function $(u){const x=s.current;x&&x.scrollTo({left:u*x.clientWidth,behavior:"smooth"})}return t.jsxs(He,{children:[t.jsxs(Ue,{children:[t.jsx(_e,{children:a}),i?t.jsxs(Oe,{onClick:i,children:[g("collectionCarousel.viewAll"),t.jsx(Ve,{name:"chevron-down",size:16})]}):null]}),t.jsxs(Ge,{children:[t.jsx(D,{"data-side":"left",onClick:()=>b(-1),"aria-label":g("collectionCarousel.scrollLeft"),disabled:y,children:t.jsx("img",{src:F,alt:"","aria-hidden":!0})}),t.jsx(Xe,{ref:s,children:n.map(u=>t.jsx(q,{item:u},u.id))}),t.jsx(D,{"data-side":"right",onClick:()=>b(1),"aria-label":g("collectionCarousel.scrollRight"),disabled:f,children:t.jsx("img",{src:F,alt:"","aria-hidden":!0})})]}),d>1?t.jsx(Ye,{"aria-label":g("collectionCarousel.pages"),children:Array.from({length:d}).map((u,x)=>t.jsx(Ze,{"data-active":x===p||void 0,"aria-label":g("collectionCarousel.goToPage",{page:x+1}),"aria-current":x===p?"true":void 0,onClick:()=>$(x)},x))}):null]})}export{z as $,Et as A,Mt as B,kt as C,Ut as D,_t as E,Ot as F,Vt as G,$t as H,Gt as I,Xt as J,dt as K,Jt as L,wt as M,ct as N,cn as O,ut as P,gt as Q,E as R,vt as S,Ct as T,rt as U,xt as V,Ft as W,zt as X,Ke as Y,lt as Z,fe as _,jt as a,sn as a0,rn as a1,ft as a2,pt as a3,mt as a4,bt as b,At as c,Wt as d,It as e,St as f,qt as g,en as h,tn as i,Yt as j,Zt as k,nn as l,ht as m,an as n,on as o,yt as p,Kt as q,Tt as r,Nt as s,Bt as t,Lt as u,Rt as v,Pt as w,Dt as x,Qt as y,Ht as z};