1import{M as je}from"./magnet-node-webcomponent-LRwfbqOh.js";import{r as l,c as g,b as n,F as We,d as Ve,e as qe,C as Xe}from"./client-BLZHgAOY.js";import{c as Ye,a as Ke,t as Ge}from"./tailwind-iQcDr92y.js";import{n as De,r as Je}from"./read-magnet-shell-data-DbaQcImU.js";import{f as c,i as Qe,c as Ze,q as et,r as me,o as tt,F as N,l as ot,k as nt,h as Ie,n as rt,M as it}from"./grim-icon-gray-image-Bi3STd6L.js";import{f as he}from"./cart-events-DvUecoHy.js";import{s as at,u as ct,v as dt,w as st,x as lt}from"./brandscope-DaTyj9sL.js";import{C as ge}from"./chunk-ZCF3P36E-yd1pWhXG.js";import{T as ut}from"./ThemeProvider-BCmPxRqm.js";import{r as pt}from"./declarative-shadow-root-CTYWWckP.js";import"./index-B2rxisVD.js";import"./schemas-DdR0qwqg.js";import"./index-DfGuOWRF.js";const ft="/shop_cart",Ae="/shop_view/",mt="var(--unit-style-button_sb_background_color, var(--unit-style-brand_color, #15181E))",ht="bottom",gt="0 2px 10px rgba(75, 81, 91, 0.1), 0 0 2px rgba(75, 81, 91, 0.2)",xt=5,xe=.8,bt=500,wt=new Set(["digital","subscribe"]),Ct="var(--unit-style-background_color, var(--cart-host-bg, #ffffff))",yt=(...e)=>e.find(i=>typeof i=="string"&&i.trim().length>0)?.trim()??"",vt=e=>{const o=(e.prod_type??e.prodType??"").trim().toLowerCase();return wt.has(o)};function _t({productThumbUrl:e,cartUrl:o=ft,productDetailBaseUrl:i=Ae,title:u,onClose:m}){const s=Qe(),p=Ze(),k=p.upsellProductCodes!==void 0,x=et(),[D,$]=l.useState(()=>window.IMWEB_SHOP_FREE_SHIP_NOTIFY_SDK?.getCachedFreeShipNotifyConfig?.()??null),v=me({config:D},s.context,k)?D:null,[_,T]=l.useState([]),[h,I]=l.useState(!1),[E,B]=l.useState({}),[S,Y]=l.useState({}),[K,G]=l.useState({}),b=l.useRef(null),U=l.useRef({}),O=l.useRef({}),F=l.useRef(!1),J=l.useRef(!1),A=l.useRef({isPointerDown:!1,pointerId:0,startX:0,scrollLeft:0,hasDragged:!1}),L=l.useRef(!1),[Q,$e]=l.useState(!1),[Z,ee]=l.useState(!1),z=tt(p.accentColor??v?.accentColor??s.accentColor??mt),Be=(p.recommendationEnabled??v?.recommendationEnabled??s.recommendationEnabled)!==!1,j=yt(u,p.guideMessage,v?.guideMessage,s.guideMessage),te=j.length>0,w=s.context==="cart"&&s.placement==="page",H=s.placement==="modal"?"cart":s.context,oe=kt(s.cartButtonType,v?.cartButtonType,p.cartButtonType),ne=Rt(s.context),y=Pt(p,v,ne),P=ne!==null,W=p.upsellProductCodes?JSON.stringify(p.upsellProductCodes):null,V=l.useMemo(()=>Object.keys(x).sort(),[x]),Ue=w?JSON.stringify(V):null;l.useEffect(()=>{const t=r=>{const a=r.detail??{};me(a,s.context,k)&&(a.config&&$(a.config),!(w&&F.current)&&(T(a.recommendations?.prod_list??[]),I(!0)))};return window.addEventListener(N.recommendationsUpdate,t),()=>{window.removeEventListener(N.recommendationsUpdate,t)}},[w,k,s.context]),l.useEffect(()=>{if(!(w&&F.current)){if(W!==null){const t=JSON.parse(W);if(t.length===0){T([]),I(!0);return}ot(t);return}nt(s.prodIdx??void 0,w?"cart":"prod",s.prodCode,w?V:void 0)}},[V,Ue,w,s.prodCode,s.prodIdx,W]),l.useEffect(()=>{const t=()=>{const d=b.current;d&&$e(d.scrollLeft+d.clientWidth<d.scrollWidth-1)},r=requestAnimationFrame(t),a=b.current;return a&&(a.addEventListener("scroll",t),window.addEventListener("resize",t)),()=>{cancelAnimationFrame(r),a&&a.removeEventListener("scroll",t),window.removeEventListener("resize",t)}},[_.length,h]),l.useEffect(()=>()=>{Object.values(O.current).forEach(clearTimeout),Object.values(U.current).forEach(clearTimeout)},[]);const M=l.useMemo(()=>_,[_]),q=!Be||h&&M.length===0;l.useEffect(()=>{J.current||q||!h||M.length===0||P&&(y.page_type==="shop_view"&&s.placement!=="modal"||(J.current=!0,at({page_type:y.page_type})))},[h,s.placement,y.page_type,q,P,M.length]);const Oe=()=>{window.location.href=o},Fe=()=>{y.page_type==="shop_view"&&s.placement==="modal"&&st({page_type:"shop_view"}),m?.(),window.dispatchEvent(new CustomEvent("imweb:productRecommendationModal:close")),window.parent?.postMessage({type:"imweb:productRecommendationModal:close"},"*")},re=t=>{window.location.href=It(i,t.prod_idx)},ze=t=>w?E[t.code]??x[t.code]?.count??0:E[t.code]??0,He=(t,r)=>{B(a=>({...a,[t.code]:Math.max(0,r)}))},ie=t=>{const r=t.code,a=U.current[r];a&&clearTimeout(a),G(d=>({...d,[r]:!0})),U.current[r]=setTimeout(()=>{G(d=>{const f={...d};return delete f[r],f}),vt(t)&&T(d=>d.filter(({code:f})=>f!==r)),delete U.current[r]},1e3)},ae=(t,r=0)=>{const a=t.code,d=O.current[a];if(d&&clearTimeout(d),r<=0){ie(t);return}O.current[a]=setTimeout(()=>{ie(t),delete O.current[a]},r)};l.useEffect(()=>{const t=r=>{if(H!=="cart")return;const a=r.detail,d=_.find(({prod_idx:f})=>f===a?.prodIdx);if(d?.has_required_options){if(P){const f=_.findIndex(({prod_idx:X})=>X===a?.prodIdx);f>=0&&Ce(d,f+1,y,a)}B(f=>({...f,[d.code]:(f[d.code]??x[d.code]?.count??0)+1})),ae(d,180),w&&(F.current=!0),he("invalidated",{cart_type:ve()})}};return window.addEventListener(N.additionalProductAdded,t),()=>{window.removeEventListener(N.additionalProductAdded,t)}},[H,x,_,y,P]);const ce=(t,r)=>{if(S[t.code])return;const a=ze(t)+1;P&&dt({prod_code:t.code,is_option:t.has_required_options,slot_index:r,item_price:t.price,...y}
1),Y(d=>({...d,[t.code]:!0})),rt(t.prod_idx,H,(d,f,X)=>{Y(Ne=>({...Ne,[t.code]:!1})),d&&(t.has_required_options||(P&&Ce(t,r,y,X),He(t,a),ae(t),H==="cart"&&(w&&(F.current=!0),he("invalidated",{cart_type:ve()}))))})};if(q)return null;const de=t=>{b.current?.scrollBy({left:t,behavior:"smooth"})},se=t=>{const r=b.current;if(!r)return;const a=r.scrollWidth-r.clientWidth;if(a<=0)return;const d=Math.abs(t.deltaX)>Math.abs(t.deltaY)?t.deltaX:t.deltaY,f=At(r.scrollLeft+d,0,a);f!==r.scrollLeft&&(t.preventDefault(),r.scrollLeft=f)},le=t=>{const r=b.current;_e(t.target)||!r||t.pointerType!=="mouse"||t.button!==0||r.scrollWidth<=r.clientWidth||(L.current=!1,A.current={isPointerDown:!0,pointerId:t.pointerId,startX:t.clientX,scrollLeft:r.scrollLeft,hasDragged:!1})},ue=t=>{const r=b.current,a=A.current;if(!r||!a.isPointerDown||a.pointerId!==t.pointerId)return;const d=t.clientX-a.startX;!a.hasDragged&&Math.abs(d)<xt||(t.preventDefault(),r.hasPointerCapture(t.pointerId)||r.setPointerCapture(t.pointerId),a.hasDragged=!0,L.current=!0,ee(!0),r.scrollLeft=a.scrollLeft-d)},R=t=>{const r=b.current,a=A.current;if(!a.isPointerDown||a.pointerId!==t.pointerId)return;const d=a.hasDragged;if(r?.hasPointerCapture(t.pointerId)&&r.releasePointerCapture(t.pointerId),A.current={isPointerDown:!1,pointerId:0,startX:0,scrollLeft:0,hasDragged:!1},ee(!1),d){window.setTimeout(()=>{L.current=!1},0);return}L.current=!1},pe=t=>{const r=A.current;!r.isPointerDown||r.hasDragged||R(t)},fe=t=>{_e(t.target)||L.current&&(t.preventDefault(),t.stopPropagation(),L.current=!1)};return w?g(Vt,{children:[n(Pe,{$edge:"top"}),g(qt,{children:[te&&n(ke,{children:j}),g(Xt,{children:[n(Re,{type:"button","aria-label":"ì´ì ì¶ì² ìí",onClick:()=>de(-220),children:n(Te,{$direction:"left"})}),n(Re,{type:"button","aria-label":"ë¤ì ì¶ì² ìí",onClick:()=>de(220),children:n(Te,{$direction:"right"})})]})]}),g(Ee,{children:[n(Se,{ref:b,$isDragging:Z,onWheel:se,onPointerDown:le,onPointerMove:ue,onPointerUp:R,onPointerLeave:pe,onPointerCancel:R,onLostPointerCapture:R,onClickCapture:fe,children:h?M.map((t,r)=>n(be,{product:t,variant:"inline",isAddedFeedback:K[t.code]??!1,isLoading:S[t.code]??!1,cartButtonType:oe,accentColor:z,scrollRoot:b,viewTracking:P?we(t,r+1,y):void 0,onProductClick:()=>re(t),onAddClick:()=>ce(t,r+1)},t.prod_idx)):n(Le,{children:n(ge,{size:"medium"})})}),Q&&n(no,{})]}),n(Pe,{$edge:"bottom"})]}):g(Mt,{children:[n($t,{children:n(Bt,{})}),g(Ut,{children:[g(Ot,{children:[n(Ft,{children:n("img",{src:e||Ie,alt:"",draggable:!1})}),n(zt,{children:"ì¥ë°êµ¬ëì ìíì ë´ìì´ì."})]}),g(Ht,{type:"button",$accentColor:z,onClick:Oe,children:[n("span",{children:"ì¥ë°êµ¬ë ê°ê¸°"}),n(Nt,{"aria-hidden":!0})]})]}),n(jt,{}),g(Wt,{children:[te&&n(ke,{children:j}),g(Ee,{children:[n(Se,{ref:b,$isDragging:Z,onWheel:se,onPointerDown:le,onPointerMove:ue,onPointerUp:R,onPointerLeave:pe,onPointerCancel:R,onLostPointerCapture:R,onClickCapture:fe,children:h?M.map((t,r)=>n(be,{product:t,variant:"modal",isAddedFeedback:K[t.code]??!1,isLoading:S[t.code]??!1,cartButtonType:oe,accentColor:z,scrollRoot:b,viewTracking:P?we(t,r+1,y):void 0,onProductClick:()=>re(t),onAddClick:()=>ce(t,r+1)},t.prod_idx)):n(Le,{children:n(ge,{size:"medium"})})}),Q&&n(Me,{})]}),n(ro,{children:n(io,{type:"button",$accentColor:z,onClick:Fe,children:"ê³ì ì¼í"})})]})]})}function be({product:e,variant:o,isAddedFeedback:i,isLoading:u,cartButtonType:m,accentColor:s,scrollRoot:p,viewTracking:k,onProductClick:x,onAddClick:D}){const $=l.useRef(null),v=l.useRef(k);return v.current=k,l.useEffect(()=>{const _=$.current,T=p.current;if(!_||!T||typeof IntersectionObserver>"u")return;let h=null,I=!1;const E=new IntersectionObserver(B=>{const S=B[0];!S||I||(S.intersectionRatio>=xe?h===null&&(h=window.setTimeout(()=>{I=!0,v.current&&ct(v.current),E.disconnect(),h=null},bt)):h!==null&&(window.clearTimeout(h),h=null))},{root:T,threshold:[xe]});return E.observe(_),()=>{E.disconnect(),h!==null&&window.clearTimeout(h)}},[p]),g(Yt,{ref:$,$variant:o,children:[g(Kt,{$variant:o,children:[n(Gt,{$variant:o,type:"button",onClick:x,"aria-label":`${e.name} ìì¸ ë³´ê¸°`,children:n("img",{src:e.thumb_url||Ie,alt:e.name,draggable:!1})}
1),m==="image"&&n(Jt,{type:"button","data-product-recommendation-add-button":"true",$variant:o,$isLoading:u,$accentColor:s,"aria-disabled":u,"aria-label":`${e.name} ë´ê¸°`,onClick:()=>{u||D()},children:i?n(ye,{accentColor:s}):n(Lt,{})})]}),m==="bottom"&&n(Qt,{type:"button","data-product-recommendation-add-button":"true",onClick:D,disabled:u,"aria-label":`${e.name} ë´ê¸°`,children:i?n(ye,{accentColor:s}):g(We,{children:[n(Dt,{}),n("span",{children:"ë´ê¸°"})]})}),g(eo,{type:"button",onClick:x,children:[n(to,{children:e.name}),n(oo,{children:e.price_text})]})]})}function kt(...e){for(const o of e){const i=De(o);if(i)return i}return ht}function Pt(e,o,i){const u=Tt(o?.isManual??e.isManual),m=Et(o?.sortType??e.sortType??(u===!0?"custom":"ai_recommend"));return{page_type:i??"shop_view",sort_type:m,ranking_algorithm:m==="custom"?"":"popularity_stats"}}function Rt(e){return e==="cart"?"shop_cart":e==="prod"?"shop_view":null}function Tt(e){if(typeof e=="boolean")return e;if(typeof e!="string")return null;const o=e.trim().toUpperCase();return o==="Y"?!0:o==="N"?!1:null}function Et(e){return e==="custom"?"custom":"ai_recommend"}function we(e,o,i){return{slot_index:o,prod_code:e.code,...i}}function Ce(e,o,i,u){lt({prod_code:e.code,is_option:e.has_required_options,slot_index:o,item_price:e.price,cart_code:St(u),...i})}function St(e){if(!e||typeof e!="object")return"";const o=e,i=o.cartCode??o.cart_code;return typeof i=="string"?i:""}function ye({accentColor:e}){return n(Zt,{viewBox:"0 0 24 24",fill:"none","aria-hidden":!0,$accentColor:e,children:n("path",{d:"M5.5 12.5L10 17L18.5 7.5"})})}function Lt(){return n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":!0,children:n("path",{d:"M8.00065 3.33301V12.6663M3.33398 7.99967H12.6673",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.2"})})}function Dt(){return n("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":!0,children:n("path",{d:"M10.6669 6V4C10.6669 2.52724 9.47301 1.33333 8.00025 1.33333C6.52749 1.33333 5.33358 2.52724 5.33358 4V6M2.39491 6.90131L1.99492 11.168C1.88118 12.3811 1.82432 12.9877 2.02561 13.4562C2.20244 13.8678 2.51233 14.208 2.90559 14.4225C3.35326 14.6667 3.96249 14.6667 5.18094 14.6667H10.8195C12.038 14.6667 12.6472 14.6667 13.0949 14.4225C13.4882 14.208 13.798 13.8678 13.9749 13.4562C14.1762 12.9877 14.1193 12.3811 14.0056 11.168L13.6056 6.90131C13.5095 5.8769 13.4615 5.36469 13.2311 4.97744C13.0282 4.63639 12.7285 4.36341 12.37 4.19323C11.9629 4 11.4485 4 10.4195 4L5.58094 4C4.55204 4 4.03759 4 3.63053 4.19323C3.27202 4.36341 2.97225 4.63639 2.76935 4.97744C2.53897 5.36469 2.49095 5.8769 2.39491 6.90131Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.2"})})}function It(e,o){try{const i=new URL(e,window.location.origin);return i.searchParams.set("idx",String(o)),`${i.pathname}${i.search}${i.hash}`}catch{return`${Ae}?idx=${o}`}}function ve(){return new URLSearchParams(window.location.search).get("type")==="regularly"?"regularly":"normal"}function _e(e){return e instanceof HTMLElement&&e.closest('[data-product-recommendation-add-button="true"]')!==null}function At(e,o,i){return Math.min(Math.max(e,o),i)}const Mt=c.div` 2 --unit-style-font_family: var(--typeface-base, "imweb Sans"); 3 4 width: min(440px, calc(100vw - 32px)); 5 box-sizing: border-box; 6 display: flex; 7 flex-direction: column; 8 align-items: flex-start; 9 gap: 16px; 10 padding: 24px 0; 11 border-radius: 16px; 12 background: #ffffff; 13 box-shadow: 14 0 0 0.5px rgba(75, 81, 91, 0.2), 15 0 25px 40px rgba(75, 81, 91, 0.2); 16 color: #15181e; 17 font-family: var(--typeface-base, "imweb Sans"); 18 19 @media (max-width: 767px) { 20 width: 100vw; 21 max-width: 100vw; 22 padding: 0 0 24px; 23 border-radius: 16px 16px 0 0; 24 } 25`,$t=c.div` 26 display: none; 27 28 @media (max-width: 767px) { 29 display: flex; 30 width: 100%; 31 height: 32px; 32 box-sizing: border-box; 33 flex-direction: column; 34 align-items: center; 35 justify-content: center; 36 gap: 10px; 37 padding: 10px 10px 18px; 38 margin-bottom: -16px; 39 border-radius: 12px 12px 0 0; 40 background: #ffffff; 41 } 42`,Bt=c.div` 43 width: 48px; 44 height: 4px; 45 flex: 0 0 auto; 46 border-radius: 2px; 47 background: #15181e; 48 opacity: 0.1; 49`,Ut=c.div` 50 width: 100%; 51 box-sizing: border-box; 52 display: flex; 53 align-items: center; 54 justify-content: space-between; 55 padding: 0 24px; 56 57 @media (max-width: 767px) { 58 padding: 0 16px; 59 } 60`,Ot=c.div` 61 display: flex; 62 align-items: center; 63 gap: 8px; 64 min-width: 0; 65`,Ft=c.div` 66 width: 32px; 67 height: 32px; 68 flex: 0 0 auto; 69 overflow: hidden; 70 border: 0.5px solid #e2e5e9; 71 border-radius: 6px; 72 background: #f1f3f5; 73 74 img { 75 display: block; 76 width: 100%; 77 height: 100%; 78 object-fit: cover; 79 } 80`,zt=c.p` 81 margin: 0; 82 font-size: 14px; 83 font-weight: 400; 84 line-height: 24px; 85 color: #15181e; 86 white-space: nowrap; 87`,Ht=c.button` 88 display: flex; 89 align-items: center; 90 gap: 2px; 91 padding: 1px 6px; 92 border: 0; 93 border-radius: 3px; 94 background: transparent; 95 color: ${({$accentColor:e})=>e}; 96 font-size: 14px; 97 font-weight: 600; 98 line-height: 24px; 99 white-space: nowrap; 100 cursor: pointer; 101`,Nt=c.span` 102 width: 16px; 103 height: 16px; 104 position: relative; 105 flex: 0 0 auto; 106 107 &::before { 108 content: ''; 109 position: absolute; 110 left: 5px; 111 top: 3px; 112 width: 7px; 113 height: 7px; 114 border-top: 1.6px solid currentColor; 115 border-right: 1.6px solid currentColor; 116 transform: rotate(45deg); 117 } 118`,jt=c.div` 119 width: 100%; 120 height: 1px; 121 flex: 0 0 auto; 122 background: #e2e5e9; 123`,Wt=c.div` 124 width: 100%; 125 box-sizing: border-box; 126 display: flex; 127 flex-direction: column; 128 align-items: flex-start; 129 gap: 16px; 130 padding: 0 24px; 131 132 @media (max-width: 767px) { 133 gap: 16px; 134 padding: 0 16px; 135 } 136`,ke=c.h2` 137 margin: 0; 138 color: #15181e; 139 font-size: 18px; 140 font-weight: 700; 141 line-height: 28px; 142 word-break: keep-all; 143`,Vt=c.section` 144 --unit-style-font_family: var(--typeface-base, "imweb Sans"); 145 146 width: 100%; 147 box-sizing: border-box; 148 display: flex; 149 flex-direction: column; 150 gap: 16px; 151 padding: 0 0 48px; 152 color: #15181e; 153 font-family: var(--typeface-base, "imweb Sans"); 154 155 @media (max-width: 767px) { 156 gap: 18px; 157 padding: 12px 16px 20px 16px; 158 } 159`,Pe=c.div` 160 display: none; 161 162 @media (max-width: 767px) { 163 display: block; 164 width: calc(100% + 32px); 165 height: 12px; 166 flex: 0 0 auto; 167 margin: ${({$edge:e})=>e==="top"?"-12px 0 0 -16px":"0 0 -20px -16px"}; 168 background: #f1f3f5; 169 } 170`,qt=c.div` 171 display: flex; 172 align-items: center; 173 justify-content: space-between; 174 gap: 16px; 175`,Xt=c.div` 176 display: flex; 177 align-items: center; 178 gap: 4px; 179 margin-left: auto; 180 181 @media (max-width: 767px) { 182 display: none; 183 } 184`,Re=c.button` 185 width: 28px; 186 height: 28px; 187 display: inline-flex; 188 align-items: center; 189 justify-content: center; 190 padding: 0; 191 border: 1px solid #dbdee3; 192 border-radius: 6px; 193 background: #ffffff; 194 color: #4b515b; 195 cursor: pointer; 196`,Te=c.span` 197 width: 14px; 198 height: 14px; 199 position: relative; 200 201 &::before { 202 content: ''; 203 position: absolute; 204 left: 50%; 205 top: 50%; 206 width: 6px; 207 height: 6px; 208 border-top: 1.4px solid currentColor; 209 border-right: 1.4px solid currentColor; 210 transform: ${({$direction:e})=>e==="left"?"translate(-50%, -50%) rotate(225deg)":"translate(-50%, -50%) rotate(45deg)"}; 211 } 212`,Ee=c.div` 213 position: relative; 214 width: 100%; 215 overflow: hidden; 216`,Se=c.div` 217 width: 100%; 218 box-sizing: border-box; 219 display: flex; 220 align-items: flex-start; 221 gap: 12px; 222 overflow-x: auto; 223 overflow-y: hidden; 224 scrollbar-width: none; 225 cursor: ${({$isDragging:e})=>e?"grabbing":"grab"}; 226 user-select: none; 227 228 &::-webkit-scrollbar {
229 display: none; 230 } 231 232 ${({$isDragging:e})=>e&&` 233 * { 234 cursor: grabbing !important; 235 } 236 `} 237`,Yt=c.div` 238 width: ${({$variant:e})=>e==="inline"?"184px":"120px"}; 239 min-width: ${({$variant:e})=>e==="inline"?"184px":"120px"}; 240 max-width: ${({$variant:e})=>e==="inline"?"184px":"120px"}; 241 display: flex; 242 flex-direction: column; 243 align-items: flex-start; 244 gap: 8px; 245 246 @media (max-width: 767px) { 247 ${({$variant:e})=>e==="inline"&&` 248 width: 96px; 249 min-width: 96px; 250 max-width: 96px; 251 `} 252 } 253`,Kt=c.div` 254 position: relative; 255 width: ${({$variant:e})=>e==="inline"?"184px":"120px"}; 256 height: ${({$variant:e})=>e==="inline"?"184px":"120px"}; 257 258 @media (max-width: 767px) { 259 ${({$variant:e})=>e==="inline"&&` 260 width: 96px; 261 height: 96px; 262 `} 263 } 264`,Gt=c.button` 265 width: 100%; 266 height: 100%; 267 padding: 0; 268 overflow: hidden; 269 border: 0.5px solid #dbdee3; 270 border-radius: 6px; 271 background: #f7f8fa; 272 cursor: pointer; 273 274 img { 275 display: block; 276 width: 100%; 277 height: 100%; 278 object-fit: cover; 279 } 280`,Jt=c.button` 281 position: absolute; 282 right: 8px; 283 bottom: 8px; 284 width: ${({$variant:e})=>e==="inline"?"40px":"32px"}; 285 height: ${({$variant:e})=>e==="inline"?"40px":"32px"}; 286 display: flex; 287 align-items: center; 288 justify-content: center; 289 padding: 0; 290 border: 1px solid ${({$accentColor:e})=>e}; 291 border-radius: 50%; 292 background: #ffffff; 293 color: ${({$accentColor:e})=>e}; 294 box-shadow: ${gt}; 295 cursor: ${({$isLoading:e})=>e?"wait":"pointer"}; 296`,Qt=c.button` 297 width: 100%; 298 height: 32px; 299 display: flex; 300 align-items: center; 301 justify-content: center; 302 gap: 4px; 303 border: 1px solid #dbdee3; 304 border-radius: 6px; 305 background: #ffffff; 306 color: #4b515b; 307 font-size: 14px; 308 font-weight: 600; 309 line-height: 20px; 310 cursor: pointer; 311 312 &:disabled { 313 cursor: wait; 314 opacity: 0.6; 315 } 316`,Zt=c.svg` 317 width: 20px; 318 height: 20px; 319 color: ${({$accentColor:e})=>e}; 320 animation: recommendation-added-pop 180ms ease-out; 321 322 path { 323 stroke: currentColor; 324 stroke-width: 2; 325 stroke-linecap: round; 326 stroke-linejoin: round; 327 stroke-dasharray: 22; 328 stroke-dashoffset: 22; 329 animation: recommendation-check-draw 360ms ease-out forwards; 330 } 331 332 @keyframes recommendation-added-pop { 333 from { 334 opacity: 0; 335 transform: scale(0.72); 336 } 337 338 to { 339 opacity: 1; 340 transform: scale(1); 341 } 342 } 343 344 @keyframes recommendation-check-draw { 345 to { 346 stroke-dashoffset: 0; 347 } 348 } 349`,eo=c.button` 350 width: 100%; 351 display: flex; 352 flex-direction: column; 353 align-items: flex-start; 354 gap: 4px; 355 padding: 0; 356 border: 0; 357 background: transparent; 358 color: inherit; 359 text-align: left; 360 cursor: pointer; 361`,to=c.span` 362 min-height: 40px; 363 overflow: hidden; 364 display: -webkit-box; 365 color: #15181e; 366 font-size: 14px; 367 font-weight: 400; 368 line-height: 20px; 369 word-break: break-word; 370 -webkit-box-orient: vertical; 371 -webkit-line-clamp: 2; 372`,oo=c.span` 373 color: var(--Color-text, #15181E); 374 font-family: var(--typeface-base, "imweb Sans"); 375 font-size: var(--scale-text-small, 14px); 376 font-style: normal; 377 font-weight: var(--weight-font-semibold, 600); 378 line-height: var(--leading-6, 24px); 379 white-space: nowrap; 380`,Me=c.div` 381 position: absolute; 382 top: 0; 383 right: 0; 384 width: 40px; 385 height: 100%; 386 pointer-events: none; 387 background: linear-gradient( 388 270deg, 389 #ffffff 0%, 390 rgba(255, 255, 255, 0.95) 25%, 391 rgba(255, 255, 255, 0.85) 41.02%, 392 rgba(255, 255, 255, 0.78) 50.13%, 393 rgba(255, 255, 255, 0.65) 61.75%, 394 rgba(255, 255, 255, 0.45) 73.87%, 395 rgba(255, 255, 255, 0.25) 86.25%, 396 rgba(255, 255, 255, 0) 100% 397 ); 398`,no=c(Me)` 399 background: linear-gradient(270deg, ${Ct} 0%, transparent 100%); 400`,Le=c.div` 401 width: 100%; 402 min-height: 204px; 403 display: flex; 404 align-items: center; 405 justify-content: center; 406`,ro=c.div` 407 display: contents; 408 409 @media (max-width: 767px) { 410 box-sizing: border-box; 411 width: calc(100% + 32px); 412 display: flex; 413 align-items: flex-start; 414 align-self: stretch; 415 gap: 8px; 416 margin: 0 -16px; 417 padding: 12px 16px; 418 } 419`,io=c.button` 420 width: 100%; 421 height: 44px; 422 display: flex; 423 align-items: center; 424 justify-content: center; 425 padding: 12px 16px; 426 border: 0; 427 border-radius: 8px; 428 background: ${({$accentColor:e})=>e}; 429 color: var(--text-inverse, #ffffff); 430 text-align: center; 431 font-family: var(--typeface-base, "imweb Sans"); 432 font-size: var(--scale-text-base, 16px); 433 font-style: normal; 434 font-weight: var(--weight-font-semibold, 600); 435 line-height: var(--leading-6, 24px); 436 cursor: pointer; 437 margin-top: 8px; 438 439 @media (max-width: 767px) { 440 margin-top: 0; 441 } 442`,ao="/shop_cart",co="/shop_view/";class so extends je{reactRoot;async connectedCallback(){await super.connectedCallback();const o=pt(this),i=o.querySelector("[data-root]");if(!i)throw new Error("data-rootì´ ììµëë¤.");const u=Ve.createRoot(i);this.reactRoot=u;const m=this.closest("magnet-shell"),s=m?.id,p=s?s.replace(/([A-Z])/g,"-$1").toLowerCase().replace(/^-/,""):`fo-shopping-product-recommendation-${lo++}`,k=qe({key:p,container:o,prepend:!0}),x=uo(this,m);u.render(n(l.StrictMode,{children:g(Xe,{value:k,children:[n("style",{type:"text/css",children:Ye}),n("style",{type:"text/css",children:Ke}),n("style",{type:"text/css",children:Ge}),n(ut,{children:n(it,{value:x.magnetShellData,children:n(_t,{productThumbUrl:x.productThumbUrl,cartUrl:x.cartUrl,productDetailBaseUrl:x.productDetailBaseUrl,title:x.title,onClose:()=>po(this)})})})]})}))}async disconnectedCallback(){await super.disconnectedCallback(),this.reactRoot?.unmount()}}let lo=0;function uo(e,o){const i=Je(o),u=C(e,o,"data-type")??C(e,o,"data-context");(u==="cart"||u==="prod")&&(i.context=u);const m=C(e,o,"data-placement");(m==="page"||m==="modal")&&(i.placement=m);const s=C(e,o,"data-title")??C(e,o,"data-guide-message");s&&(i.guideMessage=s);const p=De(C(e,o,"data-cart-button-type"));return p&&(i.cartButtonType=p),{magnetShellData:i,productThumbUrl:C(e,o,"data-product-thumb-url")??C(e,o,"data-product-thumbnail-url")??C(e,o,"data-thumbnail-url")??null,cartUrl:C(e,o,"data-cart-url")??ao,productDetailBaseUrl:C(e,o,"data-product-detail-base-url")??co,title:s??null}}function C(e,o,i){return e.getAttribute(i)??o?.getAttribute(i)??null}function po(e){const o=()=>{window.dispatchEvent(new CustomEvent("imweb:productRecommendationModal:requestClose")),(e.closest("magnet-shell")?.parentElement??e.parentElement)?.querySelector('[data-dismiss="modal"], [data-bs-dismiss="modal"], .modal
442-close, .btn_close, .close, button[aria-label="ë«ê¸°"]')?.click()},i=window.IMWEB_SHOP_FREE_SHIP_NOTIFY_SDK;if(i?.trackCloseAndContinue){i.trackCloseAndContinue(o);return}o()}fo("fo-shopping-product-recommendation",so);function fo(e,o){customElements.get(e)||customElements.define(e,o)}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.