https://www.marksandspencer.hk/_next/static/chunks/1402.6959526d6770bc6b.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1402,3004,324,2592],{57444:function(e,r,t){"use strict";t.d(r,{Z:function(){return p}});var s=t(85893),n=t(46066),i=t(67294),l=t(92587),a=t.n(l),o=t(63177),c=t.n(o);let d=(0,i.forwardRef)(({sliderRef:e,isFullWidth:r,isLightScrollbar:t=!1,hideScrollbarOnNoSlide:n=!0,customScrollBarClassName:l,scrollbarMarginTop:a=12},o)=>{let d=(0,i.useRef)(null),u=(0,i.useRef)(null),[m,p]=(0,i.useState)(0),[h,f]=(0,i.useState)(0),[v,x]=(0,i.useState)(!1),_=(0,i.useRef)(0),g=(0,i.useRef)(0),w=(0,i.useRef)(null),b=()=>{if(!e.current)return;let r=e.current.innerSlider,t=r.list.querySelector(".slick-track"),s=r.list.clientWidth;if(!t||!s)return;let n=Math.abs(new DOMMatrix(window.getComputedStyle(t).transform||"matrix(1,0,0,1,0,0)").m41),i=t.querySelectorAll(".slick-slide.slick-cloned"),l=t.scrollWidth-s;if(i.length){n=Math.max(0,n-Array.from(i).filter(e=>0>parseInt(e.getAttribute("data-index"))).reduce((e,r)=>e+r.offsetWidth,0));let e=Array.from(i).reduce((e,r)=>e+r.offsetWidth,0);l=t.scrollWidth-e-s}let a=l>0?n/l:0;f((a=Math.min(a,1))*(g.current-m))};(0,i.useImperativeHandle)(o,()=>({updateThumbPosition:b,updateScrollbar:S}));let S=()=>

1{if(!e.current||!d.current||!u.current)return;let r=e.current,t=r.innerSlider.props.children.length,s=r.innerSlider.props.slidesToShow,n=d.current;g.current=n.offsetWidth,p(s/t*g.current)};(0,i.useEffect)(()=>(S(),window.addEventListener("resize",S),()=>window.removeEventListener("resize",S)),[e,d.current,u.current,r,t,n]),(0,i.useEffect)(()=>{if(!e.current)return;let r=e.current.innerSlider.list.querySelector(".slick-track");if(!r)return;let t=()=>{if(null!==w.current)return;let e=()=>{b(),w.current=requestAnimationFrame(e)};w.current=requestAnimationFrame(e)},s=()=>{null!==w.current&&(cancelAnimationFrame(w.current),w.current=null)},n=()=>{b(),w.current||t()};return r.addEventListener("transitionrun",t),r.addEventListener("transitionend",s),r.addEventListener("transitioncancel",s),r.addEventListener("touchmove",n),r.addEventListener("mousemove",n),()=>{r.removeEventListener("transitionrun",t),r.removeEventListener("transitionend",s),r.removeEventListener("transitioncancel",s),r.removeEventListener("touchmove",n),r.removeEventListener("mousemove",n),s()}},[e,m]);let j=r=>{if(!v||!e.current)return;let t=r.clientX-_.current,s=Math.max(0,Math.min(g.current-m,h+t));f(s),_.current=r.clientX;let n=s/(g.current-m),i=e.current,l=n;"rtl"===window&&(l=1-n);let a=Math.round(l*(i.innerSlider.props.children.length-i.innerSlider.props.slidesToShow));i.slickGoTo(a,!0)},y=()=>{x(!1)};(0,i.useEffect)(()=>(document.addEventListener("mousemove",j),document.addEventListener("mouseup",y),()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",y)}),[v,h]);let C=(e?.current?.innerSlider?.props?.children?.length||0)<=(e?.current?.innerSlider?.props?.slidesToShow||0);return C&&!n?null:(0,s.jsx)("div",{style:{marginTop:`${a}px`},className:`${c().scrollWrapper} scrollbar-wrapper ${C?"noscroll-scrollbar":""} ${l||""}`,children:(0,s.jsx)("div",{className:c().scrollContainer,style:{"--scrollbar-size":r?"100%":"60%","--scrollbar-height":t?"1px":"2px"},children:(0,s.jsx)("div",{ref:d,className:c().scrollTrack,children:(0,s.jsx)("div",{ref:u,className:c().scrollThumb,style:{width:m,transform:`translateX(${h}px)`},onMouseDown:e=>{x(!0),_.current=e.clientX,e.preventDefault()}})})})})});d.displayName="CustomScrollbar";var u=t(46857),m=t(28073),p=({config:e,children:r})=>{let{showDots:t=!1,showArrows:l=!0,deskTopSlidesToShow:o=1,dotsClass:c="",isInfinite:p=!1,mobileSlidesToShow:h=1,initialSlide:f=0,centerMode:v=!1,showScrollbar:x=!0,customClass:_="",isFullWidthScrollbar:g=!1,gapMobile:w=8,gapDesktop:b=12,slidesToScroll:S=1,isSmallArrow:j=!1,variableWidth:y=!1,isLightScrollbar:C=!1,hideScrollbarOnNoSlide:N=!0,customScrollBarClassName:k="",scrollbarMarginTop:E=12,autoplay:$=!1,autoplaySpeed:L=0}=e,T=(0,m.Z)(),W=(0,i.useRef)(null),M=(0,i.useMemo)(()=>`my-carousel-${Math.random().toString(36).substr(2,9)}`,[]),A=(0,i.useMemo)(()=>{let e=e=>{let{className:r,style:t,onClick:n}=e;return(0,s.jsx)("div",{className:`${r} ${j?"small-arrow":""}`,style:{...t,display:"block"},onClick:e=>{if(r.includes("slick-disabled")){e.preventDefault();return}e.target.classList.add("slick-nav"),n(e)},children:(0,s.jsx)(u.Z,{name:"navArrowSVG"})})};return e.displayName="NavArrowSVGNext",e},[j]),z=(0,i.useMemo)(()=>{let e=e=>{let{className:r,style:t,onClick:n}=e;return(0,s.jsx)("div",{className:`${r} ${j?"small-arrow":""}`,style:{...t,display:"block"},onClick:e=>{if(r.includes("slick-disabled")){e.preventDefault();return}e.target.classList.add("slick-nav"),n(e)},children:(0,s.jsx)(u.Z,{name:"navArrowSVG"})})};return e.displayName="NavArrowSVGPrev",e},[j]),I=(0,i.useRef)(null),R=i.Children.count(r),Z={dots:t,infinite:p,speed:500,ease:"linear",autoplay:$,autoplaySpeed:L,centerMode:v,slidesToShow:T?h:o,initialSlide:f,centerPadding:v?"60px":"0px",arrows:l,nextArrow:(0,s.jsx)(A,{}),prevArrow:(0,s.jsx)(z,{}),customPaging:()=>(0,s.jsx)("div",{className:a().customDots}),dotsClass:`slick-dots ${c||a().dotsContainer}`,swipeToSlide:!0,draggable:!0,slidesToScroll:p?S:Math.min(Math.floor(S),R-1),responsive:[{breakpoint:1024,settings:{slidesToShow:o,slidesToScroll:S}},{breakpoint:768,settings:{slidesToShow:o,slidesToScroll:S}},{breakpoint:640,settings:{slidesToShow:h,slidesToScroll:S}},{breakpoint:480,settings:{slidesToShow:h,slidesToScroll:S}},{breakpoint:320,settings:{slidesToShow:h,slidesToScroll:S}}],variableWidth:y,afterChange:()=>{W.current?.updateThumbPosition?.()},onReInit:()=>W.current?.updateThumbPosition()},D=(0,i.useRef)(!1);return(0,i.useEffect)(()=>{I?.current&&!D.current&&r&&r.length>0&&setTimeout(()=>{I.current?.slickGoTo(f,!0),I.current?.slickSetPosition?.(),D.current=!0},50)},[f,r]),(0,s.jsxs)("div",{className:`${a().sliderContainer} ${_} ${M}`,style:{"--gap-mobile":`${w}px`,"--gap-desktop":`${b}px`},children:[(0,s.jsx)(n.Z,{ref:I,...Z,children:r}),x&&(0,s.jsx)(d,{sliderRef:I,isFullWidth:g,isLightScrollbar:C,hideScrollbarOnNoSlide:N,ref:W,customScrollBarClassName:k,scrollbarMarginTop:E})]})}},72347:function(e,r,t){"use strict";t.r(r);var s=t(85893),n=t(48715),i=t.n(n),l=t(28073),a=t(41664),o=t.n(a),c=t(51035),d=t(23004),u=t(77519),m=t(78426),p=t(24250),h=t(57444);let f=(e,r,t,n,i,l)=>(0,s.jsxs)("div",{className:l.HeaderContent,children:[(0,s.jsx)("p",{className:i?"heading-md-bold":"heading-xl-bold",children:e}),r&&(0,s.jsx)("p",{className:i?"heading-sm-default":"body-md-default",children:r}),t&&(0,s.jsx)(o(),{href:n,className:i?"body-lg-bold-underlined":"subtitle-bold-underlined",children:t})]}),v=(e,r,t,n)=>e?.map((e,i)=>s.jsx("div",{children:s.jsx("div",{className:t.fashioncarouselItem,children:s.jsx("div",{className:t.fashioncarouselItemWrapper,children:s.jsxs(u.Z,{href:e.element?.cta_web?.data?.linkElement?.destination?.value,children:[s.jsx(d.default,{src:c.ss(e.element?.banner_image_web?.data?.image.renditionList,r),alt:"Carousel item",style:{cursor:"pointer"},width:n?190:250,height:n?240:318}),s.jsx("p",{className:`${t.cardContent} ${n?"body-md-bold":"subtitle-bold"} truncated-text-line-1`,children:e.title})]})})})},i));r.default=({isFood:e,content:r,isLoading:t,priority:n=!1})=>{let a=(0,p.Z)(),o=(0,l.Z)(),{element:{Heading:{data:{value:x}={}}={},subheading:{data:{value:_}={}}={},cta_web:{data:{destination:{value:g}={},display:{value:w}={}}}={}}}=r[0]||{};return t||!r?(0,s.jsxs)("div",{className:"container-fluid p-0 d-flex justify-content-start",children:[!

1o&&(0,s.jsx)("div",{className:"shimmer-wave",style:{minHeight:"600px",width:"50%"}}),(0,s.jsxs)("div",{className:`d-flex justify-content-start gap-2 flex-column ${o?"shimmer-wave":""}`,style:{width:o?"100%":"50%",marginLeft:o?"0px":"-100px",marginTop:o?"0px":"10%"},children:[(0,s.jsxs)("div",{className:`${o?"d-flex align-items-center flex-column":""}`,style:{marginLeft:o?"0px":"130px"},children:[(0,s.jsx)("div",{className:"shimmer-wave",style:{minHeight:"20px",width:"80%"}}),(0,s.jsx)("div",{className:"shimmer-wave mt-1",style:{minHeight:"15px",width:"50%"}})]}),(0,s.jsx)("div",{className:"d-flex justify-content-around align-items-center flex-row gap-1",children:[,,,,].fill().map((e,r)=>(0,s.jsxs)("div",{className:"d-flex flex-column align-items-center",style:{width:"100%"},children:[(0,s.jsx)("div",{className:"shimmer-wave",style:{minHeight:"200px",width:"100%"}}),(0,s.jsx)("div",{className:"shimmer-wave mt-1",style:{minHeight:"15px",width:"100%"}})]},r))})]})]}):(0,s.jsxs)("div",{className:"row m-0 banner-carousel",style:{backgroundColor:e?"#E7E9EC":void 0,padding:e?"10px 0":void 0},children:[o&&f(x,_,w,g,o,i()),(0,s.jsx)("div",{className:`col-12 col-md-5 ${i().trendImageWrapper} p-0`,children:(0,s.jsx)(u.Z,{href:r[0]?.element?.cta_web?.data?.linkElement?.destination?.value,children:(0,s.jsx)(d.default,{src:(0,c.ss)(r[0]?.element?.background_image?.data?.image.renditionList,a)||m.F9,alt:"",layout:"responsive",width:o?320:595,height:o?430:800,priority:n})})}),(0,s.jsx)("div",{className:"col-12 col-md-7 p-0",children:(0,s.jsx)("div",{className:i().carouselContainer,children:(0,s.jsxs)("div",{className:`${e?i().foodswiperWrapper:i().fashionswiperWrapper}`,children:[!o&&f(x,_,w,g,o,i()),(0,s.jsx)("div",{style:{position:"relative"},children:(0,s.jsx)(h.Z,{config:{showScrollbar:o,showArrows:!o,deskTopSlidesToShow:3.2,mobileSlidesToShow:1.5,gapDesktop:24,gapMobile:8},children:v(r[1]?.list,a,i(),o)})})]})})})]})}},23004:function(e,r,t){"use strict";t.r(r);var s=t(85893),n=t(97173),i=t.n(n),l=t(25675),a=t.n(l),o=t(51035);r.default=e=>{let r;let{src:t,alt:n="",width:l="auto",className:c="",height:d="auto",layout:u="",onClick:m,onLoad:p,objectFit:h="",quality:f=50,isIcon:v=!1,priority:x=!1}=e,_="auto"!==l&&"auto"!==d&&l>0&&d>0&&!v,g=_?`data:image/svg+xml;base64,${r=`
2    <svg width="${l}" height="${d}" viewBox="0 0 ${l} ${d}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
3      <defs>
4        <linearGradient id="g">
5          <stop offset="0%" stop-color="#e0e0e0" />
6          <stop offset="20%" stop-color="#e0e0e0" />
7          <stop offset="50%" stop-color="#f5f5f5" />
8          <stop offset="80%" stop-color="#e0e0e0" />
9          <stop offset="100%" stop-color="#e0e0e0" />
10        </linearGradient>
11      </defs>
12      <rect width="100%" height="100%" fill="#e0e0e0" />
13      <rect width="100%" height="100%" fill="url(#g)">
14        <animate attributeName="x" from="-100%" to="100%" dur="1.5s" repeatCount="indefinite" />
15      </rect>
16    </svg>
17  `,window.btoa(r)}`:void 0;return(0,s.jsx)(a(),{src:t,onClick:m,onLoad:()=>{p&&p()},alt:n,width:l,height:d,layout:u,loader:o.XI,objectFit:h,quality:f,priority:x,placeholder:_?"blur":"empty",blurDataURL:g,loading:x?"eager":"lazy",decoding:"async",className:`${v?"":"img-fluid"} ${c} ${i().image}`},t)}},77519:function(e,r,t){"use strict";var s=t(85893),n=t(41664),i=t.n(n);r.Z=({children:e,href:r,onClick:t,target:n="_self",className:l=""})=>r?(0,s.jsx)(i(),{href:r,target:n,style:{color:"inherit",textDecoration:"none"},onClick:()=>t&&t(),className:l,children:e}):(0,s.jsx)(s.Fragment,{children:e})},24250:function(e,r,t){"use strict";var s=t(67294);r.Z=()=>{let[e,r]=(0,s.useState)(window.innerWidth);return(0,s.useEffect)(()=>{let e=()=>{r(window.innerWidth)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),e}},63177:function(e){e.exports={scrollWrapper:"CustomScrollbar_scrollWrapper__9pvJC",scrollContainer:"CustomScrollbar_scrollContainer__VPMM2",scrollTrack:"CustomScrollbar_scrollTrack__GkGgr",scrollThumb:"CustomScrollbar_scrollThumb__YjfE1"}},92587:function(e){e.exports={sliderContainer:"CustomSlider_sliderContainer__q7U9f",dotsContainer:"CustomSlider_dotsContainer__jwYxQ",customDots:"CustomSlider_customDots__Ujxeq","slick-active":"CustomSlider_slick-active__XhJDr"}},48715:function(e){e.exports={trendImageWrapper:"same_sizes_banner_carousel_section_trendImageWrapper__2mcM2",carouselContainer:"same_sizes_banner_carousel_section_carouselContainer__5P7_u",fashionswiperWrapper:"same_sizes_banner_carousel_section_fashionswiperWrapper__BAuSp",foodswiperWrapper:"same_sizes_banner_carousel_section_foodswiperWrapper__Qigpr",HeaderContent:"same_sizes_banner_carousel_section_HeaderContent__K6apj",fas

17hioncarouselItem:"same_sizes_banner_carousel_section_fashioncarouselItem__JZ6S6",fashioncarouselItemWrapper:"same_sizes_banner_carousel_section_fashioncarouselItemWrapper__BsLqL",cardContent:"same_sizes_banner_carousel_section_cardContent__c9y2p"}},97173:function(){},93967:function(e,r){var t;!function(){"use strict";var s={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var t=arguments[r];t&&(e=i(e,function(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return n.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var t in e)s.call(e,t)&&e[t]&&(r=i(r,t));return r}(t)))}return e}function i(e,r){return r?e?e+" "+r:e+r:e}e.exports?(n.default=n,e.exports=n):void 0!==(t=(function(){return n}).apply(r,[]))&&(e.exports=t)}()}}]);