PageSourceSearch

https://www.sacclife.com/cart

html sacclife.com collected 2026-10-05 22:08:28 UTC 305,694 bytes, 6,693 lines download raw bytes

1<!doctype html>
2<html class="no-js" lang="en-US" >
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
7    <title>sacclife</title>
8    <meta name="keywords" content="sacclife">
9    <meta name="description" content="sacclife">
10    <meta http-equiv="x-dns-prefetch-control" content="on">
11    <link rel="dns-prefetch" href="//static.staticdj.com/">
12    <link rel="preconnect" href="//static.staticdj.com/">
13    <link rel="dns-prefetch" href="//img.staticdj.com/">
14    <link rel="preconnect" href="//img.staticdj.com/">
15    <link rel="canonical" href="https://www.sacclife.com/cart">
16    <link rel="shortcut icon" href="">
17    <meta name="theme-color" content="">
18    <meta name="format-detection" content="telephone=no, email=no">
19    <link href="https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2" as="font" type="font/woff2" crossorigin="anonymous" rel="preload">
20    <link href="https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2" as="font" type="font/woff2" crossorigin="anonymous" rel="preload">
21    <meta property="og:site_name" content="sacclife">
22<meta property="og:url" content="https://www.sacclife.com/cart">
23<meta property="og:title" content="sacclife">
24<meta property="og:type" content="website">
25<meta property="og:description" content="sacclife">
26<meta name="twitter:site" content="@">
27<meta name="twitter:card" content="summary_large_image">
28<meta name="twitter:title" content="sacclife">
29<meta name="twitter:description" content="sacclife">
30<style spz-runtime>
31/* runtime-start */[hidden]{display:none!important}.i-spzhtml-element{display:inline-block}[layout=nodisplay]:not(.i-spzhtml-element){display:none!important}.i-spzhtml-layout-fixed,[layout=fixed][width][height]:not(.i-spzhtml-layout-fixed){display:inline-block;position:relative}.i-spzhtml-layout-responsive,[layout=responsive][width][height]:not(.i-spzhtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-spzhtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-spzhtml-layout-responsive){display:block;position:relative}.i-spzhtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-spzhtml-layout-intrinsic){display:inline-block;max-width:100%;position:relative}[layout=intrinsic][width][height].i-spzhtml-layout-intrinsic .i-spzhtml-fill-content{min-width:auto;width:auto}.i-spzhtml-layout-intrinsic .i-spzhtml-sizer{max-width:100%}.i-spzhtml-intrinsic-sizer{display:block!important;max-width:100%}.i-spzhtml-layout-container,.i-spzhtml-layout-fixed-height,.i-spzhtml-layout-logic,[layout=container],[layout=fixed-height][height]:not(.i-spzhtml-layout-fixed-height),[layout=logic]{display:block;position:relative}.i-spzhtml-layout-fill,.i-spzhtml-layout-fill.i-spzhtml-notbuilt,[layout=fill]:not(.i-spzhtml-layout-fill){bottom:0;display:block;left:0;overflow:hidden!important;position:absolute;right:0;top:0}.i-spzhtml-layout-flex-item,[layout=flex-item]:not(.i-spzhtml-layout-flex-item){display:block;flex:1 1 auto;position:relative}.i-spzhtml-layout-size-defined{overflow:hidden!important}.i-spzhtml-layout-awaiting-size{bottom:auto!important;position:absolute!important;top:auto!important}i-spzhtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-spzhtml-sizer.i-spzhtml-disable-ar{display:none!important}}.i-spzhtml-fill-content{display:block;height:0;margin:auto;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0}.i-spzhtml-layout-size-defined .i-spzhtml-fill-content{bottom:0;left:0;position:absolute;right:0;top:0}.i-spzhtml-replaced-content{border:none!important;padding:0!important}.i-spzhtml-unresolved{overflow:hidden!important;position:relative}.i-spzhtml-notbuilt,[layout]:not(.i-spzhtml-element):not([i-spzhtml-ssr]),[width][height][heights]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]),[width][height][sizes]:not(img):not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]){color:transparent!important;overflow:hidden!important;position:relative}.i-spzhtml-notbuilt:not(.i-spzhtml-layout-container):not([i-spzhtml-ssr])>*,[layout]:not([layout=container]):not(.i-spzhtml-element):not([i-spzhtml-ssr])>*,[width][height][heights]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr])>*,[width][height][sizes]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr])>*{display:none}[layout]:not([layout=container]):not(.i-spzhtml-element):not([i-spzhtml-ssr]),[layout]:not([layout=container]):not([manual]):not([i-spzhtml-ssr]).i-spzhtml-notbuilt,[width][height][heights]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]),[width][height][sizes]:not(img):not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]){color:transparent!important;line-height:0!important}spz-img:not(.i-spzhtml-element)[i-spzhtml-ssr]>img.i-spzhtml-fill-content{display:block}.i-spzhtml-ghost{visibility:hidden!important}.i-spzhtml-element>[placeholder],[layout]:not(.i-spzhtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-spzhtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-spzhtml-element)>[placeholder]{display:block;line-height:normal}.i-spzhtml-element>[placeholder].hidden,.i-spzhtml-element>[placeholder].spz-hidden{visibility:hidden}.i-spzhtml-layout-container>[placeholder].hidden,.i-spzhtml-layout-container>[placeholder].spz-hidden{display:none}.i-spzhtml-layout-size-defined>[placeholder]{bottom:0!important;left:0!important;position:absolute!important;right:0!important;top:0!important;z-index:1}spz-img.i-spzhtml-ssr:not(.i-spzhtml-element)>[placeholder]{z-index:auto}.i-spzhtml-notbuilt>[placeholder]{display:block!important}template{display:none!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}[layout=intrinsic][i-spzhtml-unheight-layout] img,[layout=responsive][i-spzhtml-unheight-layout] img{height:auto!important;position:relative!important;width:100%!important}html{overflow-x:hidden!important}html,html body{height:auto!important}html body{margin:0!important}body{text-size-adjust:100%}html.i-spzhtml-doc{touch-action:pan-y pinch-zoom}html.i-spzhtml-doc>body{overflow:visible!important;position:relative!important}.i-spzhtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}.i-spzhtml-carousel-scroll-disabled{touch-action:none;touch-action:pan-y}spz-list [role=loading]:not([pagination]),spz-list [role=loading]:not([scroll]),spz-list [role=slot]:not(.i-spzhtml-list-slot),spz-pagination>[role=arrow]{display:none}
31spz-carousel{display:flex!important}ljs-img[layout=intrinsic][auto-fit]:not([width][height]),spz-img[layout=intrinsic][auto-fit]:not([width][height]),spz-img[layout=responsive][auto-fit]{width:100%}spz-accordion>section>:last-child{display:none!important}spz-accordion>section[expanded]>:last-child{display:block!important}spz-menu [spz-menu-root]{display:flex;flex-wrap:nowrap}spz-carousel:not([dom-mounted]) .i-spzhtml-slides-container>:not(.i-spzhtml-slide-item-show),spz-carousel:not([dom-mounted]) [next],spz-carousel:not([dom-mounted]) [pre],spz-carousel:not([dom-mounted]):not([i-spzhtml-ssr])>*{display:none}spz-carousel .i-spzhtml-slides-container{box-sizing:content-box;transform:translate(0);z-index:1}spz-carousel .i-spzhtml-slide-item,spz-carousel .i-spzhtml-slides-container{display:flex;height:100%;position:relative;transition-property:transform;width:100%}spz-carousel .i-spzhtml-slide-item{flex-shrink:0}spz-carousel .i-spzhtml-slide-item>*{overflow:hidden!important;width:100%}spz-carousel[effect=fade] .i-spzhtml-slides-container .i-spzhtml-slide-item{display:none;opacity:0}spz-carousel[effect=fade] .i-spzhtml-slides-container .i-spzhtml-slide-item-show{display:flex;opacity:1!important}.i-spzhtml-tab-panel:not([active]),spz-menu [spz-menu-submenu]{display:none}spz-menu>*{opacity:0;pointer-events:none}spz-menu[finish]>*{opacity:1!important;pointer-events:auto!important}spz-list[display-in-order] [role=listitem] spz-img img{opacity:0;transition:opacity .5s linear}spz-dropdown{display:none}spz-script{font-size:0}ljs-list [role=loading]:not([pagination]),ljs-list [role=loading]:not([scroll]),ljs-list [role=slot]:not(.i-spzhtml-list-slot),ljs-pagination>[role=arrow]{display:none}ljs-carousel{display:flex!important}ljs-img[layout=responsive][auto-fit]{width:100%}ljs-accordion>section>:last-child{display:none!important}ljs-accordion>section[expanded]>:last-child{display:block!important}[layout=container]:not(.i-spzhtml-built){color:inherit!important}ljs-menu [spz-menu-root]{display:flex;flex-wrap:nowrap}ljs-menu>*{opacity:0;pointer-events:none}ljs-menu[finish]>*{opacity:1!important;pointer-events:auto!important}ljs-list[display-in-order] [role=listitem] ljs-img img{opacity:0;transition:opacity .5s linear}ljs-script{font-size:0}ljs-img:not(.i-spzhtml-element)[i-spzhtml-ssr]>img.i-spzhtml-fill-content{display:block}ljs-img.i-spzhtml-ssr:not(.i-spzhtml-element)>[placeholder]{z-index:auto}ljs-carousel:not([dom-mounted]) .i-spzhtml-slides-container>:not(.i-spzhtml-slide-item-show),ljs-carousel:not([dom-mounted]) [next],ljs-carousel:not([dom-mounted]) [pre],ljs-carousel:not([dom-mounted]):not([i-spzhtml-ssr])>*{display:none}ljs-carousel .i-spzhtml-slides-container{box-sizing:content-box;transform:translate(0);z-index:1}ljs-carousel .i-spzhtml-slide-item,ljs-carousel .i-spzhtml-slides-container{display:flex;height:100%;position:relative;transition-property:transform;width:100%}ljs-carousel .i-spzhtml-slide-item{flex-shrink:0}ljs-carousel .i-spzhtml-slide-item>*{overflow:hidden!important;width:100%}ljs-carousel[effect=fade] .i-spzhtml-slides-container .i-spzhtml-slide-item{display:none;opacity:0}ljs-carousel[effect=fade] .i-spzhtml-slides-container .i-spzhtml-slide-item-show{display:flex;opacity:1!important}ljs-menu [spz-menu-submenu],ljs-tabs:not([finish]) [role=tabpanel],spz-tabs:not([finish]) [role=tabpanel]{display:none}ljs-text,spz-text{visibility:hidden}ljs-gallery>:not(:first-child),spz-gallery>:not(:first-child){display:none}ljs-gallery.i-spzhtml-built>:not(:first-child),spz-gallery.i-spzhtml-built>:not(:first-child){display:unset}/* runtime-end */
32</style>
33<script type="text/javascript">
34/* env-start */!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=8)}({8:function(e,t){window.seahorse_env={"flag_plugin_loader":"","v1_spz_version":"v1.0.87","v1_spz_tag":"v26.4.13","aliyun_scene_id":"1gewqec5"}}});/* env-end */
35</script>
35
36
37<link href="//static.staticdj.com/cuttlefish/v1/spz.min.js" as="script" type="text/javascript" crossorigin="anonymous" rel="preload">
38
39<style>
40  :root {
41    --page-width-base: 1440px;  
42    --page-width: var(--page-width-base);
43    --page-spacing: 16px;
44
45    --type-text-font-size: 14px;
46      --type-heading-font-size: 30px;
47      --type-nav-font-size: 16px;
48      --color-general-bg: #FFFFFF;
49      --color-general-heading-text: #202020;
50      --color-product-title-text: #202020;
51      --color-general-text: #202020;
52      --color-price-text: #EB391B;
53      --color-compare-at-price-text: rgba(32,32,32,.6);
54      --color-save-price-text: #EB391B;
55      --color-custom-label-text: #E75D32;
56      --color-custom-label-bg: #FFF9F1;
57      --color-btn-bg: #202020;
58      --color-btn-text: #FFFFFF;
59      --color-quick-shop-btn-bg: #FFFFFF;
60      --color-quick-shop-btn-icon: #000000;
61      --color-toggle-btn-bg: #FFFFFF;
62      --color-toggle-btn-icon: #000000;
63      --color-label-bg: rgba(198, 156, 109, 1);
64      --color-sold-label-bg: #FFFFFF;
65      --color-sold-label-text: #202020;
66      --color-announcement-bg: #FFFFFF;
67      --color-announcement-text: #000000;
68      --color-cart-dot-bg: rgba(198, 156, 109, 1);
69      --color-header-bg: #FFFFFF;
70      --color-header-text: #202020;
71      --color-header-search-bg: rgba(230, 230, 230, 0.4);
72      --color-header-search-text: #202020;
73      --color-header-search-btn-bg: #202020;
74      --color-menu-bg: #F8F8F8;
75      --color-menu-item-bg: #FFFFFF;
76      --color-menu-item-text: #202020;
77      --color-actived-menu-item-bg: rgba(198, 156, 109, 1);
78      --color-footer-bg: rgba(40, 40, 40, 1);
79      --color-footer-border: rgba(230, 230, 230, 0.1);
80      --color-footer-text: rgba(255, 255, 255, 1);
81      --color-newsletter-border: #E6E6E6;
82      --color-newsletter-bg: #FFFFFF;
83      --color-newsletter-text: #202020;
84      --color-newsletter-btn-bg: #202020;
85      --color-label-text: #FFFFFF;
86      --color-cart-dot-text: #FFFFFF;
87      --color-border: #E6E6E6;
88      --color-overlay-title: #292929;
89      --color-overlay-text: #292929;
90      --color-header-search-btn-text: #FFFFFF;
91      --color-actived-menu-item-text: #FFFFFF;
92      --color-newsletter-btn-text: #FFFFFF;
93      --color-countdown-bg: rgba(248, 248, 248, 0.8);
94      --color-countdown-time-text: #EA3F36;
95      --color-background-shipping-success: #E5FFE2;
96      --color-text-shipping-success: #3AAA2E;
97      --color-cart-subtotal-bg: #F6F6F6;
98      /* 颜色相关 */
99    --color-body-bg: #FFFFFF;
100    --color-body-bg-80: rgba(255, 255, 255, 0.8);
101    --color-product-title-text: #202020;
102    --color-primary-btn-bg: #202020;
103    --color-primary-btn-bg-10: rgba(32, 32, 32, 0.1);
104    --color-primary-btn-text: #FFFFFF;
105
106    --color-quick-shop-btn-bg: #FFFFFF;
107    --color-quick-shop-btn-icon: #000000;
108    --color-toggle-btn-bg: #FFFFFF;
109    --color-toggle-btn-icon: #000000;
110
111    --color-body-text: #202020;
112    --color-body-text-50: rgba(32, 32, 32, 0.5);
113    --color-body-text-60: rgba(32, 32, 32, 0.6);
114    --color-body-text-70: rgba(32, 32, 32, 0.7);
115    --color-body-text-75: rgba(32, 32, 32, 0.75);
116    --color-body-text-80: rgba(32, 32, 32, 0.8);
117    --color-body-text-85: rgba(32, 32, 32, 0.85);
118    --color-body-text-90: rgba(32, 32, 32, 0.9);
119
120    --color-menu-item-text-70: rgba(32, 32, 32, 0.7);
121    --color-menu-item-text-80: rgba(32, 32, 32, 0.8);
122    --color-menu-item-text-90: rgba(32, 32, 32, 0.9);
123    --color-actived-menu-item-bg: rgba(198, 156, 109, 1);
124    --color-actived-menu-item-text: #FFFFFF;
125
126    --color-header-search-text-50: rgba(32, 32, 32, 0.5);
127
128    --color-header-text-70: rgba(32, 32, 32, 0.7);
129
130    /* 边框颜色 */
131    --color-border: #E6E6E6;
132    --color-border-35: rgba(230, 230, 230, 0.35);
133    --color-border-60: rgba(230, 230, 230, 0.6);
134
135    /* 蒙层标题颜色 */
136    --color-overlay-title: #202020;
137    /* 蒙层文字颜色 */
138    --color-overlay-text: #202020;
139
140    /* 圆角 */
141    --global-large-border-radius: 2px;
142    --global-border-radius: 2px;
143    --global-small-border-radius: 2px;
144    --global-fixed-border-radius: 2px;
145    --btn-border-radius: 2px;
146    --btn-fixed-border-radius: 2px;
147
148    /* 字体相关 */
149    --font-body-family: Lato, sans-serif;
150    --font-body-style: normal;
151    --font-body-weight: 400;
152
153    --font-heading-family: Lato, sans-serif;
154    --font-heading-style: normal;
155    --font-heading-weight: 400;
156
157    /* 倒计时 */
158    --color-countdown-bg: rgba(248, 248, 248, 0.8);
159    --color-countdown-time-text: #EA3F36;
160    --color-background-shipping-success: #E5FFE2;
161    --color-text-shipping-success: #3AAA2E;
162    --color-cart-subtotal-bg: #F6F6F6;
163
164    /* mask */
165    --color-mask-bg: rgba(0, 0, 0, 0.3);
166
167    /* 提供给插件 */
168    --breakpoint: 960;
169
170    /* z-index */
171    --z-index-dropdown: 1000;
172    --z-index-sticky: 1020;
173    --z-index-fixed: 1030;
174    --z-index-modal-backdrop: 1040;
175    --z-index-modal: 1050;
176    --z-index-popover: 1060;
177    --z-index-tooltip: 1070;
178  }
179
180  @media (min-width: 960px) {
181    :root {
182      --page-spacing: 100px;
183
184      /* 圆角 */
185      --global-small-border-radius: 2px;
186    }
187  }
188
189  .type-text-font-family {
190    font-family: var(--font-body-family);
191    font-style: var(--font-body-style);
192    font-weight: var(--font-body-weight);
193  }
194
195  .type-heading-font-family {
196    font-family: var(--font-heading-family);
197    font-style: var(--font-heading-style);
198    font-weight: var(--font-heading-weight);
199  }
200
201  /* latin-ext */@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 400;  font-display: swap;
201  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
202  /* latin-ext */@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
203</style>
204    <style>
205  html {
206    -ms-text-size-adjust: 100%;
207    -webkit-text-size-adjust: 100%;
208    -webkit-font-smoothing: antialiased;
209    -moz-osx-font-smoothing: grayscale;
210    -webkit-tap-highlight-color: transparent;
211  }
212
213  body {
214    padding-bottom: constant(safe-area-inset-bottom);
215    padding-bottom: env(safe-area-inset-bottom);
216    -webkit-tap-highlight-color: transparent;
217  }
218
219  *,
220  :after,
221  :before {
222    box-sizing: border-box;
223  }
224
225  *:focus {
226    outline: none;
227  }
228
229  /* Chrome, Safari, Edge, Opera */
230  input::-webkit-outer-spin-button,
231  input::-webkit-inner-spin-button {
232    -webkit-appearance: none;
233    margin: 0;
234  }
235
236  /* Firefox */
237  input[type='number'] {
238    -moz-appearance: textfield;
239  }
240
241  input[type='text'],
242  input[type='search'],
243  input[type='email'],
244  input[type='password'],
245  input:not([type]),
246  textarea {
247    appearance: none;
248    -webkit-appearance: none;
249  }
250
251  input,
252  textarea,
253  button,
254  select {
255    font-family: inherit;
256    font-style: inherit;
257    font-weight: inherit;
258    font-size: inherit;
259    color: var(--color-body-text);
260    background: var(--color-body-bg);
261  }
262
263  input[type='button'],
264  button,
265  select,
266  label {
267    cursor: pointer;
268  }
269
270  input[type='search']::-webkit-search-cancel-button {
271    display: none;
272  }
273
274  /* theme base class */
275  html body.nova {
276    color: var(--color-body-text);
277    font-size: var(--type-text-font-size);
278    background-color: var(--color-body-bg);
279  }
280
281  body > .page_container{
282    min-height: 100vh;
283    display: flex;
284    flex-direction: column;
285  }
286  body > .page_container > .main-content{
287    margin-bottom: auto;
288  }
289
290  .page-container {
291    max-width: var(--page-width);
292    padding: 0 var(--page-spacing);
293    margin: 0 auto;
294  }
295
296  @media (max-width: 959.98px) {
297    .md\:page-container {
298      max-width: var(--page-width);
299      padding: 0 var(--page-spacing);
300      margin: 0 auto;
301    }
302  }
303
304  @media (min-width: 960px) {
305    .lg\:page-container {
306      max-width: var(--page-width);
307      padding: 0 var(--page-spacing);
308      margin: 0 auto;
309    }
310  }
311
312  .clear {
313    margin: 0;
314    padding: 0;
315    border: 0;
316    outline: none;
317    list-style: none;
318    background-color: transparent;
319  }
320
321  [spz-if="false"],
322  [hidden] {
323    display: none !important;
324  }
325
326  /* title default style */
327
328  .title-font {
329    font-size: var(--type-heading-font-size);
330    color: var(--color-general-heading-text);
331  }
332
333  @media (max-width: 959.98px) {
334    .title-font {
335      font-size: calc(var(--type-heading-font-size) * .8);
336    }
337  }
338
339  .title-color{
340    color: var(--color-general-heading-text);
341  }
342  .product-title-color {
343    color: var(--color-product-title-text);
344  }
345  .text-color-8{
346    color: var(--color-body-text-80);
347  }
348
349  /* Border Radius */
350  .rounded-global {
351    border-radius: var(--global-border-radius);
352  }
353
354  .rounded-global-small {
355    border-radius: var(--global-small-border-radius);
356  }
357
358  .rounded-global-fixed {
359    border-radius: var(--global-fixed-border-radius);
360  }
361
362  .rounded-btn {
363    border-radius: var(--btn-border-radius);
364  }
365
366  .rounded-btn-fixed {
367    border-radius: var(--btn-fixed-border-radius);
368  }
369  .rounded-\[1px\] {
370    border-radius: 1px;
371  }
372
373  /* Button */
374  /* .button-primary {
375    font-weight: bold;
376    text-align: center;
377    border: 1px solid transparent;
378    color: var(--color-primary-btn-text);
379    border-radius: var(--btn-border-radius);
380    background-color: var(--color-primary-btn-bg);
381    transition: all .2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
382    cursor: pointer;
383  }
384
385  .button-secondary {
386    color: var(--color-body-text);
387    background-color: transparent;
388    border: 1px solid var(--color-border);
389    border-radius: var(--btn-border-radius);
390    transition: all .2s cubic-bezier(0.445, 0.05, 0.55, 0.95);;
391    cursor: pointer;
392  } */
393
394  /* Select */
395  .secondary-select {
396    cursor: pointer;
397    -webkit-appearance: none;
398    -moz-appearance: none;
399    appearance: none;
400    border-width: 1px;
401    border-style: solid;
402    border-color: rgba(230, 230, 230, 1);
403    background-color: transparent;
404    color: var(--color-body-text);
405  }
406
407  /* @media (min-width: 960px) {
408    .button-primary:hover {
409      background-color: var(--color-cart-dot-bg);
410    }
411
412    .button-secondary:hover {
413      color: var(--color-primary-btn-text);
414      border-color: var(--color-primary-btn-bg);
415      background-color: var(--color-primary-btn-bg);
416    }
417  } */
418
419  /* line-clamp-* */
420  .line-clamp-1 {
421    overflow: hidden;
422    text-overflow: ellipsis;
423    white-space: nowrap;
424  }
425
426  .line-clamp-2 {
427    overflow: hidden;
428    display: -webkit-box;
429    -webkit-line-clamp: 2;
430    -webkit-box-orient: vertical;
431    word-break: break-word;
432  }
433
434  .hide-scrollbar {
435    -ms-overflow-style: none;
436    scrollbar-width: none;
437  }
438
439  .hide-scrollbar::-webkit-scrollbar,
440  .hide-scrollbar ::-webkit-scrollbar {
441    display: none;
442  }
443
444  .break-words {
445    overflow-wrap: break-word;
446    word-break: break-word;
447  }
448  /* mce */
449  .mce-content p:first-child {
450    margin-top: 0;
451  }
452  .mce-content p:last-child {
453    margin-bottom: 0;
454  }
455  .mce-content img + img,
456  .mce-content spz-img + spz-img {
457    margin-top: 30px;
458  }
459  .mce-content spz-img {
460    max-width: 100% !important;
461  }
462  .mce-content table {
463    max-width: 100%;
464    border-collapse: collapse;
465  }
466  .mce-content table td,
467  .mce-content table th {
468    padding: 8px;
469  }
470  .mce-content iframe {
471    max-width: 100%;
472  }
473  .mce-content blockquote {
474    margin: 1em 40px;
475  }
476  .mce-content a {
477    color: inherit;
478    word-break: break-all;
479  }
480
481  /* loading */
482  @keyframes spinning {
483    from {
484      -webkit-transform: rotate(0deg);
485      transform: rotate(0deg);
486    }
487
488    to {
489      -webkit-transform: rotate(1turn);
490      transform: rotate(1turn);
491    }
492  }
493
494  spz-loading {
495    background: rgba(0, 0, 0, 0.3);
496  }
497
498  @keyframes rotate {
499    0% {
500      -webkit-transform: rotate(0deg);
501      transform: rotate(0deg)
502    }
503    to {
504      -webkit-transform: rotate(1turn);
505      transform: rotate(1turn)
506    }
507  }
508
509  spz-loading .loading-inner {
510    border-radius: 50%;
511    border-top: 3px solid transparent;
512    border-left: 3px solid transparent;
513    border-right: 3px solid transparent;
514    width: 26px;
515    height: 26px;
516    border: 3px solid #fff;
517    -webkit-animation: rotate .8s ease infinite;
518    animation: rotate .8s ease infinite;
519    border-bottom-color: #fff;
520    border-top-color: transparent;
521    border-left-color: transparent;
522    border-right-color: transparent;
523  }
524
525  .loading{
526    --loading-show: flex !important;
527    --loading-hide: none !important;
528  }
529
530  .loading[show]{
531    display: var(--loading-show);
532  }
533
534  .loading[hide]{
535    display: var(--loading-hide);
536  }
537
538  .loading[has-full-mask]{
539    position: fixed;
540    top: 0;
541    bottom: 0;
542    right: 0;
543    left: 0;
544    background: var(--color-mask-bg);
545    z-index: var(--z-index-modal-backdrop);
546  }
547
548  .loading-bounce {
549    width: 26px;
550    height: 26px;
551    border-radius: 50%;
552    border: 3px solid transparent;
553    border-bottom-color: #fff;
554    animation: spinning .8s ease infinite;
555    -webkit-animation: spinning .8s ease infinite;
556  }
557
558  /* spz-carousel button */
559  spz-carousel .spz-carousel-button {
560    display: flex;
561    align-items: center;
562    justify-content: center;
563    width: 44px;
564    height: 44px;
565    border-radius: 100%;
566    box-shadow: 4px 4px 16px rgba(18, 27, 23, 0.04);
567    background-color: var(--color-toggle-btn-bg);
568    cursor: pointer;
569    opacity: 0 !important;
570    transition: opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
571  }
572
573  @media (min-width: 960px) {
574    spz-carousel:hover .spz-carousel-button {
575      opacity: 1 !important;
576    }
577
578    .lg\:line-clamp-3 {
579      overflow: hidden;
580      display: -webkit-box;
581      -webkit-line-clamp: 3;
582      -webkit-box-orient: vertical;
583      word-break: break-word;
584    }
585  }
586
587  spz-carousel .spz-carousel-button-prev > svg {
588    transform: rotate(-90deg);
589    color: var(--color-toggle-btn-icon);
590  }
591
592  spz-carousel .spz-carousel-button-next > svg {
593    transform: rotate(90deg);
594    color: var(--color-toggle-btn-icon);
595  }
596
597  .button-primary[loading],
598  .button-secondary[loading] {
599    pointer-events: none;
600  }
601
602  .button-primary[loading] [role="content"],
603  .button-secondary[loading] [role="content"],
604  .button-primary:not([loading]) .loading,
605  .button-secondary:not([loading]) .loading {
606    opacity: 0;
607  }
608
609  .button-primary[loading] .loading,
610  .button-secondary[loading] .loading {
611    opacity: 1;
612  }
613
614  /* discount style */
615  .discount_gift_content {
616    display: inline-flex;
617    align-items: center;
618    padding: 4px;
619    color: #EB391B;
620    background-color: rgba(235, 57, 27, 0.1);
621    border-radius: 2px;
622  }
623  .discount_gift_content .discount__gift_lan {
624    margin-left: 2px;
625  }
626
627  spz-carousel > .i-spzhtml-slides-container {
628    width: 100%;
629  }
630
631  spz-sidebar ~ .i-spzhtml-sidebar-mask {
632    background-color: rgba(0, 0, 0, 0.5);
633  }
634
635  /********************************* 全局spz-toast 提示样式 *********************************/
636  spz-toast.i-spzhtml-toast-global {
637    width: max-content;
638    padding: 12px 24px;
639    border-radius: 8px;
640    overflow-wrap: break-word;
641    word-break: break-word;
642  }
643  @media screen and (max-width: 959.98px) {
644    spz-toast.i-spzhtml-toast-global {
645      max-width: 300px;
646    }
647  }
648  @media screen and (min-width: 960px) {
649    spz-toast.i-spzhtml-toast-global {
650      max-width: 480px;
651    }
652  }
653</style>
654
655<style>
656  .page_container {
657    padding-top: 0px;
658    padding-right: 0px;
659    padding-bottom: 0px;
660    padding-left: 0px;
661  }
662
663  @media (min-width: 960px) {
664    .page_container {
665      padding-top: 0px;
666      padding-right: 0px;
667      padding-bottom: 0px;
668      padding-left: 0px;
669    }
670  }
671</style>
672<style>
673  /* position, display, width, height */
674  .uppercase { text-transform: uppercase; }
675  .\!static { position: static; }
676  .relative { position: relative; }
677  .absolute { position: absolute; }
678  .sticky { position: sticky; }
679  /* top left right bottom */
680  .top-0 { top: 0; }
681  .top-1\/2 { top: 50%; }
682  .bottom-0 { bottom: 0; }
683  .bottom-3 { bottom: 12px;}
684  .bottom-5 { bottom: 20px; }
685  .-bottom-5 { bottom: -20px }
686  .inset-0 { top: 0; left: 0; right: 0; bottom: 0; }
687  .inset-x-\[-22px\] { left: -22px; right: -22px; }
688  .-inset-y-5 { top: -20px; bottom: -20px; }
689
690  .block { display: block; }
691  .inline-block { display: inline-block; }
692  .inline-flex { display: inline-flex; }
693  .flex { display: flex; }
694  .flex-1 { flex: 1; }
695  .flex-col { flex-direction: column; }
696  .items-end { align-items: flex-end; }
697  .items-center { align-items: center; }
698  .self-center { align-self: center; }
699  .items-start { align-items: flex-start; }
700  .items-stretch { align-items: stretch; }
701  .justify-end { justify-content: flex-end; }
702  .justify-center { justify-content: center; }
703  .justify-between { justify-content: space-between; }
704  .flex-center{ display: flex; align-items: center; justify-content: center; }
705  .flex-grow { flex-grow: 1; }
706  .flex-shrink-0 { flex-shrink: 0; }
707  .flex-wrap { flex-wrap: wrap; }
708  .flex-1 { flex: 1; }
709  .flex-row-reverse	{ flex-direction: row-reverse; }
710  .hidden { display: none; }
711  .\!hidden { display: none !important; }
712  .empty-hidden:empty{ display: none; }
713
714  .max-w-full { max-width: 100%; }
715  .max-w-\[300px\] { max-width: 300px; }
716  .min-w-\[0px\] { min-width: 0px; }
717
718  .w-full { width: 100%; }
719  .w-7 { width: 28px; }
720  .w-10 { width: 40px; }
721  .w-11 { width: 44px; }
722  .h-full { height: 100%; }
723  .h-11 { width: 44px; }
724  .h-14 { height: 56px;}
725
726
727  /* margin, padding */
728  .m-0 { margin: 0; }
729  .-mt-3 { margin-top: -12px; }
730  .mt-0\.5 { margin-top: 2px; }
731  .mt-0 { margin-top: 0; }
732  .mt-1 { margin-top: 4px; }
733  .mt-1\.5 { margin-top: 6px; }
734  .mt-2 { margin-top: 8px; }
735  .mt-3 { margin-top: 12px; }
736  .mt-4 { margin-top: 16px; }
737  .mt-5 { margin-top: 20px; }
738  .mt-6 { margin-top: 24px; }
739  .mt-7 { margin-top: 28px; }
740  .mt-8 { margin-top: 32px; }
741  .mt-9 { margin-top: 36px; }
742  .mt-10 { margin-top: 40px; }
743
744  .mb-1 { margin-bottom: 4px; }
745  .mb-2 { margin-bottom: 8px; }
746  .mb-3 { margin-bottom: 12px; }
747  .mb-4 { margin-bottom: 16px; }
748  .mb-5 { margin-bottom: 20px; }
749  .mb-6 { margin-bottom: 24px; }
750  .mb-8 { margin-bottom: 32px; }
751  .mx-auto { margin-left: auto; margin-right: auto; }
752  .mx-0 { margin-left: 0; margin-right: 0; }
753  .mx-5 { margin-left: 20px; margin-right: 20px; }
754  .my-1 { margin-top: 4px; margin-bottom: 4px; }
755  .my-6 { margin-top: 24px; margin-bottom: 24px; }
756  .my-10 { margin-top: 40px; margin-bottom: 40px; }
757  .my-14 { margin-top: 56px; margin-bottom: 56px; }
758
759  .p-0 { padding: 0; }
760  .p-2 { padding: 8px; }
761  .p-3 { padding: 12px; }
762  .p-4 { padding: 16px; }
763  .p-6 { padding: 24px; }
764  .p-8 { padding: 32px; }
765  .p-\[15px\] { padding: 15px; }
766  .px-2 { padding-left: 8px; padding-right: 8px; }
767  .px-3 { padding-left: 12px; padding-right: 12px; }
768  .px-4 { padding-left: 16px; padding-right: 16px; }
769  .px-5 { padding-left: 20px; padding-right: 20px; }
770  .px-6 { padding-left: 24px; padding-right: 24px; }
771  .px-10 { padding-left: 40px; padding-right: 40px; }
772  .px-\[18px\] { padding-left: 18px; padding-right: 18px; }
773  .px-\[22px\] { padding-left: 22px; padding-right: 22px; }
774  .py-\[10px\] { padding-top: 10px; padding-bottom: 10px; }
775
776  .py-0 { padding-top: 0; padding-bottom: 0; }
777  .py-1 { padding-top: 4px; padding-bottom: 4px; }
778  .py-2 { padding-top: 8px; padding-bottom: 8px; }
779  .py-3 { padding-top: 12px; padding-bottom: 12px; }
780  .py-4 { padding-top: 16px; padding-bottom: 16px; }
781  .py-5 { padding-top: 20px; padding-bottom: 20px; }
782  .py-6 { padding-top: 24px; padding-bottom: 24px; }
783  .py-8 { padding-top: 32px; padding-bottom: 32px; }
784  .py-12 { padding-top: 48px; padding-bottom: 48px; }
785  .pt-2 { padding-top: 8px; }
786  .pt-3 { padding-top: 12px; }
787  .pt-4 { padding-top: 16px; }
788  .pt-5 { padding-top: 20px; }
789  .pt-6 { padding-top: 24px; }
790  .pt-10 { padding-top: 40px; }
791  .pt-12 { padding-top: 48px; }
792  .pb-1 { padding-bottom: 4px; }
793  .pb-2 { padding-bottom: 8px; }
794  .pb-3 { padding-bottom: 12px; }
795  .pb-4 { padding-bottom: 16px; }
796  .pb-8 { padding-bottom: 32px; }
797  .pb-full { padding-bottom: 100%; }
798
799  /* Typography */
800  .body-minus-2 { font-size: calc(var(--type-text-font-size) - 2px); }
801  .body-minus-1 { font-size: calc(var(--type-text-font-size) - 1px); }
802  .body-base { font-size: var(--type-text-font-size); }
803  .body-plus-1 { font-size: calc(var(--type-text-font-size) + 1px); }
804  .body-plus-2 { font-size: calc(var(--type-text-font-size) + 2px); }
805  .body-plus-3 { font-size: calc(var(--type-text-font-size) + 3px); }
806  .body-plus-4 { font-size: calc(var(--type-text-font-size) + 4px); }
807  .body-plus-6 { font-size: calc(var(--type-text-font-size) + 6px); }
808  .text-2xl { font-size: 24px; line-height: 28px; }
809  .text-xs { font-size: 12px; line-height: 16px; }
810  .text-sm { font-size: 14px; line-height: 20px; }
811  .text-base { font-size: 16px; line-height: 24px; }
812  .text-lg { font-size: 18px; line-height: 28px; }
813  .text-0 { font-size: 0; }
814  .text-5 { font-size: 20px; }
815  .text-6 { font-size: 24px; }
816  .text-8 { font-size: 32px; }
817
818  .text-inherit { color: inherit; }
819  .text-center { text-align: center; }
820  .text-current{ color:currentColor }
821  .text-btn-bg { color: var(--color-primary-btn-bg); }
822
823  .text-white { color: rgba(255,255,255,1); }
824  .text-compare-at-price-color { color:var(--color-compare-at-price-text); }
825  .bg-btn-text-color { background-color: var(--color-primary-btn-text); }
826
827  .font-normal { font-weight: 400; }
828  .font-medium { font-weight: 500; }
829  .font-semibold { font-weight: 600; }
830  .font-bold { font-weight: 700; }
831
832  .leading-none { line-height: 1; }
833  .leading-1\.1 { line-height: 1.1; }
834  .leading-1\.15 { line-height: 1.15; }
835  .leading-1\.2 { line-height: 1.2; }
836  .leading-1\.25 { line-height: 1.25; }
837  .leading-1\.3 { line-height: 1.3; }
838  .leading-1\.4 { line-height: 1.4; }
839  .leading-1\.5 { line-height: 1.5; }
840  .leading-1\.7 { line-height: 1.7; }
841
842  .break-all { word-break: break-all; }
843
844  .whitespace-nowrap { white-space: nowrap; }
845
846  .overflow-hidden { overflow: hidden; }
847  .overflow-x-hidden { overflow-x: hidden; }
848  .overflow-x-auto { overflow-x: auto; }
849  .overflow-y-hidden { overflow-y: hidden; }
850  .overflow-y-auto { overflow-y: auto; }
851
852  .underline { text-decoration: underline; }
853  .no-underline { text-decoration-line: none; }
854  .appearance-none {
855    -webkit-appearance: none;
856    -moz-appearance: none;
857    appearance: none;
858  }
859
860  /* Color */
861  .color-body { color: var(--color-body-text); }
862  .color-body-60 { color: var(--color-body-text-60); }
863  .color-body-70 { color: var(--color-body-text-70); }
864  .color-heading { color: var(--color-general-heading-text); }
865  .color-price { color: var(--color-price-text); }
866  .color-save-price { color: var(--color-save-price-text); }
867  .color-compare-price { color: var(--color-compare-at-price-text); }
868  .color-text-default { color: #9F9F9F; }
869  .color-custom-label-text {color: var(--color-custom-label-text);}
870
871  /* Background */
872  .bg-custom-label {background-color: var(--color-custom-label-bg);}
873  .bg-color-body {background-color: var(--color-body-bg);}
874  .color-body-text { color: var(--color-body-text); }
875
876  /* Border Radius */
877  .rounded-sm { border-radius: 2px; }
878  .rounded { border-radius: 4px; }
879  .rounded-full { border-radius: 9999px; }
880
881  /* Border */
882  .border-none { border-style: none; }
883  .border { border: 1px solid var(--color-border); }
884  .border-t { border-top: 1px solid var(--color-border); }
885  .border-b { border-bottom: 1px solid var(--color-border); }
886  .border-solid { border-style: solid; }
887  .\!border-none { border-style: none !important; }
888  .border-t { border-top-width: 1px; }
889  .border-0 { border-width: 0; }
890  .border-t-0 { border-top-width: 0;}
891  .border-\[\#e6e6e6\] { border-color: rgba(230,230,230,1); }
892  .placeholder-svg {
893    position: relative;
894  }
895
896  .placeholder-svg > svg {
897    width: 100%;
898    height: 100%;
899    top: 0;
900    right: 0;
901    bottom: 0;
902    left: 0;
903    fill: #c0c0c0;
904    background-color: #eee;
905  }
906
907  /* z-index */
908  .z-1 { z-index: 1; }
909  .z-10 { z-index: 10; }
910  .z-20 { z-index: 20; }
911  .z-50 { z-index: 50; }
912  .-z-1 { z-index: -1; }
913
914  /* .z-dropdown { z-index: 1000; } */
915
916  /* Object */
917  .object-contain { -o-object-fit: contain; object-fit: contain; }
918  .object-cover { -o-object-fit: cover; object-fit: cover; }
919
920  /* opacity */
921  .opacity-0 { opacity: 0; }
922  .opacity-\[18\%\] { opacity: 18%; }
923  .opacity-50 { opacity: .5; }
924  .opacity-60 { opacity: .6; }
925  .opacity-70 { opacity: .7; }
926  .opacity-75{ opacity: .75; }
927
928  .group-hover\:opacity-100 { opacity: 1; }
929
930  /* text decoration */
931  .line-through { text-decoration: line-through; }
932
933  /* Other */
934  .cursor-pointer { cursor: pointer; }
935  .pointer-events-none { pointer-events: none; }
936  .pointer-events-auto { pointer-events: auto; }
937
938  /* svg */
939  .fill-svg { fill: silver; }
940  .bg-svg { background-color: rgba(238, 238, 238, 1); }
941  .bg-black { background-color: rgba(0,0,0,1); }
942  .bg-white { background-color: rgba(255,255,255,1); }
943  /* grid */
944  .grid { display: grid; }
945  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
946  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
947  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
948  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
949  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
950  .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
951  .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
952  .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
953  .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
954  .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
955
956  .gap-3 { gap: 12px; }
957  .gap-4 { gap: 16px; }
958  .gap-x-4 { column-gap: 16px; }
959  .gap-x-6 { column-gap: 24px; }
960  .gap-x-10 { column-gap: 40px; }
961  .gap-y-4 { row-gap: 16px; }
962  .gap-y-5 { row-gap: 20px; }
963  .gap-y-6 { row-gap: 24px; }
964  .gap-y-11 { row-gap: 44px; }
965
966  .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
967
968  /* btn */
969  .primary-btn { cursor: pointer; border-width: 1px; border-style: solid; border-color: transparent; background-color: var(--color-primary-btn-bg); text-align: center; color: var(--color-primary-btn-text); }
970  .primary-btn:hover { background-color: var(--color-cart-dot-bg); }
971  .secondary-btn{ cursor: pointer; border-width: 1px; border-style: solid; border-color: rgba(230,230,230,1); background-color: transparent; color: var(--color-body-text);}
972  .secondary-btn:hover{ border-color: var(--color-primary-btn-bg); background-color: var(--color-primary-btn-bg); color: var(--color-primary-btn-text); }
973
974  .rounded-btn { border-radius: var(--btn-border-radius); }
975
976  /* last */
977  .last\:mb-0:last-child { margin-bottom: 0; }
978
979  /* transform */
980  .-translate-y-1\/2 { transform: var(-50%); }
981
982  /* box */
983  .box-border { box-sizing: border-box; }
984
985  /* ul li */
986  .list-none { list-style-type: none; }
987
988  .left-0 { left: 0; }
989    .left-1\/2 { left: 50%; }
990    .left-3 { left: 12px; }
991    .right-0 { right: 0; }
992    .right-3 { right: 12px; }
993    .right-4 { right: 16px; }
994    .right-8 { right: 32px; }
995    .mr-\[6px\] { margin-right: 6px; }
996    .ml-auto { margin-left: auto; }
997    .-ml-3 { margin-left: -12px; }
998    .ml-1 { margin-left: 4px; }
999    .ml-2 { margin-left: 8px; }
1000    .ml-3 { margin-left: 12px; }
1001    .ml-4 { margin-left: 16px; }
1002    .ml-5 { margin-left: 20px; }
1003    .ml-6 { margin-left: 24px; }
1004    .ml-7 { margin-left: 28px; }
1005    .mr-1 { margin-right: 4px; }
1006    .mr-2 { margin-right: 8px; }
1007    .mr-3 { margin-right: 12px; }
1008    .mr-4 { margin-right: 16px; }
1009    .mr-5 { margin-right: 20px; }
1010    .pl-2 { padding-left: 8px; }
1011    .pl-3 { padding-left: 12px; }
1012    .pl-4 { padding-left: 16px; }
1013    .pr-3 { padding-right: 12px; }
1014    .text-left { text-align: left; }
1015    .text-right { text-align: right; }
1016    .rotate-90 { transform: rotate(90deg); }
1017    .rotate--90 { transform: rotate(-90deg); }
1018    .rotate-180 { transform: rotate(180deg); }
1019    .-translate-x-1\/2 { transform: translateX(-50%); }
1020  @media (max-width: 959.98px) {
1021    .md\:hidden { display: none !important; }
1022    .md\:flex { display: flex; }
1023    .md\:flex-row-reverse { flex-direction: row-reverse; }
1024    .md\:flex-col-reverse { flex-direction: column-reverse; }
1025    .md\:flex-1 { flex: 1; }
1026    .md\:flex-col { flex-direction: column; }
1027    .md\:justify-end { justify-content: flex-end; }
1028    .md\:justify-center { justify-content: center; }
1029    .md\:justify-between { justify-content: space-between; }
1030    .md\:items-center { align-items: center; }
1031    .md\:self-center { align-self: center; }
1032    .md\:shrink-0 { flex-shrink: 0; }
1033    .md\:items-start { align-items: flex-start; }
1034    .md\:flex-wrap { flex-wrap: wrap; }
1035
1036    .md\:w-full { width: 100%; }
1037
1038    .md\:mt-4 { margin-top: 16px; }
1039    .md\:mt-5 { margin-top: 20px; }
1040    .md\:mt-6 { margin-top: 24px; }
1041    .md\:mt-9 { margin-top: 36px; }
1042    .md\:mb-3 { margin-bottom: 13px; }
1043    .md\:mb-4 { margin-bottom: 16px; }
1044    .md\:mb-5 { margin-bottom: 20px; }
1045    .md\:mx-4 { margin-left: 16px; margin-right: 16px; }
1046
1047    .md\:pb-0 { padding-bottom: 0; }
1048    .md\:px-8 { padding-left: 32px; padding-right: 32px; }
1049    .md\:px-4 { padding-left: 16px; padding-right: 16px; }
1050    .md\:pt-6 { padding-top: 24px; }
1051    .md\:pt-4 { padding-top: 16px; }
1052    .md\:pt-2 { padding-top: 8px; }
1053    .md\:pt-10 { padding-top: 40px; }
1054    .md\:pb-5 { padding-bottom: 20px; }
1055    .md\:pb-6 { padding-bottom: 24px; }
1056    .md\:py-3 { padding-top: 12px; padding-bottom: 12px; }
1057    .md\:order-1 { order: 1; }
1058    .md\:order-2 { order: 2; }
1059
1060    .md\:body-minus-2 { font-size: calc(var(--type-text-font-size) - 2px); }
1061    .md\:body-plus-1 { font-size: calc(var(--type-text-font-size) + 1px); }
1062    .md\:body-plus-2 { font-size: calc(var(--type-text-font-size) + 2px); }
1063    .md\:text-base { font-size: 16px; line-height: 24px; }
1064    .md\:text-xs { font-size: 12px; line-height: 16px; }
1065    .md\:text-sm { font-size: 14px; line-height: 20px; }
1066    .md\:text-center { text-align: center; }
1067
1068    .md\:border-t { border-top: 1px solid var(--color-border); }
1069    .md\:pb-full { padding-bottom: 100%; }
1070    .md\:pt-\[30px\] { padding-top: 30px; }
1071    .md\:pb-\[54px\] { padding-bottom: 54px; }
1072    .md\:p-\[30px\] { padding: 30px; }
1073
1074    .md\:gap-x-4 { column-gap: 16px; }
1075    .md\:gap-y-6 { row-gap: 24px; }
1076    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1077
1078    .md\:overflow-x-scroll { overflow: scroll; }
1079    .md\:w-2\/3 { width: 66.67%; }
1080    .md\:truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1081
1082    .md\:color-body-70 { color: var(--color-body-text-70); }
1083  }
1084
1085  @media (min-width: 960px) {
1086    .lg\:hidden { display: none !important; }
1087    .lg\:flex { display: flex; }
1088    .lg\:flex-wrap { flex-wrap: wrap; }
1089    .lg\:flex-row-reverse { flex-direction: row-reverse; }
1090    .lg\:flex-col-reverse { flex-direction: column-reverse; }
1091    .lg\:flex-1 { flex: 1; }
1092    .lg\:flex-col { flex-direction: column; }
1093    .lg\:items-center { align-items: center; }
1094    .lg\:justify-end { justify-content: flex-end; }
1095    .lg\:justify-center { justify-content: center; }
1096    .lg\:justify-between { justify-content: space-between; }
1097    .lg\:shrink-0 { flex-shrink: 0; }
1098
1099    .lg\:w-full { width: 100%; }
1100    .lg\:h-full { height: 100%; }
1101    .lg\:w-1\/2 { width: 50%; }
1102
1103    .lg\:mx-8 { margin-left: 32px; margin-right: 32px; }
1104    .lg\:mt-1 { margin-top: 4px; }
1105    .lg\:mt-2 { margin-top: 8px; }
1106    .lg\:mt-3 { margin-top: 12px; }
1107    .lg\:mt-4 { margin-top: 16px; }
1108    .lg\:mt-5 { margin-top: 20px; }
1109    .lg\:mt-6 { margin-top: 24px; }
1110    .lg\:mt-7 { margin-top: 28px; }
1111    .lg\:mt-8 { margin-top: 32px; }
1112    .lg\:mt-9 { margin-top: 36px; }
1113    .lg\:mt-10 { margin-top: 40px; }
1114    .lg\:mt-15 { margin-top: 60px; }
1115    .lg\:mt-84 { margin-top: 84px; }
1116    .lg\:mb-3 { margin-bottom: 12px; }
1117    .lg\:mb-4 { margin-bottom: 16px; }
1118    .lg\:mb-5 { margin-bottom: 20px; }
1119    .lg\:mb-7 { margin-bottom: 28px; }
1120    .lg\:mb-15 { margin-bottom: 60px; }
1121
1122    .lg\:p-4 { padding: 16px; }
1123    .lg\:p-8 { padding: 32px; }
1124    .lg\:px-3 { padding-left: 12px; padding-right: 12px; }
1125    .lg\:px-5 { padding-left: 20px; padding-right: 20px; }
1126    .lg\:px-6 { padding-left: 24px; padding-right: 24px; }
1127    .lg\:px-8 { padding-left: 32px; padding-right: 32px; }
1128    .lg\:px-12 { padding-left: 48px; padding-right: 48px; }
1129    .lg\:px-20 { padding-left: 80px; padding-right: 80px; }
1130
1131    .lg\:px-10 { padding-left: 40px; padding-right: 40px; }
1132    .lg\:py-5 { padding-top: 20px; padding-bottom: 20px; }
1133    .lg\:py-6 { padding-top: 24px; padding-bottom: 24px; }
1134    .lg\:py-7 { padding-top: 28px; padding-bottom: 28px; }
1135    .lg\:py-8 { padding-top: 32px; padding-bottom: 32px; }
1136    .lg\:py-15 { padding-top: 60px; padding-bottom: 60px; }
1137    .lg\:py-20 {padding-top: 80px; padding-bottom: 80px; }
1138    .lg\:pt-1 { padding-top: 4px; }
1139    .lg\:pt-3 { padding-top: 12px; }
1140    .lg\:pt-5 { padding-top: 20px; }
1141    .lg\:pt-6 { padding-top: 24px; }
1142    .lg\:pt-8 { padding-top: 32px; }
1143    .lg\:pt-9 { padding-top: 36px; }
1144    .lg\:pt-10 { padding-top: 40px; }
1145    .lg\:pt-15 { padding-top: 60px; }
1146    .lg\:pt-11 { padding-top: 44px; }
1147    .lg\:pb-6 { padding-bottom: 24px; }
1148    .lg\:pb-8 { padding-bottom: 32px; }
1149    .lg\:pb-9 { padding-bottom: 36px; }
1150    .lg\:pb-13 { padding-bottom: 52px; }
1151    .lg\:px-\[98px\] { padding-left: 98px; padding-right: 98px; }
1152
1153    .lg\:max-w-full{ max-width: 100%;}
1154
1155    .lg\:body-plus-1 { font-size: calc(var(--type-text-font-size) + 1px); }
1156    .lg\:body-plus-2 { font-size: calc(var(--type-text-font-size) + 2px); }
1157    .lg\:body-plus-4 { font-size: calc(var(--type-text-font-size) + 4px); }
1158    .lg\:text-7 { font-size: 28px; }
1159    .lg\:text-sm { font-size: 14px; line-height: 20px; }
1160    .lg\:text-base { font-size: 16px; line-height: 24px; }
1161    .lg\:text-xl { font-size: 20px; line-height: 24px; }
1162    .lg\:text-2xl { font-size: 24px; line-height: 28px; }
1163    .lg\:text-3xl { font-size: 28px; line-height: 32px; }
1164
1165    .lg\:text-center { text-align: center; }
1166
1167    .lg\:color-text-default { color: #9F9F9F; }
1168
1169    .lg\:border { border: 1px solid var(--color-border); }
1170
1171    .lg\:leading-1\.2 { line-height: 1.2; }
1172
1173    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
1174    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1175    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
1176    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
1177    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
1178    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
1179    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
1180    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
1181    .lg\:gap-y-11 { row-gap: 44px; }
1182
1183    .lg\:gap-3 { gap: 12px; }
1184    .lg\:gap-4 { gap: 16px; }
1185    .lg\:gap-6 { gap: 24px; }
1186    .lg\:gap-y-4 { row-gap: 16px; }
1187    .lg\:gap-y-5 { row-gap: 20px; }
1188    .lg\:gap-y-6 { row-gap: 24px; }
1189    .lg\:gap-y-11 { row-gap: 44px; }
1190    .lg\:gap-x-4 { column-gap: 16px; }
1191    .lg\:gap-x-6 { column-gap: 24px; }
1192    .lg\:gap-x-10 { column-gap: 40px; }
1193
1194    .lg\:inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
1195
1196    .lg\:bottom-4 { bottom: 16px; }
1197    .lg\:bottom-5 { bottom: 20px; }
1198
1199    .lg\:overflow-hidden { overflow: hidden; }
1200
1201     /* box */
1202    .lg\:box-border { box-sizing: border-box; }
1203
1204    .lg\:hover\:border-btn-bg:hover:hover { border-color: var(--color-primary-btn-bg); }
1205    .lg\:hover\:bg-btn-bg:hover { background-color: var(--color-primary-btn-bg); }
1206    .lg\:hover\:text-btn-text-color:hover {color: var(--color-primary-btn-text); }
1207    .lg\:hover\:shadow-image:hover { box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1); }
1208    .lg\:order-1 { order: 1; }
1209    .lg\:order-2 { order: 2; }
1210  }
1211  @media (max-width: 959.98px) {
1212      .md\:ml-4 { margin-left: 16px; }
1213      .md\:pr-4 { padding-right: 16px; }
1214      .md\:pl-4 { padding-left: 16px; }
1215      .md\:rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
1216    }
1217    @media (min-width: 960px) {
1218      .lg\:ml-auto { margin-left: auto; }
1219      .lg\:ml-1 { margin-left: 4px; }
1220      .lg\:ml-4 { margin-left: 16px; }
1221      .lg\:ml-8 { margin-left: 32px; }
1222      .lg\:ml-10 { margin-left: 40px; }
1223      .lg\:mr-0 { margin-right: 0; }
1224      .lg\:mr-3 { margin-right: 12px; }
1225      .lg\:mr-4 { margin-right: 16px; }
1226      .lg\:mr-5 { margin-right: 20px; }
1227      .lg\:pr-10{ padding-right: 40px; }
1228      .lg\:pl-10{ padding-left: 40px; }
1229      .lg\:pl-\[42px\] { padding-left: 42px; }
1230      .lg\:border-l { border-left: 1px solid var(--color-border); }
1231      .lg\:border-r { border-right: 1px solid var(--color-border); }
1232      .lg\:rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
1233    }
1234  </style>
1235<style>
1236  /* image */
1237  .product-snippet__img,
1238  .product-snippet__img-secondary{
1239    transition: opacity 400ms, transform 400ms;
1240  }
1241  .product-snippet__img-secondary {
1242    opacity: 0;
1243  }
1244
1245  .product-snippet__img {
1246    opacity: 1;
1247  }
1248
1249  .product-snippet__img-link{
1250    border-radius: var(--global-small-border-radius);
1251  }
1252  .product-snippet__img-wrapper.show_carousel .product-snippet__img_main,
1253  .product-snippet__img-wrapper:not(.show_carousel) .product-snippet__img_carousel{
1254    display: none !important;
1255  }
1256  .product-snippet__img_carousel .i-spzhtml-slide-item > * {
1257    width: 100% !important;
1258    padding: 0 !important;
1259    margin: 0 !important;
1260  }
1261  /* label */
1262  .product_snippet__label {
1263    position: absolute;
1264    top: 8px;
1265    left: 8px;
1266    padding: 2px;
1267    text-decoration-line: none;
1268    font-size: 12px;
1269    line-height: 1.2;
1270    border-radius:  2px ;
1271    z-index: 1;
1272  }
1273  .product_snippet__label:not([label-type="sold_out"]){
1274    background-color: var(--color-label-bg);
1275    color: var(--color-label-text);
1276  }
1277  .product_snippet__label[label-type="sold_out"]{
1278    background-color: var(--color-sold-label-bg);
1279    color: var(--color-sold-label-text);
1280  }
1281  .product_snippet__label spz-currency{
1282    display: inline-flex;
1283  }
1284  .product-snippet__title{
1285    word-break: break-word;
1286  }
1287
1288  /* price */
1289  .product-snippet__price-wrapper{
1290    line-height: 1.3;
1291  }
1292  .product-snippet__price{
1293    padding-right: 6px;
1294    font-weight: 500;
1295  }
1296  .product-snippet__price spz-currency{
1297    display: inline-flex;
1298  }
1299
1300  .product-snippet__from-price spz-currency {
1301    margin-left: 1px;
1302  }
1303
1304  html[dir="rtl"] .product-snippet__from-price spz-currency {
1305    margin-left: 0;
1306    margin-right: 1px;
1307  }
1308
1309  .product-snippet__price,
1310  .product-snippet__price .money,
1311  .product-snippet__compare-at-price{
1312    overflow: hidden;
1313    text-overflow: ellipsis;
1314    white-space: nowrap;
1315  }
1316
1317  .product-snippet__price .money {
1318    line-height: 1.25;
1319    font-weight: 600;
1320    color: var(--color-price-text);
1321  }
1322
1323  .product-snippet__compare-at-price {
1324    line-height: 1.15;
1325    color: var(--color-compare-at-price-text);
1326  }
1327
1328  .product-snippet__price-wrapper:not([wholesale-enabled]) .product-snippet__compare-at-price{
1329    text-decoration: line-through;
1330  }
1331
1332  .product-info-sales-and-reviews {
1333    display: flex;
1334    align-items: center;
1335    gap: 8px;
1336  }
1337
1338  @media (min-width: 960px){
1339    .product-snippet__price-wrapper{
1340      line-height: 1.1;
1341    }
1342    .product-snippet__price{
1343      font-size: calc(var(--type-text-font-size) + 2px);
1344    }
1345
1346    .product_snippet__label {
1347      padding: 2px 4px;
1348    }
1349
1350    .product-snippet__img-link[has-secondary-image]:hover .product-snippet__img{
1351      opacity: 0;
1352    }
1353
1354    .product-snippet__img-link[has-secondary-image]:hover .product-snippet__img-secondary{
1355      opacity: 1;
1356    }
1357    .product-snippet__img-secondary{
1358      transform: scale(1.05);
1359    }
1360
1361    .product-snippet__img-link[has-secondary-image]:hover .product-snippet__img-secondary{
1362      transform: scale(1);
1363    }
1364  }
1365  /* thumbnails */
1366  .product-snippet__thumbnails-item,
1367  .product-snippet__thumbnails-item img{
1368    border-radius: 1px;
1369  }
1370
1371  .product-snippet__thumbnails-item + .product-snippet__thumbnails-item {
1372    margin-left: 8px;
1373  }
1374
1375
1376  html[dir="rtl"] .product-snippet__thumbnails-item + .product-snippet__thumbnails-item {
1377    margin-left: 0;
1378    margin-right: 8px;
1379  }
1380
1381  .product-snippet__thumbnails-item[option] {
1382    position: relative;
1383  }
1384
1385  .product-snippet__thumbnails-item[option]::before {
1386    content: '';
1387    z-index: 1;
1388    position: absolute;
1389    top: 0;
1390    left: 0;
1391    right: 0;
1392    bottom: 0;
1393    border: 1px solid transparent;
1394    border-radius: var(--global-fixed-border-radius);
1395    transition: all .2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1396  }
1397
1398  .product-snippet__thumbnails-item[option][selected]::before {
1399    border-color: var(--color-body-text);
1400  }
1401
1402  .product-snippet__thumbnails-item:not([option]) {
1403    margin: 0;
1404    padding: 0 8px;
1405  }
1406
1407  html[dir="rtl"] .product-snippet__thumbnails-item:not([option]) {
1408    margin: 0;
1409  }
1410
1411  /* quick shop icon */
1412  .product-snippet__quick-shop-icon {
1413    position: absolute;
1414    right: 8px;
1415    bottom: 8px;
1416    display: flex;
1417    align-items: center;
1418    justify-content: center;
1419    margin: 0;
1420    padding: 7px;
1421    border: none;
1422    border-radius: 9999px;
1423    background: var(--color-quick-shop-btn-bg);
1424    color: var(--color-body-text);
1425    z-index: 1;
1426  }
1427  .product-snippet__quick-shop-icon svg {
1428    color: var(--color-quick-shop-btn-icon);
1429  }
1430
1431  html[dir="rtl"] .product-snippet__quick-shop-icon {
1432    left: 8px;
1433    right: unset;
1434  }
1435
1436  @media (max-width: 959.98px) {
1437    .product-snippet__quick-shop-icon::before {
1438      content: '';
1439      position: absolute;
1440      top: -5px;
1441      left: -8px;
1442      right: -8px;
1443      bottom: -8px;
1444    }
1445  }
1446
1447  @media (min-width: 960px){
1448    .product-snippet__quick-shop-icon {
1449      padding: 10px;
1450      opacity: 0;
1451      transform: translateY(4px);
1452      transition: opacity .3s cubic-bezier(0.445, 0.05, 0.55, 0.95),
1453                  transform .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1454    }
1455
1456    .product-snippet__img-wrapper:hover .product-snippet__quick-shop-icon{
1457      opacity: 1;
1458      transform: translateY(0);
1459    }
1460  }
1461  /* quick shop btn */
1462  .product-snippet__quick-shop-btn{
1463    width: 100%;
1464    min-height: 40px;
1465    padding: 8px;
1466    border: 1px solid var(--color-primary-btn-bg);
1467    font-size: calc(var(--type-text-font-size) + 2px);
1468    font-weight: 600;
1469  }
1470  .product-snippet__quick-shop-btn[disable]{
1471    color: #9f9f9f;
1472    background-color: rgba(230, 230, 230, .5);
1473    border: none;
1474    cursor: default;
1475  }
1476  .product-snippet__quick-shop-btn:not(.select),
1477  .product_snippet__atc_select_btn{
1478    margin-top: 24px;
1479  }
1480  .product_snippet__atc_dropdown .i-spzhtml-dropdown-container{
1481    min-width: 100%;
1482  }
1483
1484  .product_snippet__atc_tooltip .i-spzhtml-tooltip-inner{
1485    padding: 0;
1486    box-shadow: none;
1487  }
1488  .product_snippet__atc_tooltip_content{
1489    display: flex;
1490    flex-direction: column;
1491    padding: 4px 0;
1492    color: var(--color-body-text);
1493    font-size: var(--type-text-font-size);
1494    background: var(--color-body-bg);
1495    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 8px 40px rgba(0, 0, 0, 0.2);
1496    max-height: 300px;
1497    overflow: hidden auto;
1498  }
1499  .product_snippet__atc_tooltip_content input[type="radio"]{
1500    display: none;
1501  }
1502  .product_snippet__atc_tooltip_content label{
1503    padding: 12px;
1504    border-bottom: 1px solid #e5e5e5;
1505    display: flex;
1506    flex-wrap: wrap;
1507  }
1508  .product_snippet__atc_tooltip_content label:not([disabled]):hover{
1509    background: var(--color-body-text);
1510    color: var(--color-body-bg);
1511  }
1512  .product_snippet__atc_tooltip_content label[disabled]{
1513    opacity: 0.6;
1514  }
1515  .product_snippet__atc_tooltip_content .product-snippet__compare-at-price{
1516    text-decoration: line-through;
1517  }
1518</style>
1519<style>
1520
1521  /* Button */
1522  .button-primary,
1523  .button-secondary {
1524    cursor: pointer;
1525    display: inline-flex;
1526    align-items: center;
1527    justify-content: center;
1528    padding-top: 16px;
1529    padding-right:16px;
1530    padding-bottom:16px;
1531    padding-left:16px;
1532    font-weight: bold;
1533    text-align: center;
1534    color: var(--color-primary-btn-text);
1535    text-decoration: none;
1536    background-color: var(--color-primary-btn-bg);
1537    border-radius: var(--btn-border-radius);
1538    border: 1px solid transparent;
1539    position: relative;
1540    overflow: hidden;
1541    transition: opacity 0.15s ease-in-out, transform 0.3s ease-in-out;
1542  }
1543
1544  .button-secondary {
1545    color: var(--color-primary-btn-bg);
1546    background-color: transparent;
1547    border: 1px solid var(--color-primary-btn-bg);
1548  }
1549  
1550  /* 悬浮放大 */
1551  body[data-button-hover-animation="enlarge_hover"] .button-primary:hover,
1552  body[data-button-hover-animation="enlarge_hover"] .button-secondary:hover {
1553   transform: scale(1.05);
1554  }
1555
1556  /* 颜色反转 */
1557  body[data-button-hover-animation="color_invert"] .button-primary:hover {
1558    color: var(--color-primary-btn-bg);
1559    background-color: var(--color-primary-btn-text);
1560    border: 1px solid var(--color-primary-btn-bg);
1561  }
1562  body[data-button-hover-animation="color_invert"] .button-secondary:hover {
1563    color: var(--color-primary-btn-text);
1564    background-color: var(--color-primary-btn-bg);
1565  }
1566
1567  .button-primary::before,
1568  .button-secondary::before {
1569    content: "";
1570    position: absolute;
1571    bottom: 0px;
1572    left: 0px;
1573    right: 0px;
1574    top: 0px;
1575    z-index: 1;
1576    border-radius: var(--btn-border-radius);
1577    pointer-events: none;
1578  }
1579
1580  /* 左右扫光 */
1581  body[data-button-hover-animation="horizontal_swipe"] .button-primary::before,
1582  body[data-button-hover-animation="horizontal_swipe"] .button-secondary::before {
1583    width: 200%;
1584    height: 100%;
1585  }
1586  @keyframes button-swipe {
1587    100% {
1588      left: -200%;
1589    }
1590  }
1591  body[data-button-hover-animation="horizontal_swipe"] .button-primary:hover::before,
1592  body[data-button-hover-animation="horizontal_swipe"] .button-secondary:hover::before {
1593    transform: skew(-20deg);
1594    background-image: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.25), transparent);
1595    animation: button-swipe 0.75s cubic-bezier(0.01, 0.56, 1, 1);
1596    left: 150%;
1597  }
1598
1599  /* 向右填充 */
1600  body[data-button-hover-animation="fill_right"] .button-primary::before,
1601  body[data-button-hover-animation="fill_right"] .button-secondary::before {
1602    background-color: #fff;
1603    opacity: 0.2;
1604    width: 0;
1605    height: 100%;
1606    transition: width 0.5s ease-out;
1607  }
1608  body[data-button-hover-animation="fill_right"] .button-primary:hover::before,
1609  body[data-button-hover-animation="fill_right"] .button-secondary:hover::before {
1610    width: 100%;
1611  }
1612
1613  .button-primary[loading] .loading-bounce {
1614    border-bottom-color: var(--color-primary-btn-text);
1615  }
1616  .button-secondary[loading] .loading-bounce {
1617    border-bottom-color: var(--color-primary-btn-bg);
1618  }
1619
1620  @media (max-width: 960px) {
1621    .button-primary,
1622    .button-secondary {
1623      padding-top: 12px;
1624      padding-right:12px;
1625      padding-bottom:12px;
1626      padding-left:12px;
1627    }
1628  }
1629
1630</style>
1631<script>
1632      window.SHOP_PARAMS = {
1633        product_lang:{
1634          added_to_cart_successfully:"Added successfully",
1635          view_cart:"View Cart",
1636          select_variant:"Please select a variant at least",
1637          line_items_variant_withdraw: "Some items are not in stock, please re-order",
1638          line_items_variant_sold_out: "Some items have been sold out, please re-order",
1639          product_reorder: "Some items information has been updated, please re-order"
1640        },
1641        product_settings: {
1642          add_to_cart_process:"drawer",
1643        }
1644      }
1645      window.breakpoint = 960;
1646      window.disabled_exts = ["bootstrap", "image_video", "social_login", "global_version", "share_product", "boowc", "paypal_express"];
1647    </script>
1647
1648    
1648<script async crossorigin="anonymous" src="//static.staticdj.com/cuttlefish/v1/spz.min.js"></script>
1648
1649  
1649<script>window.C_SETTINGS={image_domain:"//img.staticdj.com/",payment_settings:{"paypal_express_enabled":true,"dynamic_config":{"paypal_js_sdk_url":"https:\/\/www.paypal.com\/sdk\/js?client-id=AX5L-W1aluo9s_6sF3GK_BavJBa3VkMso8NRFTWphijCrqNYUiOiHFrko-0UCIOmvqf6XGbjrbiGpRAv&currency=USD&disable-funding=card%2Cbancontact%2Cblik%2Ceps%2Cgiropay%2Cideal%2Cmercadopago%2Cmybank%2Cp24%2Csepa%2Csofort%2Cvenmo&enable-funding=paylater","express_checkout_config":{"express_channels":["paypal"],"express_account_infos":{"paypal":{"channel_id":"9246cb06-da34-4aa1-bc80-5093609d0f39","merchant_id":"","client_id":"AX5L-W1aluo9s_6sF3GK_BavJBa3VkMso8NRFTWphijCrqNYUiOiHFrko-0UCIOmvqf6XGbjrbiGpRAv","account":"manual"}},"express_theme_configs":[]},"scm":"","unified_user_id":"","fallback_reason":"","request_id":"9eefdee8-332b-4e53-ba07-327449ca62f3","ec_recommend":{"recommend_count":1,"exp_group":"X1","channel_groups":[{"payment_type":"paypal","candidates":[{"channel":"paypal","score":100}]}],"scm":"","unified_user_id":""},"ec_legacy_apple_pay_block_store_ids":["2036132","2171855","1021775","2373789","2050387","1831597","2386285","2374192"],"ec_legacy_google_pay_block_store_ids":["2036132","2171855","1021775","2373789","2050387","1831597","2386285","2374192"],"ec_legacy_spz_paypal_store_ids":[]}},sa_server_url:"https://r.shoplazza.com/sa?project=production&store_id=2308980",sa_web_url:"https://r.shoplazza.com/?store_id=2308980",routes:{root:""},currency_code:"USD",currency_symbol:"$",currency_symbol_pos:"left",theme:{"theme_id":"bf974983-c7f5-41aa-ac6a-6e82caeaeb0c","theme_version_id":"17258","merchant_theme_name":"Nova 2023","theme_preset":"","updated_at":"2026-04-01 09:02:27","merchant_theme_updated_at":"2025-10-20 09:37:37","theme_type":"standard","support_block":true,"support_app_block":true,"ext_theme_key":"","merchant_theme_c_version":"3.6.42","merchant_theme_version":"25.50.8"},customer:{"customer_id":null,"customer_phone":null,"customer_email":null},shop:{"shop_id":"2308980","shop_env":0,"shop_name":"sacclife","finance":1,"cdn_domain":"\/\/static.staticdj.com\/","image_domain":"\/\/img.staticdj.com\/","wholesale_enabled":false,"time_zone":"+0800","attrs":null,"show_payment_logo":false},meta:{page:{"template_name":"cart","template_type":13,"template_suffix":"default"}},money_format:"amount",money_round_currencies:{"round_off_halfup":["XOF","XAF","XPF","BIF","CLP","KMF","DJF","GNF","ISK","JPY","PYG","RWF","KRW","UGX","VUV","VND","UYI","HUF","TWD"],"round_off_zero":[],"round_off_floor":[],"round_off_ceil":[]},slug:"sacclife",CLIENT_SENTRY_DSN:"https://[email protected]/5",region:"cn",store_plan:"base",store_trial:false,password_enabled:false,namespace:"production",market:{"market_id":null,"market_currency":null,"market_lang":null,"market_currency_symbol":null,"market_base_currency":null,"market_base_currency_symbol":null,"primary_market_id":null,"primary_market_currency":null,"primary_market_currency_symbol":null,"primary_market_lang":"en-US","market_price_setting":null,"market_domain":null},app_root_domain:"shoplazza.com",product_snippet_prefix:"shoplazza-product-snippet",section_prefix:"shoplaza-section"};window[atob("U0hPUExBWlpB")]= window.C_SETTINGS;</script>
1649<style type="text/css">
1650  .theme-toast-wrap{
1651    position: fixed;
1652    z-index: var(--z-index-tooltip);
1653    top: 64px;
1654    right: 0;
1655    left: 0;
1656    pointer-events: none;
1657  }
1658  .theme-toast{
1659    width: 100%;
1660    background: rgba(41, 41, 41, 0.95);
1661    color: #fff;
1662    pointer-events: auto;
1663    border-radius: 0px;
1664    position: unset !important;
1665    transform: unset !important;
1666    text-align: left !important;
1667  }
1668  @media (min-width: 960px) {
1669    .theme-toast-wrap {
1670      top: 60px;
1671    }
1672    .theme-toast{
1673      width: 400px;
1674      border-radius: 2px;
1675    }
1676  }
1677
1678  .add_cart-toast-wrap{
1679    position: fixed;
1680    z-index: var(--z-index-tooltip);
1681    top: 64px;
1682    right: 0;
1683    left: 0;
1684    pointer-events: none;
1685  }
1686  .add_cart-toast{
1687    width: 100%;
1688    background: rgba(41, 41, 41, 0.95);
1689    color: #fff;
1690    pointer-events: auto;
1691    border-radius: 0px;
1692    position: unset !important;
1693    transform: unset !important;
1694    text-align: left !important;
1695  }
1696  .toast_view_cart {
1697    color: #F3D07D;
1698  }
1699  @media (min-width: 960px) {
1700    .add_cart-toast-wrap {
1701      top: 60px;
1702    }
1703    .add_cart-toast{
1704      width: 400px;
1705      border-radius: 2px;
1706    }
1707  }
1708</style>
1709<script type="text/javascript">
1710/* top_v2-start */!function(e){var t={};function n(s){if(t[s])return t[s].exports;var o=t[s]={i:s,l:!1,exports:{}};return e[s].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,s){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(s,o,function(t){return e[t]}.bind(null,o));return s},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=12)}([function(e,t,n){"use strict";n.d(t,"h",(function(){return s})),n.d(t,"i",(function(){return o})),n.d(t,"s",(function(){return r})),n.d(t,"o",(function(){return i})),n.d(t,"r",(function(){return a})),n.d(t,"a",(function(){return c})),n.d(t,"b",(function(){return d})),n.d(t,"e",(function(){return u})),n.d(t,"c",(function(){return l})),n.d(t,"d",(function(){return p})),n.d(t,"f",(function(){return h})),n.d(t,"n",(function(){return _})),n.d(t,"g",(function(){return f})),n.d(t,"k",(function(){return v})),n.d(t,"l",(function(){return y})),n.d(t,"q",(function(){return m})),n.d(t,"j",(function(){return g})),n.d(t,"p",(function(){return b})),n.d(t,"m",(function(){return w}));const s="dj.request",o="dj.response",r="dj.viewContent",i="dj.productSearch",a="dj.variantChange",c="dj.addToCart",d="dj.cartChange",u="dj.cartUpdate",l="dj.cartItemChange",p="dj.cartItemDelete",h="dj.checkoutSubmit",_="dj.passwordReset",f="dj.completeRegistration",v="dj.login",y="dj.logout",m="dj.registration",g="dj.emailSubscription",b="dj.purchase",w="dj.pageLoad"},function(e,t,n){"use strict";n.d(t,"c",(function(){return o})),n.d(t,"d",(function(){return r})),n.d(t,"a",(function(){return i})),n.d(t,"b",(function(){return a}));var s=n(0);window.__SEAHORSE_BUS={listeners:{},addEventListener(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t)},dispatchEvent(e,t){const n=this.listeners[e];n&&n.length>0?n.forEach(n=>{try{n(t)}catch(t){console.error("执行事件回调失败: "+e,t)}}):console.error("没有找到事件监听器: "+e)}};const o=function(e){const t=document.createElement("a");return t.href=e,t},r=(e,t)=>{var n;const o=(e=>e?{...e,event_time:Date.now(),__is_seahorse_event:!0}:null)(t);e===s.a&&window.__SEAHORSE_BUS.dispatchEvent(e,o);const r=new CustomEvent(e,{detail:o,bubbles:!0});null===(n=document.body)||void 0===n||n.dispatchEvent(r)},i=(e,t)=>{document.addEventListener(e,(function(e){t(e,e.detail)}))},a=e=>{const t={};try{if(!e||e.match(/^[{\[]+[^]*[}\]]+$/))return t;e.replace(/[?&]+([^=&]+)=([^&]*)/gi,(e,n,s)=>{null!=s&&(t[n]=s)})}catch(e){console.log(e)}return t}},function(e,t,n){"use strict";n.d(t,"a",(function(){return s}));const s=function(){var e,t,n,s,o,r,i,a,c,d,u;const l=window.C_SETTINGS||window[atob("U0hPUExBWlpB")]||{};window[atob("U0hPUF9QQVJBTVM=")]=Object.assign({customer_id:null===(e=l.customer)||void 0===e?void 0:e.customer_id,finance:null===(t=l.shop)||void 0===t?void 0:t.finance,finance_symbol:l.currency_symbol,cdn_domain:null===(n=l.shop)||void 0===n?void 0:n.cdn_domain,theme_id:null===(s=l.theme)||void 0===s?void 0:s.theme_id,theme_name:null===(o=l.theme)||void 0===o?void 0:o.merchant_theme_name,theme_version:null===(r=l.theme)||void 0===r?void 0:r.theme_version_id,shop_name:null===(i=l.shop)||void 0===i?void 0:i.shop_name,shop_id:null===(a=l.shop)||void 0===a?void 0:a.shop_id,shop_env:null===(c=l.shop)||void 0===c?void 0:c.shop_env,default_img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABlBMVEXx8fH///8wmV1OAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAACklEQVQImWNgAAAAAgAB9HFkpgAAAABJRU5ErkJggg==",template_name:null===(d=l.meta)||void 0===d||null===(d=d.page)||void 0===d?void 0:d.template_name,template_type:null===(u=l.meta)||void 0===u||null===(u=u.page)||void 0===u||null===(u=u.template_type)||void 0===u?void 0:u.toString()},window[atob("U0hPUF9QQVJBTVM=")]||{})}},function(e,t,n){"use strict";function s(){var e;null===(e=window.djInterceptors)||void 0===e||null===(e=e.proxy)||void 0===e||e.use(o)}function o({url:e,method:t,_body:n,redirect:s}){let o=null;try{var r,i,a;if(e.endsWith("/api/checkout/order")&&"POST"===t&&!s)if(n="string"==typeof n?JSON.parse(n):n,o={time:Date.now(),isOptimizedVersion:!1,source:["buy_now","cart"].includes(null===(r=n.refer_info)||void 0===r?void 0:r.source)?null===(i=n.refer_info)||void 0===i?void 0:i.source:"buy_now"},n.enable_order_create_proxy&&"one_page"!=(null===(a=n.refer_info)||void 0===a?void 0:a.source)){o&&(o.isOptimizedVersion=!0);const t=document.createElement("form");return t.method="POST",t.action=e.replace("/api/checkout/order","/checkout/create_order"),t.style.display="none",function(e,t){const n=document.createElement("input");n.type="hidden",n.name="data",n.value=JSON.stringify(t),e.appendChild(n)}(t,n),document.body.appendChild(t),t.submit(),document.body.removeChild(t),Promise.resolve(new Response(JSON.stringify({state:"success",ignore_to_checkout:!0,data:{items:n.line_items,refer_info:n.refer_info}}),{status:200,headers:{"Content-Type":"application/json"}}))}}catch(s){console.error("proxyCreateOrder error",e,t,n,s)}finally{o&&sessionStorage.setItem("CREATE_ORDER",JSON.stringify(o))}}n.d(t,"a",(function(){return s}))},function(e,t,n){"use strict";n.d(t,"a",(function(){return y}
1710));class s{constructor(){this._handlers=[]}use(e){return this._handlers.push(e),this._handlers.length-1}eject(e){this._handlers[e]&&(this._handlers[e]=null)}forEach(e){this._handlers.forEach((t,n)=>{null!==t&&e(t,n)})}length(){return this._handlers.length}}var o=n(1);const r="dj.request",i="dj.response",a="dj.beforeRequest",c="application/x-www-form-urlencoded",d="application/json",u=/(?:\[)(.+?)(?:\])/g,l=/^\d$/,p=e=>{if(!e)return e;let t=e;try{t=JSON.parse(JSON.stringify(e)),Object.keys(e).forEach(n=>{var s;let o=null==n?void 0:n.match(u);if(!o)return void(t[n]=e[n]);o=o.map(e=>e.slice(1,-1));const r=o[0],i=l.test(r),a=null==n?void 0:n.slice(0,null==n?void 0:n.indexOf("["));t[a]||(t[a]=i?[]:{}),null===(s=o)||void 0===s||s.forEach(s=>{l.test(s)||(i?(t[a][r]||(t[a][r]={}),t[a][r][s]=e[n]):t[a][s]=e[n])})})}catch(e){console.log(e)}return t};class h{constructor(e,t,n,s){this.__reqHeaders=Object.assign({},n),this._request={url:e,redirect:void 0,method:t,headers:n,_body:s,body:void 0},this._response={data:void 0,headers:void 0,status:void 0},this.__origin_code_map_={}}redirectUrl_(){return this._request.redirect}getContentType_(e){for(const t in e.headers||{})if("content-type"===t.toLowerCase())return e.headers[t]}getRequestType_(){return this.getContentType_(this._request)}getResponseType_(){return this.getContentType_(this._response)}serializeBody_(){const e=this.getRequestType_();if(!e||!this._request._body)return;let t=void 0;try{e.indexOf(c)>-1?t=this.formStringToObj_(this._request._body):e.indexOf(d)>-1&&(t=JSON.parse(this._request._body))}catch{}t&&(this._request.body=t)}deserializeBody_(){const e=this.getRequestType_();if(!e||!this._request.body)return;let t=void 0;try{e.indexOf(c)>-1?t=this.formBodyToString_(this._request.body):e.indexOf(d)>-1&&(t=JSON.stringify(this._request.body))}catch{}t&&(this._request._body=t)}formBodyToString_(e){const t=[],n=(e,n)=>{t.push(this.getEncodeValue_(e)+"="+this.getEncodeValue_(n))};for(const t in e){const s=e[t];Array.isArray(s)?s.forEach(e=>{n(t,e)}):n(t,s)}return t.join("&")}formStringToObj_(e){const t={};if(!e||e.match(/^[{\[]+[^]*[}\]]+$/))return t;const n=[];return("?"+e).replace(/[?&]+([^=&]+)=([^&]*)/gi,(e,s,o)=>{null!=o&&(s=this.getDecodeValue_(s),o=this.getDecodeValue_(o),n.push({key:s,value:o}),null!=t[s]?t[s]=n.filter(e=>e.key==s).map(e=>e.value):t[s]=o)}),t}getDecodeValue_(e){const t=decodeURIComponent(e),n=e!==encodeURIComponent(t)?e:t;return this.__origin_code_map_[n]=e,n}getEncodeValue_(e){return void 0!==this.__origin_code_map_[e]?this.__origin_code_map_[e]:null==e?e:encodeURIComponent(e)}triggerBeforeRequestEvent(){Object(o.d)(a,Object.assign({},this._request,{body:p(this._request.body)}))}triggerRequestEvent(){Object(o.d)(r,Object.assign({},this._request,{body:p(this._request.body)}))}triggerResponseEvent(){Object(o.d)(i,{request:Object.assign({},this._request,{body:p(this._request.body)}),response:this._response})}shouldSendDirectly_(){var e,t;if(!(null!==(e=window.djInterceptors)&&void 0!==e&&null!==(e=e.request)&&void 0!==e&&e.length()||null!==(t=window.djInterceptors)&&void 0!==t&&null!==(t=t.proxy)&&void 0!==t&&t.length()))return!0;const n=this.getRequestType_();return!(!n||-1!==n.indexOf(c)||-1!==n.indexOf(d))}shouldReturnDirectly_(){var e;if(null===(e=window.djInterceptors)||void 0===e||null===(e=e.response)||void 0===e||!e.length())return!0;const t=this.getResponseType_();return!(!t||-1!==t.indexOf(d))}headersModified_(){const e={};let t=!1;const n=this._request.headers;return Object.getOwnPropertyNames(n||{}).forEach(s=>{n[s]!==this.__reqHeaders[s]&&(e[s]=n[s],t=!0)}),t?e:void 0}requestHooks_(){var e;let t=[],n=Promise.resolve(this._request);for(null===(e=window.djInterceptors)||void 0===e||null===(e=e.request)||void 0===e||e.forEach(e=>{t.push(e)});t.length;)n=n.then(t.shift());return n}responseHooks_(){var e;const t=Object.assign(this._response,{config:this._request});let n=Promise.resolve(t);if(this.shouldReturnDirectly_())return n;let s=[];for(null===(e=window.djInterceptors)||void 0===e||null===(e=e.response)||void 0===e||e.forEach(e=>{s.push(e)});s.length;)n=n.then(s.shift());return n}send(e){const t=()=>{if(e)return this.triggerRequestEvent(),e(this._request._body,this.redirectUrl_(),this.headersModified_())};
1710return this.shouldSendDirectly_()?t():this.requestHooks_().then(e=>{e&&e.body&&this.deserializeBody_()}).catch(e=>{console.log(e)}).then(()=>this.handleProxyHook_()).then(e=>e||t())}mock(e){return e?this.parseResponse_(e).then(()=>{this.triggerResponseEvent()}).then(()=>this.responseHooks_()).then(({data:t,status:n})=>{if(!t)return e;if(t instanceof Response)return t;if(e.hasOwnProperty("data")){const s=this.canParseToJson_(e.data);return{status:n,data:this.isObject_(s)?JSON.stringify(t):t}}return e instanceof Response?new Response(JSON.stringify(t),{status:n,headers:e.headers,statusText:e.statusText}):void 0}).catch(()=>(this.triggerResponseEvent(),e)):Promise.resolve(e)}parseResponse_(e){if(this._response.status=e.status||200,e.hasOwnProperty("data")){this._response.headers=e.headers;const t=this.canParseToJson_(e.data);return this._response.data=this.isObject_(t)?t:e.data,Promise.resolve()}return e instanceof Response?(this._response.headers=this.parseHeaders_(e.headers),e.clone().json().then(e=>{this._response.data=e}).catch(()=>this._response.data=e)):Promise.resolve()}parseHeaders_(e){const t={};if("function"==typeof e.entries)for(const n of e.entries())t[n[0]]=n[1];return t}canParseToJson_(e){try{return JSON.parse(e)}catch{}return!1}isObject_(e){return"object"==typeof e}handleBeforeRequest_(){this.serializeBody_(),this.triggerBeforeRequestEvent()}async handleProxyHook_(){try{var e;const t=[];null===(e=window.djInterceptors)||void 0===e||null===(e=e.proxy)||void 0===e||e.forEach(e=>{t.push(e)});for(const e of t){const t=await e(this._request);if(t)return t}}catch(e){console.log(e)}}intercept(e){this.handleBeforeRequest_();const t=this.send(e);if(t instanceof Promise)return t.then(e=>this.mock(e))}}function _(){const e=function(e){if(this.readyState===window.XMLHttpRequest.DONE&&(e.requestProxy_||e.responseMock_))return e.responseMock_||(e.responseMock_=t=>e.requestProxy_.mock.apply(e.requestProxy_,[t])),e.responseMock_({status:this.status,data:this.responseType_&&"text"!=this.responseType_?this.response:this.responseText,headers:f(e)}).then(({data:e,status:t})=>(this.response=this.responseText=e,this.status=t,e))};!function(e){const t=window;t.__xhr=t.__xhr||t.XMLHttpRequest;const n=t.__xhr.prototype.setRequestHeader,s=t.__xhr.prototype.open,o=t.__xhr.prototype.send,r=function(e,t){e&&Object.getOwnPropertyNames(e).filter(e=>!t||!t.hasOwnProperty(e)).forEach(t=>{n.apply(this,[t,e[t]])})};function i(t){return function(){const n=this.hasOwnProperty(t+"_")?this[t+"_"]:this.xhr[t],s=(e[t]||{}).getter;return s&&s(n,this)||n}}function a(t){return function(n){const s=this.xhr,o=this,r=e[t];if("on"===t.substring(0,2))o[t+"_"]=n,s[t]=function(r){const i=e[t]&&e[t].call(o,s,r);i?i.then(()=>n.call(o,r)):n.call(o,r)};else{const e=(r||{}).setter;n=e&&e(n,o)||n,this[t+"_"]=n;try{s[t]=n}catch(e){}}}}function c(t){return function(){const n=[].slice.call(arguments);if(e[t]){const s=e[t].call(this,n,this.xhr);if(s&&s.then)return s.then(()=>this.xhr[t].apply(this.xhr,[].slice.call(arguments)))}return this.xhr[t].apply(this.xhr,n)}}t.XMLHttpRequest.prototype.setRequestHeader=function(e,t){return this._headers=Object.assign({},this._headers||{},{[e]:t}),n.apply(this,arguments)},t.XMLHttpRequest.prototype.open=function(e,t){return this._method=e||"GET",this._url=t,s.apply(this,arguments)},t.XMLHttpRequest.prototype.send=function(e){return this.requestProxy_=new h(this._url,this._method,this._headers,e),this.requestProxy_.intercept((e,t,n)=>{t&&(s.apply(this,[this._method,t]),r.apply(this,[this._headers,n])),r.apply(this,[n]),o.call(this,e)})},t.XMLHttpRequest=function(){const e=new t.__xhr;for(let t in e){"function"===typeof e[t]?this[t]=c(t):Object.defineProperty(this,t,{get:i(t),set:a(t),enumerable:!0})}this.xhr=e},t.XMLHttpRequest.prototype=t.__xhr.prototype,Object.assign(t.XMLHttpRequest,{UNSENT:0,OPENED:1,HEADERS_RECEIVED:2,LOADING:3,DONE:4}),t.__xhr}({onreadystatechange:e,onload:e,onloadend:e,addEventListener:function(t,n){const s=this;if(["load","loadend","timeout","error","readystatechange","abort"].includes(t[0]))return e.call(s,n)}})}function f(e){const t=e.getAllResponseHeaders().trim().split(/[\r\n]+/);var n={};
1710return t.forEach(e=>{const t=e.split(": "),s=t.shift(),o=t.shift();n[s]=o}),n}const v=["checkout","thank_you"],y=()=>{var e;v.includes(null===(e=window.C_SETTINGS)||void 0===e||null===(e=e.meta)||void 0===e||null===(e=e.page)||void 0===e?void 0:e.template_name)||(window.djInterceptors={request:new s,response:new s,track:new s,proxy:new s},_(),function(){const e=window.fetch;"function"==typeof e&&(window.fetch=function(t,n={}){const s=(null==n?void 0:n.method)||"GET";return new h(t,s,null==n?void 0:n.headers,null==n?void 0:n.body).intercept((s,o,r)=>(n.body=s,r&&(n.headers&&"function"==typeof n.headers.set?Object.getOwnPropertyNames(r).forEach(e=>n.headers.set(e,r[e])):(n.headers||(n.headers={}),Object.assign(n.headers,r))),t=o||t,e.call(this,t,n)))})}())}},function(e,t,n){"use strict";n.d(t,"a",(function(){return b}));var s=n(1),o=n(0);const r=(e,t)=>{e>=200&&e<300&&t()},i=e=>{var t;if(!e)return{};const n=e.quantity||1,s=e.add_quantity||e.quantity||1;let o={option1:"",option2:"",option3:""};return null===(t=e.options)||void 0===t||t.forEach((e,t)=>{o["option"+(t+1)]=e.value}),{product_id:e.product_id,variant_id:e.variant_id,variant:o,name:e.product_title,item_price:e.price,quantity:n,number:s,properties:e.properties,sku:e.sku,vendor:e.vendor,type:""}},a=[{path:/\/api\/customers\/sign_up$/,method:"post",events:{[o.q]:({body:e},t)=>{t({accout:e.email,sign_up_method:e.email.indexOf("@")<0?"手机号":"邮箱"})}}}],c=[{path:/\/api\/cart$/,method:"get",events:{[o.e]:({response:e},t)=>{r(e.status,()=>{var n;(n=e.data,"[object Object]"===Object.prototype.toString.call(n))&&t(e.data.cart)})}}},{path:/\/api\/search$/,method:"get",events:{[o.o]:({response:e,url:t},n)=>{r(e.status,()=>{const o=e.data.data||{},{total:r}=o;let i=o.keyword;i||(i=Object(s.b)(t).keyword),n({keyWord:i,total:r,hasResult:r>0,source:"api"})})}}},{path:new RegExp("/api/products/[0-9a-fA-F]{4}(?:[0-9a-fA-F]{4}-){4}[0-9a-fA-F]{12}$"),method:"get",events:{[o.s]:({response:e},t)=>{r(e.status,()=>{var n;t({product:null===(n=e.data)||void 0===n||null===(n=n.data)||void 0===n?void 0:n.product,selected:{},qty:1,source:"api"})})}}},{path:/\/api\/cart$/,method:"post",events:{[o.a]:({response:e},t)=>{r(e.status,()=>{var n;const s=null===(n=e.data.data)||void 0===n||null===(n=n.items)||void 0===n?void 0:n[0];t(i(s))})},[o.b]:({response:e},t)=>{r(e.status,()=>{t()})}}},{path:/\/api\/cart\/batch$/,method:"post",events:{[o.a]:({response:e},t)=>{r(e.status,()=>{var n;null===(n=e.data.items)||void 0===n||n.map(e=>{t(i(e))})})},[o.b]:({response:e},t)=>{r(e.status,()=>{t()})}}},{path:/\/api\/checkout\/order$/,method:"post",events:{[o.a]:({body:e,response:t},n)=>{r(t.status,()=>{var s;const o=null===(s=e.refer_info)||void 0===s?void 0:s.source;if("buy_now"==o){var r,a,c;const s=null===(r=t.data.data)||void 0===r||null===(r=r.items)||void 0===r?void 0:r[0],d=null===(a=e.refer_info)||void 0===a?void 0:a.pay_method,u=null===(c=t.data.data)||void 0===c?void 0:c.trade_id,l=Object.assign({},i(s),{source:o,pay_method:d,trade_id:u});n(l)}})},[o.f]:({body:e,response:t},n)=>{r(t.status,()=>{n({line_items:e&&e.line_items||[],refer_info:e&&e.refer_info||{}})})}}},{path:/\/api\/customers\/password_reset$/,method:"patch",events:{[o.n]:({response:e},t)=>{200===e.status?t({forget:!0}):422===e.status&&t({forget:!1})}}},{path:/\/api\/customers\/sign_up$/,method:"post",events:{[o.g]:({response:e},t)=>{r(e.status,()=>{t("register")})}}},{path:/\/api\/customers\/sign_in$/,method:"post",events:{[o.k]:({body:e,response:t},n)=>{const s=function(t,s){var o;n({login_method:e.email.indexOf("@")<0?"手机号":"邮箱",shop_name:null===(o=window.C_SETTINGS.shop)||void 0===o?void 0:o.shop_name,login_result:t,fail_reason:s||""})};if(200===t.status)s(!0);else if(422===t.status){const e=t.data.errors;s(!1,null!=e&&e.join?e.join(","):e)}}}},{path:/\/api\/customers\/sign_out$/,method:"post",events:{[o.l]:({response:e},t)=>{r(e.status,()=>{t()})}}},{path:/\/api\/customers\/newsletters$/,method:"post",events:{[o.j]:({response:e},t)=>{r(e.status,()=>{t()})}}},{path:/\/api\/cart\/[\w\-]+$/,method:"patch",events:{[o.b]:({response:e},t)=>{r(e.status,()=>{t(e.data.cart)}
1710)},[o.e]:({response:e},t)=>{r(e.status,()=>{t(e.data.cart)})},[o.c]:({body:e,response:t},n)=>{r(t.status,()=>{n({cart:t.data.cart,item:e})})}}},{path:/\/api\/cart\/[\w\-]+$/,method:"delete",events:{[o.b]:({response:e},t)=>{r(e.status,()=>{t(e.data.cart)})},[o.e]:({response:e},t)=>{r(e.status,()=>{t(e.data.cart)})},[o.d]:({body:e,response:t},n)=>{r(t.status,()=>{n({cart:t.data.cart,item:e})})}}}],d=(e,t,n)=>{const o=Object(s.c)(t).pathname;return e.find(e=>{const t=e.path;if(e.method!==n.toLowerCase())return!1;if(t instanceof RegExp){if(t.test(o))return!0}else if(t===o)return!0})},u=(e,t)=>{if(!e)return;const n=(e=>{var t;const n={};return null===(t=window.djInterceptors)||void 0===t||null===(t=t.track)||void 0===t||t.forEach((t,s)=>{var o;null!=e&&null!==(o=e.events)&&void 0!==o&&o[t.event]&&(n[t.event]=Object.assign({},n[t.event],t.params),(null==t.once||t.once)&&window.djInterceptors.track.eject(s))}),n})(e);Object.keys((null==e?void 0:e.events)||{}).forEach(o=>{e.events[o](t,e=>{["undefined","object"].includes(typeof e)&&(e=Object.assign({},e,{_extra:n[o]})),Object(s.d)(o,e)})})},l=location.origin+"__recently-viewed-productIds__",p=(e,t)=>{try{window.localStorage.setItem(e,JSON.stringify(t))}catch(e){console.error(e)}},h=e=>{try{const t=window.localStorage.getItem(e);return t&&JSON.parse(t)}catch(e){console.error(e)}},_=({product:e,selected:t,qty:n,quantity:r})=>{var i;let a=e,c=t;const{product:d,selected:u}=y()||{};(null==e?void 0:e.id)!==(null==d?void 0:d.id)||null!=d&&null!==(i=d.options)&&void 0!==i&&i.length||(a=d,c=u),Object(s.d)(o.s,{product:a||{},selected:c||{},qty:n||r||1,source:"pageview"})},f=(e,t,n)=>{if(C_SETTINGS.meta.page.template_name===t)try{window.addEventListener(e,n)}catch{}},v=(e,t)=>
1710{f("load",e,t)};function y(){let e=document.querySelector("#product-json");return e?JSON.parse(e.innerHTML):"function"==typeof $?$(document).data("djproduct"):void 0}const m=()=>{v("product",()=>{let e={product:{},selected:{},qty:1},t=y();t&&Object.assign(e,t),requestAnimationFrame(()=>_(e)),requestAnimationFrame(()=>{let e=h(l)||[];const n=t&&t.product&&t.product.id;if(n){const t=e.indexOf(n);-1!==t&&e.splice(t,1),e.unshift(n),p(l,e)}})}),Object(s.a)(o.r,(e,t)=>{"complete"===document.readyState&&(t&&t.source&&"initial_load"===t.source||_(t))})};function g(){m(),v("search",()=>{const e=Object(s.b)(location.search).q,t=Number.parseInt("",10)||0;Object(s.d)(o.o,{keyword:e,total:t,hasResult:t>0,keyWord:e,source:"pageview"})}),v("thank_you",()=>{var e;const t=null===(e=window.ORDER)||void 0===e?void 0:e.id,n=h("__thank_you_already_event_map__")||{};null!=n&&n[t]||(n[t]=!0,p("__thank_you_already_event_map__",n),Object(s.d)(o.p,Object.assign({},window.ORDER||{},{order_count:window.ORDER.customer&&window.ORDER.customer.order_count})))}),v("thank_you",()=>{Object(s.d)(o.m,Object.assign({},window.ORDER||{}))}),v("product",()=>{Object(s.d)(o.m,Object.assign({},y()||{}))})}function b(){Object(s.a)(o.h,(e,{url:t,method:n,body:s})=>{const o=d(a,t,n);u(o,{url:t,body:s})}),Object(s.a)(o.i,(e,{request:t,response:n})=>{const{url:s,method:o,body:r}=t,i=d(c,s,o);u(i,{url:s,method:o,body:r,response:n})}),g()}},function(e,t){try{(()=>{const e=e=>{const t=e.split("&&")[0];if(!t)return[];const n=t.indexOf("=");let s="";return-1!==n&&(s=t.slice(n+1)),s?s.split(";").filter(e=>e):[]},t=(e,t)=>{if(!t)return;if(/\/cuttlefish\//.test(t))return;return e.some(e=>{let n=t;return t.replace&&(n=t.replace("https:","")),n==e.replace("https:","")})},n=["application/javascript","text/javascript"],s=(e,t)=>{self.MainThread.upgradeScript(e,t)},o=o=>{const r=e(o);new MutationObserver(e=>{e.forEach(({addedNodes:e})=>{e.forEach(e=>{(e=>1===e.nodeType&&"SCRIPT"===e.tagName&&(!e.type||n.includes(e.type)))(e)&&(t(r,e.src)||"worker"==e.getAttribute("scope"))&&(e.type="text/spz-script",s(e.src,e))})})}).observe(document.documentElement,{childList:!0,subtree:!0})},r=o=>{const r=e(o),i=document.createElement,a=(e,s)=>e&&t(r,e)&&n.includes(s);document.createElement=function(e){const t=i.call(document,e);return"script"===e.toLowerCase()&&function(e){let t="",n="text/javascript";Object.defineProperty(e,"src",{get:function(){return t},set:function(o){t=o,e.setAttribute("src",o),a(t,n)&&(e.type="text/spz-script",s(t))}}),Object.defineProperty(e,"type",{get:function(){return n},set:function(s){n=s,a(t,n)&&(n="text/spz-script"),e.setAttribute("type",n)}});const o=e.setAttribute;e.setAttribute=function(){const t=Array.prototype.slice.call(arguments);"src"===t[0]?a(t[1],e.type)&&(e.type="text/spz-script",s(t[1])):"type"===t[0]&&a(e.src,t[1])&&(t[1]="text/spz-script"),o.apply(e,t)}}(t),t}};(()=>{const e="";e.includes("script_url")&&!e.includes("is_switch=0")&&(self.MainThread||(()=>{const e=window.C_SETTINGS.shop.cdn_domain+"cuttlefish/plugin",t=document.createElement("script");t.src=e+"/main.js",t.crossOrigin="anonymous",t.setAttribute("async",""),document.head.appendChild(t)})(),o(e),r(e))})()})()}catch(e){console.log(e)}},,,,,,function(e,t,n){n(13),n(6)},function(e,t,n){"use strict";n.r(t);var s=n(2),o=n(4),r=n(5),i=n(3);Object(s.a)(),Object(o.a)(),Object(i.a)(),Object(r.a)()}]);/* top_v2-end */
1711</script>
1711
1712<style id="spz-theme-vars">
1713  :root {
1714    --spz-theme-pdp-title-font-family: var(--font-heading-family);
1715    --spz-theme-pdp-title-font-size: calc(var(--type-heading-font-size) * 0.8);
1716    --spz-theme-pdp-title-line-height: 1.25;
1717    --spz-theme-pdp-title-font-weight: var(--font-heading-weight);
1718    --spz-theme-pdp-title-color: var(--color-product-title-text);
1719    --spz-theme-pdp-subtitle-font-size: var(--type-text-font-size);
1720    --spz-theme-pdp-subtitle-line-height: 1.2;
1721    --spz-theme-pdp-subtitle-font-weight: var(--font-body-weight);
1722    --spz-theme-pdp-subtitle-color: #9F9F9F;
1723    --spz-theme-pdp-price-font-family: var(--font-heading-family);
1724    --spz-theme-pdp-price-font-size: calc(var(--type-heading-font-size) * .8);
1725    --spz-theme-pdp-price-line-height: 1.2;
1726    --spz-theme-pdp-price-font-weight: 600;
1727    --spz-theme-pdp-price-color: var(--color-price-text);
1728    --spz-theme-pdp-compare-price-font-size: calc(var(--type-text-font-size) + 2px);
1729    --spz-theme-pdp-compare-price-line-height: 1.2;
1730    --spz-theme-pdp-compare-price-font-weight: var(--font-body-weight);
1731    --spz-theme-pdp-compare-price-color: var(--color-compare-at-price-text);
1732    --spz-theme-pdp-save-badge-font-size: calc(var(--type-text-font-size) - 2px);
1733    --spz-theme-pdp-save-badge-line-height: 1.2;
1734    --spz-theme-pdp-save-badge-font-weight: 600;
1735    --spz-theme-pdp-save-badge-color: var(--color-save-price-text);
1736    --spz-theme-pdp-save-badge-border: 1px solid currentColor;
1737    --spz-theme-pdp-save-badge-radius: 2px;
1738    --spz-theme-pdp-save-badge-padding: 0px 4px;
1739    --spz-theme-pdp-variant-title-font-family: var(--font-body-family);
1740    --spz-theme-pdp-variant-title-font-size: calc(var(--type-text-font-size) + 2px);
1741    --spz-theme-pdp-variant-title-font-weight: 600;
1742    --spz-theme-pdp-variant-font-size: var(--type-text-font-size);
1743    --spz-theme-pdp-variant-line-height: 1.15;
1744    --spz-theme-pdp-variant-font-weight: var(--font-body-weight);
1745    --spz-theme-pdp-variant-color: var(--color-body-text-75);
1746    --spz-theme-pdp-variant-border: 1px solid var(--color-border);
1747    --spz-theme-pdp-variant-radius: var(--btn-fixed-border-radius);
1748    --spz-theme-pdp-variant-min-width: auto;
1749    --spz-theme-pdp-variant-min-height: auto;
1750    --spz-theme-pdp-variant-max-width: none;
1751    --spz-theme-pdp-variant-padding: 13px 16px;
1752    --spz-theme-pdp-variant-gap: 12px;
1753    --spz-theme-pdp-qty-label-font-family: var(--font-body-family);
1754    --spz-theme-pdp-qty-label-font-size: calc(var(--type-text-font-size) + 2px);
1755    --spz-theme-pdp-qty-label-line-height: 1.25;
1756    --spz-theme-pdp-qty-label-font-weight: 600;
1757    --spz-theme-pdp-qty-label-color: var(--color-body-text);
1758    --spz-theme-pdp-qty-font-size: calc(var(--type-text-font-size) + 2px);
1759    --spz-theme-pdp-qty-radius: 2px;
1760    --spz-theme-pdp-atc-button-font-size: calc(var(--type-text-font-size) + 2px);
1761    --spz-theme-pdp-atc-button-line-height: 1.25;
1762    --spz-theme-pdp-atc-button-font-weight: 500;
1763    --spz-theme-pdp-atc-button-height: 52px;
1764    --spz-theme-pdp-atc-button-padding: 16px 16px 16px 16px;
1765    --spz-theme-pdp-atc-button-radius: var(--btn-border-radius);
1766    --spz-theme-pdp-buy-button-font-size: calc(var(--type-text-font-size) + 2px);
1767    --spz-theme-pdp-buy-button-line-height: 1.25;
1768    --spz-theme-pdp-buy-button-font-weight: 500;
1769    --spz-theme-pdp-stock-note-font-size: var(--type-text-font-size);
1770    --spz-theme-pdp-stock-note-line-height: 1.2;
1771    --spz-theme-pdp-stock-note-font-weight: var(--font-body-weight);
1772    --spz-theme-pdp-stock-note-color: var(--color-price-text);
1773    --spz-theme-plp-title-font-size: 24px;
1774    --spz-theme-plp-title-line-height: 1.3;
1775    --spz-theme-plp-title-font-weight: 400;
1776    --spz-theme-plp-title-font-family: var(--font-body-family);
1777    --spz-theme-plp-title-color: var(--color-general-heading-text);
1778    --spz-theme-plp-card-title-font-size: var(--type-text-font-size);
1779    --spz-theme-plp-card-title-line-height: 1.25;
1780    --spz-theme-plp-card-title-font-weight: var(--font-heading-weight);
1781    --spz-theme-plp-card-title-font-family: var(--font-heading-family);
1782    --spz-theme-plp-card-title-color: var(--color-product-title-text);
1783    --spz-theme-plp-card-price-font-size: calc(var(--type-text-font-size) + 2px);
1784    --spz-theme-plp-card-price-font-weight: 600;
1785    --spz-theme-plp-card-price-color: var(--color-price-text);
1786    --spz-theme-plp-card-compare-font-size: var(--type-text-font-size);
1787    --spz-theme-plp-card-compare-line-height: 1.15;
1788    --spz-theme-plp-card-compare-font-weight: var(--font-body-weight);
1789    --spz-theme-plp-card-compare-color: var(--color-compare-at-price-text);
1790    --spz-theme-plp-badge-font-size: 12px;
1791    --spz-theme-plp-badge-padding: 2px 4px;
1792    --spz-theme-plp-badge-radius: var(--global-border-radius);
1793    --spz-theme-plp-badge-color: var(--color-label-text);
1794    --spz-theme-plp-soldout-color: var(--color-sold-label-text);
1795    --spz-theme-plp-quick-add-color: var(--color-quick-shop-btn-bg);
1796    --spz-theme-plp-swatch-gap: 8px;
1797    --spz-theme-plp-swatch-radius: var(--global-fixed-border-radius);
1798    --spz-theme-plp-card-image-radius: var(--global-small-border-radius);
1799    --spz-theme-plp-card-image-aspect-ratio: calc(100 / 133.33);
1800    --spz-theme-plp-card-radius: 0;
1801    --spz-theme-cart-drawer-width: 468px;
1802    --spz-theme-cart-drawer-radius: 0;
1803    --spz-theme-cart-title-font-size: calc(var(--type-heading-font-size) * 0.8);
1804    --spz-theme-cart-title-line-height: 1.17;
1805    --spz-theme-cart-title-font-weight: var(--font-heading-weight);
1806    --spz-theme-cart-item-title-font-size: var(--type-text-font-size);
1807    --spz-theme-cart-item-title-line-height: 1.25;
1808    --spz-theme-cart-item-title-font-weight: var(--font-body-weight);
1809    --spz-theme-cart-item-title-font-family: var(--font-body-family);
1810    --spz-theme-cart-item-title-color: var(--color-product-title-text);
1811    --spz-theme-cart-item-variant-font-size: var(--type-text-font-size);
1812    --spz-theme-cart-item-variant-color: var(--color-body-text-70);
1813    --spz-theme-cart-item-price-font-size: calc(var(--type-text-font-size) + 2px);
1814    --spz-theme-cart-item-price-line-height: 1.25;
1815    --spz-theme-cart-item-price-font-weight: 500;
1816    --spz-theme-cart-item-price-color: var(--color-price-text);
1817    --spz-theme-cart-qty-radius: var(--global-border-radius);
1818    --spz-theme-cart-qty-border: 1px solid var(--color-border);
1819    --spz-theme-cart-item-image-radius: var(--global-fixed-border-radius);
1820    --spz-theme-cart-summary-card-bg: var(--color-cart-subtotal-bg);
1821    --spz-theme-cart-checkout-bg: var(--color-primary-btn-bg);
1822    --spz-theme-cart-checkout-color: var(--color-primary-btn-text);
1823    --spz-theme-cart-checkout-height: 46px;
1824    --spz-theme-cart-checkout-font-size: calc(var(--type-text-font-size) + 2px);
1825    --spz-theme-cart-checkout-font-weight: 700;
1826    --spz-theme-cart-checkout-radius: var(--btn-border-radius);
1827    --spz-theme-atc-modal-width: 495px;
1828    --spz-theme-atc-modal-max-height: 86vh;
1829    --spz-theme-atc-modal-border-width: 0;
1830    --spz-theme-atc-modal-radius: var(--global-small-border-radius);
1831    --spz-theme-page-width: 1440px;
1832    --spz-theme-page-gutter: var(--page-spacing);
1833    --spz-theme-grid-gap-x: 40px;
1834    --spz-theme-grid-gap-y: 44px;
1835    --spz-theme-button-radius: var(--btn-border-radius);
1836    --spz-theme-button-border-width: 1px;
1837    --spz-theme-button-hover-bg-color: var(--color-primary-btn-bg);
1838    --spz-theme-button-hover-text-color: var(--color-primary-btn-text);
1839    --spz-theme-input-bg-color: transparent;
1840    --spz-theme-input-text-color: var(--color-body-text);
1841    --spz-theme-input-border-color: var(--color-border);
1842    --spz-theme-input-radius: var(--global-border-radius);
1843    --spz-theme-toast-radius: 2px;
1844    --spz-theme-progress-radius: 1px;
1845    --spz-theme-pill-radius: 9999px;
1846  }
1847  #cart-drawer-modal, [data-spz-theme-scope="cart-drawer"] {
1848    --spz-theme-cart-item-price-font-size: var(--type-text-font-size);
1849  }
1850  @media (max-width: 959px) {
1851    :root {
1852      --spz-theme-pdp-title-font-size: calc(var(--type-heading-font-size) * 0.47);
1853      --spz-theme-pdp-variant-title-font-size: var(--type-text-font-size);
1854      --spz-theme-pdp-variant-padding: 10px 16px;
1855      --spz-theme-pdp-atc-button-height: 42px;
1856      --spz-theme-pdp-atc-button-padding: 12px 12px 12px 12px;
1857      --spz-theme-cart-drawer-width: 84.62%;
1858      --spz-theme-page-gutter: 16px;
1859      --spz-theme-grid-gap-x: 15px;
1860      --spz-theme-grid-gap-y: 24px;
1861      --spz-theme-toast-radius: 0;
1862    }
1863  }
1864</style>
1865
1866<script type="text/javascript">
1867/* golden-top-start */!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="https://static.staticdj.com/",n(n.s=13)}([function(e,t,n){"use strict";n.d(t,"c",(function(){return r})),n.d(t,"a",(function(){return i})),n.d(t,"d",(function(){return o})),n.d(t,"e",(function(){return a})),n.d(t,"m",(function(){return c})),n.d(t,"j",(function(){return s})),n.d(t,"l",(function(){return u})),n.d(t,"b",(function(){return d})),n.d(t,"h",(function(){return l})),n.d(t,"f",(function(){return m})),n.d(t,"g",(function(){return f})),n.d(t,"i",(function(){return _})),n.d(t,"k",(function(){return g}));const r=()=>{var e=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream,t=/(android)/i.test(navigator.userAgent);return e?1:t?2:3},i=()=>{String.prototype.startsWith||Object.defineProperty(String.prototype,"startsWith",{value:function(e,t){return t=!t||t<0?0:+t,this.substring(t,t+e.length)===e}});var e=window.location.pathname||"";return"/"==e||e.startsWith("/home")||e.startsWith("/index")?"index":e.startsWith("/products/")?"product":e.startsWith("/collections/")||e.startsWith("/products")?"product_group":e.startsWith("/promotions/")?"activity":e.startsWith("/search")?"search":e.startsWith("/checkout/")?"checkout":"other"},o=function(e){let t=e&&e.discount_applications;if("string"==typeof t)try{t=JSON.parse(t)}catch(e){return}if(Array.isArray(t))return t.map((function(e){return e&&e.discount_id})).join(",")},a=function(e){return(e&&e.line_items||[]).reduce((function(e,t){return e+(t.quantity||0)}),0)},c=(e,t)=>{var n;const r=new CustomEvent(e,{detail:t||null,bubbles:!0});null===(n=document.body)||void 0===n||n.dispatchEvent(r)},s=(e,t)=>{"dj.addToCart"===e&&window.__SEAHORSE_BUS.addEventListener(e,(function(n){const r={type:e,detail:n};n&&!n.__is_seahorse_event||t(r,n)})),document.addEventListener(e,(function(n){"dj.addToCart"===e&&n.detail&&n.detail.__is_seahorse_event||t(n,n.detail)}))},u=(e,t,n,r=!1)=>{var i=new Date;return i.setTime(i.getTime()+31536e6),document.cookie=e+"="+encodeURIComponent(t)+";expires="+(n||i).toGMTString()+";domain="+location.host.split(".").map((function(e,t,n){return 0==t&&n.length>2?"":e})).join(".")+";path=/"+(r?";SameSite=None;Secure":""),!0},d=e=>{var t=new RegExp("(^| )"+e+"=([^;]*)(;|$)"),n=document.cookie.match(t);return n?decodeURIComponent(n[2]):""},l=()=>window&&window.sessionStorage&&"function"==typeof window.sessionStorage.setItem&&"function"==typeof window.sessionStorage.getItem,m=(e="")=>e.split("/")[2]||"",f=()=>C_SETTINGS.meta&&C_SETTINGS.meta.page&&14===C_SETTINGS.meta.page.template_type,_=()=>C_SETTINGS.meta&&C_SETTINGS.meta.page&&42===C_SETTINGS.meta.page.template_type,g=function(e){return"number"!=typeof e||isNaN(e)?void 0:Math.round(10*e)/10}},function(e,t,n){"use strict";n.d(t,"c",(function(){return o})),n.d(t,"b",(function(){return r})),n.d(t,"a",(function(){return i}));const r="_extra",i={UTM:atob("c2hvcGxhenphX2FfcA=="),UTM_PARAMS:"utm_a_p",SESSION_ID_OLD:"session_id",SESSION_ID_NEW:"ss_id_a_p"},o="data-track"},function(e,t,n){"use strict";n.d(t,"h",(function(){return m})),n.d(t,"e",(function(){return f})),n.d(t,"d",(function(){return _})),n.d(t,"g",(function(){return g})),n.d(t,"c",(function(){return p})),n.d(t,"f",(function(){return h})),n.d(t,"a",(function(){return v}));var r=n(0);n.d(t,"b",(function(){return r.b}));var i=n(1);let o=0;const a={name:"fbclid",get:()=>Object(r.b)(a.name),set:()=>{var e=new RegExp(`(^|&)${a.name}=([^&]*)(&|$)`),t=window.location.search.substring(1).match(e);if(null!=t&&t[2]){var n="fb.1."+(new Date).getTime()+"."+t[2];Object(r.l)(a.name,n)}}},c={name:"_epik",get:()=>{try{const t=Object(r.b)(c.name);if(t)return t;var e=window.location.search.substring(1).match(/(^|&)epik=([^&]*)(&|$)/);
1867return null!=e&&e[2]?decodeURIComponent(e[2]):""}catch(e){return""}}},s={name:"ttclid",get:()=>Object(r.b)(s.name),set:()=>{var e=new RegExp(`(^|&)${s.name}=([^&]*)(&|$)`),t=window.location.search.substring(1).match(e);null!=t&&t[2]&&Object(r.l)(s.name,t[2])}},u={name:i.a.SESSION_ID_NEW,get:()=>Object(r.b)(u.name),set:()=>{let e=u.get()||Object(r.b)(i.a.SESSION_ID_OLD);const t=!e;e||(e=(new Date).getTime().toString()+(400*Math.random().toFixed(2)+100).toString());const n=new Date((new Date).getTime()+18e5),o="https:"===location.protocol;return Object(r.l)(u.name,e,n,o),Object(r.l)(i.a.SESSION_ID_OLD,e,n,o),{isNew:t}}},d={name:atob("c2hvcGxhenphX3NvdXJjZQ=="),get:()=>{try{return Object(r.b)(d.name)||localStorage[d.name]}catch(e){}return""},set:()=>{var e=document.referrer,t=location.href,n=navigator.userAgent,i=([["Facebook",/(facebook)|(fbclid=.+)/i,/fbclid=.+/,/FBAV|FBAN|FBIOS/i],["GoogleAds",/gclid=.+/i,/gclid=.+/i,0],["Google",/google/i,0,0],["Instagram",/instagram/i,0,/instagram/i],["Pinterest",/(pinterest)|(epik=.+)/i,/epik=.+/i,/pinterest/i],["Snapchat",/snapchat/i,0,/snapchat/i],["TikTok",/ads.tiktok/i,0,/tiktok/i],["Mailchimp",/mc_cid=.+/i,0,0],["Baidu",/baidu/i,0,0],["YouTube",/youtube/i,0,/youtube/i],["Twitter",/(twitter)|(t.co)/i,0,/twitter/i],["LinkedIn",/linkedin/i,0,/linkedin/i],["WhatsApp",/whatsapp/i,0,/whatsapp/i],["Reddit",/reddit/i,0,0],["Yahoo",/yahoo/i,0,0],["Bing",/bing/i,0,0],["Yandex",/yandex/i,0,0]].find((function(r){return r[1]&&r[1].test(e)||r[2]&&r[2].test(t)||r[3]&&r[3].test(n)}))||[""])[0],o=d.name,a=new Date((new Date).getTime()+6048e5);d.get()||Object(r.l)(o,JSON.stringify({$first_visit_url:t,$latest_referrer_host:i,expire:a.getTime()}),a)&&function(){try{localStorage[o]=d.get()}catch(e){}}(),!d.get()&&localStorage[o]&&((JSON.parse(localStorage[o])&&JSON.parse(localStorage[o]).expire||0)<(new Date).getTime()||Object(r.l)(o,localStorage[o])),d.get()&&!localStorage[o]&&function(){try{localStorage[o]=d.get()}catch(e){}}()}},l={name:"client_id",get:()=>Object(r.b)(l.name)},m=()=>{(()=>{const e=l.get();d.get()||(o=1),e&&"null"!=e||(o=1)})(),a.set(),s.set();const e=u.set();return d.set(),{sessionId:e}},f=()=>o,_=()=>a.get(),g=()=>s.get(),p=()=>c.get(),h=()=>u.get(),v=()=>l.get()},function(e,t,n){"use strict";n.d(t,"a",(function(){return i}));var r=n(0);const i=(e=!0)=>{if(e)return window.djTracker=window.djTracker||[],void(window.djTrack=window.djTrack||function(e,t){window.djTracker.push({eventName:e,params:t})});window.djTrack=function(e,t={}){e&&Object(r.m)("dj.track",{eventName:e,params:t})},(window.djTracker||[]).map(({eventName:e,params:t})=>{window.djTrack(e,t)})}},,,,,,,,,,function(e,t,n){"use strict";n.r(t);var r=n(0),i=n(1);const o=e=>{try{const t=localStorage.getItem(e);if(!t)return"";const n=JSON.parse(t);return!n||!n.expire||n.expire<(new Date).getTime()?"":n.value||""}catch(e){return""}},a=(e,t,n)=>{try{localStorage.setItem(e,JSON.stringify({value:t,expire:n}))}catch(e){}},c=e=>{let t=Object(r.b)(e);return t||(t=o(e),t&&Object(r.l)(e,t,new Date((new Date).getTime()+18e5))),t},s=(e,t)=>{const n=(new Date).getTime()+18e5;Object(r.l)(e,t,new Date(n)),a(e,t,n)},u={name:"last_template_name",get:()=>c(u.name),set:e=>{s(u.name,e)}},d={name:"latest_referrer",get:()=>c(d.name),set:e=>{s(d.name,e)}},l={name:"last_land_url",get:()=>c(l.name),set:(e,t)=>{if(Object(r.i)())return;const n=e.sessionId.isNew;if(Object(r.g)()&&!n)return;let i=l.get(),o=u.get(),a=d.get();const c=Object(r.f)(document.referrer),m=location.host,f=c&&m&&c!==m,_=c===m&&"admin"===(document.referrer||"").split("/")[3],g=!document.referrer;var p,h;(f||_||g||n&&c===m)&&(i=location.href,o=(null===(p=C_SETTINGS.meta)||void 0===p||null===(h=p.page)||void 0===h?void 0:h.template_name)||"",a=document.referrer);i&&s(l.name,i),o&&u.set(o),a&&d.set(a)}},m=()=>{let e=SHOP_PARAMS.fbq_pv_event_id;return e||(e=(new Date).getTime().toString()+(400*Math.random().toFixed(2)+100).toString(),Object.defineProperty(SHOP_PARAMS,"fbq_pv_event_id",{configurable:!1,get:()=>e,set:()=>{console.log("[golden] SHOP_PARAMS.fbq_pv_event_id 生成后不允许修改")}})),e},f=()=>{const e=new URLSearchParams(window.location.search);return["utm_source","utm_medium","utm_campaign","utm_term","utm_content"].map(t=>{const n=e.get(t);return n?`${t}=${encodeURIComponent(n)}`:null}).filter(e=>null!==e).join("&")};function _(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,g(r.key),r)}}function g(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}const p="image",h="beacon",v="event_info",S="base_property",b="extra_properties";let w=function(e,t){return n=function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.track=this.track.bind(this),this.distinct_id="",this.trackParams={$screen_height:Number(screen.height)||0,$screen_width:Number(screen.width)||0,$referrer:document.referrer,$referrer_host:document.referrer?document.referrer.split("/")[2]:"",$title:document.title,$url:()=>location.href,$url_path:location.pathname},this.eventInfo={},this.tempTrackParams={}},(r=[{key:e,value:function(e,t){return navigator.sendBeacon(this.getServerUrlWithEvent_(t),this.get
1867SendData_(e))}},{key:t,value:function(e,t){const n=document.createElement("img");return n.width=1,n.height=1,n.src=this.getSendUrl_(this.getServerUrlWithEvent_(t),e),!0}},{key:"getSendUrl_",value:function(e,t){const n=this.base64Encode_(t),r="crc="+this.hashCode_(n);return-1!==e.indexOf("?")?e+"&data="+encodeURIComponent(n)+"&ext="+encodeURIComponent(r):e+"?data="+encodeURIComponent(n)+"&ext="+encodeURIComponent(r)}},{key:"getSendData_",value:function(e){const t=this.base64Encode_(e),n="crc="+this.hashCode_(t);return"data="+encodeURIComponent(t)+"&ext="+encodeURIComponent(n)}},{key:"base64Encode_",value:function(e){return btoa(encodeURIComponent(e).replace(/%([0-9A-F]{2})/g,(function(e,t){return String.fromCharCode("0x"+t)})))}},{key:"hashCode_",value:function(e){if("string"!=typeof e)return 0;var t=0;if(0==e.length)return t;for(var n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;return t}},{key:"getProperties_",value:function(e,t){let n=Object.assign({},this.trackParams,this.getEventInfo(e),this.tempTrackParams,t);for(const e in n){let t=n[e];t instanceof Function&&(t=t()),n[e]=t}return n}},{key:"getDistinctId_",value:function(){return this.distinct_id||(new Date).getTime().toString()+(400*Math.random().toFixed(2)+100).toString()}},{key:"getTrackId_",value:function(){return Number(String(Math.random()).slice(2,5)+String(Math.random()).slice(2,4)+String((new Date).getTime()).slice(-4))}},{key:"clearTemp_",value:function(){this.tempTrackParams={}}},{key:"track",value:function(e,t){const n={distinct_id:this.getDistinctId_(),_track_id:this.getTrackId_(),type:"track",event:e,properties:this.getProperties_(e,t)};n.properties.client_id||(n.properties.client_id="2");const r=JSON.stringify(n);this[this.getSendType_()](r,e)||this[p](r,e),this.clearTemp_()}},{key:"getSendType_",value:function(){return this.sendType_||("object"==typeof navigator&&"function"==typeof navigator.sendBeacon?this.sendType_=h:this.sendType_=p),this.sendType_}},{key:"getServerUrl_",value:function(){if(!this.serverUrl_){let e=window.C_SETTINGS.sa_server_url;this.getSendType_()===h&&(e=e.replace("/sa?","/beacon/sa?")+"&gzip=0"),this.serverUrl_=e.replace(/\/sa$/,"/sa.gif").replace(/(\/sa)(\?[^\/]+)$/,"/sa.gif$2")}return this.serverUrl_}},{key:"getServerUrlWithEvent_",value:function(e){let t=this.getServerUrl_();if(e){const n=-1!==t.indexOf("?")?"&":"?";t=t+n+"event="+encodeURIComponent(e)}return t}},{key:"getEventInfo",value:function(e){const t=this.eventInfo[e];return t?0===Object.keys(t).length?{}:{[v]:JSON.stringify(t)}:{}}},{key:"registerPage",value:function(e,t=!1){t?this.tempTrackParams=e:this.trackParams=Object.assign({},this.trackParams,e||{})}},{key:"registerPageOnce",value:function(e){this.tempTrackParams={...this.tempTrackParams,...e}}},{key:"registerBaseInfo",value:function(e,t){if(!e||!t)return;let n=(this.eventInfo[e]||{})[S];this.eventInfo[e]={...this.eventInfo,[S]:Object.assign({},n||{},t||{})}}},{key:"registerExtraInfo",value:function(e,t,n){if(!e||null==t||!t.function_name)return;let r=(this.eventInfo[e]||{})[b]||[];r=r.filter(e=>e.function_name!==t.function_name),n||r.push({...t}),this.eventInfo[e]={...this.eventInfo[e]||{},[b]:r}}},{key:"identify",value:function(e){this.distinct_id=e}}])&&_(n.prototype,r),i&&_(n,i),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r,i}(h,p);var y=n(2),T=n(3);const k=function(){var e;const t=((null===(e=C_SETTINGS.theme)||void 0===e?void 0:e.merchant_theme_name)||"").replace(/\s/g,"");return{Blackwind:"BlackWind",SnowinSummer:"SnowInSummer","Amazing-BuyonAmazon":"Amazing"}[t]||t},O=function(){let e="";try{e=window.ORDER&&window.ORDER.checkout_page_type||("string"==typeof(window.ORDER&&window.ORDER.config)?JSON.parse(window.ORDER.config).page_type:"")}catch(e){}return e},j=e=>{var t;window.sa=new w,window.sa.registerPage((({initCookieResult:e})=>{var t,n,o,a,c,s,_,g,p,h,v,S,b;return{platform:"shop",client:3==Object(r.c)()?"pc":"mobile",client_id:function(){return Object(y.a)()||"1"},session_id:Object(y.f)(),new_session:e.sessionId.isNew?1:0,store_id:(null===(t=C_SETTINGS.shop)||void 0===t?void 0:t.shop_id)||"",store_tz:(null===(n=C_SETTINGS.shop)||void 0===n?void 0:n.time_zone)||"",theme_name:k(),theme_version:(null===(o=C_SETTINGS.theme)||void 0===o?void 0:o.theme_version_id)||"",template_name:(null===(a=C_SETTINGS.meta)||void 0===a||null===(c=a.page)||void 0===c?void 0:c.template_name)||"",template_type:(null===(s=C_SETTINGS.meta)||void 0===s||null===(_=s.page)||void 0===_?void 0:_.template_type)||"",root_url:(null===(g=C_SETTINGS.routes)||void 0===g?void 0:g.root)||"",user_agent:navigator.userAgent,env_tag:[Object(y.b)("awesomeab")].filter(
1867Boolean).join(","),c_id:Object(y.b)("_c_id"),tracking_consent:function(){return Object(y.b)("_tracking_consent")},is_new_client:Object(y.e)(),event_id:m(),connection_type:navigator.connection&&navigator.connection.effectiveType,rtt:navigator.connection&&navigator.connection.rtt,downlink:navigator.connection&&navigator.connection.downlink,checkout_step:-1!=location.href.indexOf("/thank_you")?"checkout_result":window.ORDER&&window.ORDER.step,checkout_page_type:O(),AD_ttc:Object(y.g)(),AD_epik:function(){return Object(y.c)()},login_customer_id:(null===(p=C_SETTINGS.customer)||void 0===p?void 0:p.customer_id)||"",customer_email:(null===(h=C_SETTINGS.customer)||void 0===h?void 0:h.customer_email)||"",resource_id:(null===(v=C_SETTINGS.meta)||void 0===v||null===(S=v.page)||void 0===S?void 0:S.resource_id)||"",[atob("c2hvcGxhenphX2FfcA==")]:f()||Object(y.b)(i.a.UTM_PARAMS)||Object(y.b)(i.a.UTM)||"",market_id:(null===(b=C_SETTINGS.market)||void 0===b?void 0:b.market_id)||"",last_land_url:l.get(),last_template_name:u.get(),$latest_referrer:d.get(),event_time:function(){return Date.now()}}})({initCookieResult:e})),window.sa.identify((null===(t=C_SETTINGS.customer)||void 0===t?void 0:t.customer_id)||Object(y.a)())};var I;(()=>{const e=Object(y.h)();((e,t="v2")=>{l.set(e,t)})(e),j(e),Object(T.a)()})(),null===(I=window.sa)||void 0===I||I.track("$pageview")}]);/* golden-top-end */
1868</script>
1868
1869
1870
1871<script type="text/javascript">Object.assign(window.AD_TRACK_ASSETS || (window.AD_TRACK_ASSETS={}),{"golden_world":"golden_world.PSV6FO2D.js"});</script>
1871
1872<!-- meta_sdk start --->
1873<script>
1874try{(function(){!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version="2.0";n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,"script","https://connect.facebook.net/en_US/fbevents.js");var key1=atob("U0hPUF9QQVJBTVM=");var key2="C_SETTINGS";var id=new Date().getTime().toString()+(Math.random().toFixed(2)*400+100).toString();var addPvEId=function(key){var _window_key;return window[key]=Object.assign(window[key]||{},{fbq_pv_event_id:((_window_key=window[key])===null||_window_key===void 0?void 0:_window_key.fbq_pv_event_id)||id})};addPvEId(key1);addPvEId(key2)})()}catch(e){}
1875</script>
1875
1876<!-- meta_sdk end --->
1877<!-- track_config start -->
1878<script>
1879try{(function(){var a="AD_TRACK_ASSETS";var c="track_config";var r={"meta":{"pixels":[{"pixel":"549769354704","delay_second":0,"purchase_total_price":true,"exclude_freight_insurance":false}]}};var n=window;var t;Object.assign(n[a]||(n[a]={}),(t={},t[c]=n[a][c]?Object.assign(n[a][c],r):r,t))})()}catch(a){}
1880</script>
1880
1881<!-- track_config end -->
1882
1883</head>
1884  <body class="nova template-cart m-0 type-text-font-family leading-1.3" id="nova-theme"  data-button-hover-animation=enlarge_hover>
1885    <style>
1886      .back-to-top {
1887        position: fixed;
1888        right: 16px;
1889        bottom: 34px;
1890        width: 50px;
1891        height: 50px;
1892        background-color: rgba(41,41,41,.4);;
1893        transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
1894        z-index: calc(var(--z-index-fixed) + 5);
1895      }
1896      .back-to-top[show] { transform: translateY(0); }
1897      @media (min-width: 960px) {
1898        .back-to-top {
1899          right: 32px;
1900          bottom: 24px;
1901        }
1902      }
1903    </style>
1904    <div class="hidden back-to-top flex items-center justify-center rounded-full cursor-pointer shadow" id="top-button" @tap="nova-theme.scrollTo(position='top');">
1905        <svg class="" width="16" height="18" fill="#FFF" xmlns="http://www.w3.org/2000/svg"><g><path d="M7.58 4.333a.6.6 0 0 1 .848 0l7.283 7.283a.3.3 0 0 1 0 .425l-.764.763a.3.3 0 0 1-.424 0L8.85 7.131V17.7a.3.3 0 0 1-.3.3H7.47a.3.3 0 0 1-.3-.3V7.118l-5.686 5.686a.3.3 0 0 1-.424 0l-.764-.764a.3.3 0 0 1 0-.424l7.283-7.283ZM0 .3A.3.3 0 0 1 .3 0h15.4a.3.3 0 0 1 .3.3v1.06a.3.3 0 0 1-.3.3H.3a.3.3 0 0 1-.3-.3V.3Z"/></g></svg>
1906    </div>
1907    <spz-observer layout="logic" value="500" @scrollexceedboundary="top-button.toggleClass(class='hidden', force=false);" @scrollnotexceedboundary="top-button.toggleClass(class='hidden', force=true);" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-observer>
1908  <template id="product-snippet-template">
1909  <div>
1910    ${(function(){
1911      const get_random_six_digits = () => {
1912        return Math.random().toString().slice(-6)
1913      };
1914      const wholesale_enabled = false;
1915      const setting_product_image_display = "133.33%";
1916      const product_image = data.image;
1917      const secondary_image = data.secondImage;
1918      const image_width = product_image.width;
1919      let image_height = product_image.height;
1920      if(setting_product_image_display == '100%'){
1921        image_height = image_width
1922      }else if(setting_product_image_display == '133.33%'){
1923        image_height = image_width * 1.3333;
1924      };
1925      const product_image_hover_on = true && !!secondary_image.src;
1926      const has_save_label = true && ((+data.compare_at_price) > (+data.price));
1927      const is_single_variant = data.variants.length == 1;
1928      const min_price_variant_href = (data.min_price_variant && data.min_price_variant.available) ? data.min_price_variant.withinUrl : data.withinUrl;
1929      const retail_price_max = data.retail_price_max || data.compare_at_price_max;
1930      const THUMBNAILS_MAX_SIZE = 3;
1931      const thumbnails = data.thumbVariants.slice(0, THUMBNAILS_MAX_SIZE);
1932      const image_wrap_id = 'image_wrap_' + get_random_six_digits();
1933      const image_carousel_id = 'image_carousel_' + get_random_six_digits();
1934      const thumbnails_selector_id = 'thumbnails_selector_' + get_random_six_digits();
1935      const form_id = 'form_' + get_random_six_digits();
1936      const mixed_wholesale = data.mixed_wholesale;
1937      return `
1938        <div class="product-snippet__img-wrapper relative" id="${image_wrap_id}">
1939          <a
1940            class="product-snippet__img-link relative block overflow-hidden"
1941            spz-href="${data.withinUrl}"
1942            ${product_image_hover_on?"has-secondary-image":""}
1943          >
1944            <spz-img
1945              class="product-snippet__img product-snippet__img_main"
1946              layout="responsive"
1947              width="${image_width}"
1948              height="${image_height}"
1949              src="${product_image.src}"
1950              alt="${product_image.alt}"
1951              object-fit="cover"
1952              auto-fit
1953            ></spz-img>
1954            <spz-carousel
1955                class="product-snippet__img product-snippet__img_carousel"
1956                id="${image_carousel_id}"
1957                layout="responsive"
1958                width="${image_width}"
1959                height="${image_height}"
1960                initial-slide="0"
1961                slide
1962                effect="fade"
1963                spz-if="${thumbnails.length>0}"
1964              >
1965                <spz-img
1966                  spz-if="!!item.image"
1967                  layout="responsive"
1968                  width="${image_width}"
1969                  height="${image_height}"
1970                  src="${item.image && item.image.src || ''}"
1971                  alt="${item.image && item.image.alt || ''}"
1972                  object-fit="cover"
1973                  auto-fit
1974                  spz-for="(item, index) in thumbnails"
1975                  key="index"
1976                ></spz-img>
1977              </spz-carousel>
1978            <spz-img
1979              class="product-snippet__img-secondary absolute top-0"
1980              layout="responsive"
1981              width="${image_width}"
1982              height="${image_height}"
1983              src="${secondary_image.src || ''}"
1984              alt="${secondary_image.alt}"
1985              object-fit="cover"
1986              auto-fit
1987            ></spz-img>
1988          </a>
1989          <button
1990              type="button"
1991              class="product-snippet__quick-shop-icon"
1992              data-track-product-id="${data.id}"
1993              data-track-position=""
1994              data-track="quick_shop"
1995              @tap="quick-shop.open;quick-shop-render.render(src='/api/products/${data.id}');"
1996              spz-if="${data.available && !(!wholesale_enabled && is_single_variant)}"
1997            >
1998              <svg class="" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 1.9a.3.3 0 0 0-.3-.3h-.6a.3.3 0 0 0-.3.3v5.5H1.9a.3.3 0 0 0-.3.3v.6a.3.3 0 0 0 .3.3h5.5v5.5a.3.3 0 0 0 .3.3h.6a.3.3 0 0 0 .3-.3V8.6h5.5a.3.3 0 0 0 .3-.3v-.6a.3.3 0 0 0-.3-.3H8.6V1.9z" fill="currentColor"/></svg>
1999            </button>
2000            <spz-product-form
2001  product-id="${data.id}"
2002  layout="container"
2003  @atcSuccess=""
2004  @atcError="theme-toast.showToast(content=event.message);"
2005  spz-if="${data.available && !wholesale_enabled && is_single_variant}"
2006>
2007  <form>
2008    <input name="variant_id" type="hidden" value="${data.variants[0].id}">
2009    <button
2010      type="button"
2011      class="product-snippet__quick-shop-icon"
2012      role="addToCart"
2013      data-quick-shop="${data.handle}"
2014      data-track-product-id="${data.id}"
2015      data-track="click"
2016      data-track-content="add_to_cart"
2017      data-track-source="quick_shop"
2018    >
2019      <svg class="" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 1.9a.3.3 0 0 0-.3-.3h-.6a.3.3 0 0 0-.3.3v5.5H1.9a.3.3 0 0 0-.3.3v.6a.3.3 0 0 0 .3.3h5.5v5.5a.3.3 0 0 0 .3.3h.6a.3.3 0 0 0 .3-.3V8.6h5.5a.3.3 0 0 0 .3-.3v-.6a.3.3 0 0 0-.3-.3H8.6V1.9z" fill="currentColor"/></svg>
2020    </button>
2021  </form>
2022</spz-product-form>
2023          <a
2024    class="product_snippet__label"
2025    label-type="${data.available?'save':'sold_out'}"
2026    spz-href="${min_price_variant_href}"
2027    spz-if="${!data.available||has_save_label}"
2028  >
2029    ${
2030      data.available
2031        ? 
2032
2033`${
2034    (+data.compare_at_price > +data.price)
2035     ? `Save 
2036      <spz-currency value="${ data.compare_at_price-data.price }" layout="container"></spz-currency>
2037    `
2038     : ''
2039  }`
2040: "Sold out"
2041    }
2042  </a>
2043</div>
2044        <div spz-if="${mixed_wholesale}">
2045          <style>
2046  .mixed_wholesale_label {
2047    padding: 2px 4px;
2048  }
2049
2050  .mixed_wholesale_tooltip .i-spzhtml-tooltip-arrow:before,
2051  .mixed_wholesale_tooltip .i-spzhtml-tooltip-inner {
2052    background: var(--color-body-bg);
2053    color: var(--color-body-text);
2054  }
2055
2056  .mixed_wholesale_tooltip {
2057    max-width: 100%;
2058    border-radius: 4px;
2059    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
2060  }
2061
2062  @media (min-width: 960px) {
2063    .mixed_wholesale_tooltip {
2064      max-width: 450px;
2065    }
2066  }
2067</style>
2068<div class="mt-2 lg:mt-3 mixed_wholesale_label inline-flex color-custom-label-text bg-custom-label text-xs rounded" id="mixed-${image_wrap_id}">
2069  Mixed Lot
2070</div>
2071<spz-tooltip layout="logic" content="You can enjoy the wholesale price when you add up to {{count}} pieces of current goods and any goods that support &quot;Mixed Lot&quot; in the store." interact="hover" for="mixed-${image_wrap_id}" placement="bottom" overlay-class="mixed_wholesale_tooltip">
2072</spz-tooltip>
2073        </div>
2074        <h3
2075          class="product-snippet__title dj_skin_product_list_title m-0 mt-2 p-0 body-base leading-1.25 type-heading-font-family product-title-color  ">
2076          <a class="text-inherit no-underline" spz-href="${data.withinUrl}">
2077            ${data.title}
2078          </a>
2079        </h3>
2080        <a
2081          class="product-snippet__price-wrapper flex items-center flex-wrap mt-2 text-inherit no-underline"
2082          spz-href="${min_price_variant_href}"
2083          >
2084          <span class="product-snippet__price ${data.price_min != data.price_max ? 'product-snippet__from-price' : ''}">
2085              ${
2086                data.price_min != data.price_max
2087                  ? `from 
2088                <spz-currency value="${data.price}" layout="container"></spz-currency>
2089              `
2090                  : `
2091                <spz-currency value="${data.price}" layout="container"></spz-currency>
2092              `
2093              }
2094            </span>
2095            <spz-currency class="product-snippet__compare-at-price" value="${data.compare_at_price}" layout="container" spz-if="${+data.compare_at_price>+data.price}"></spz-currency>
2096          </a>
2097        <spz-selector
2098            id="${thumbnails_selector_id}"
2099            layout="container"
2100            class="product-snippet__thumbnails flex items-center flex-wrap mt-2"
2101            @mouseover="${thumbnails_selector_id}.toggle(option=event.targetOption,value=true);${image_carousel_id}.goToSlide(index=event.targetOption);${image_wrap_id}.toggleClass(class='show_carousel',force=true)"
2102            spz-if="${thumbnails.length>0}"
2103          >
2104            <a
2105              spz-if="!!item.image"
2106              class="product-snippet__thumbnails-item flex cursor-pointer"
2107              spz-href="${item.withinUrl}"
2108              spz-for="(item, index) in thumbnails"
2109              key="index"
2110              option="${index}"
2111            >
2112              <spz-img
2113                layout="fixed"
2114                width="28"
2115                height="28"
2116                src="${item.image && item.image.src || ''}"
2117                alt="${item.image && item.image.alt || ''}"
2118                object-fit="cover"
2119                auto-fit
2120              ></spz-img>
2121            </a>
2122            <a spz-href="${data.withinUrl}" class="product-snippet__thumbnails-item text-xs text-inherit no-underline" spz-if="${data.remainInvisibleThumbCount>0}">
2123              +${data.remainInvisibleThumbCount}
2124            </a>
2125          </spz-selector>
2126        `
2127    })()}
2128  </div>
2129</template>
2130<div class="page_container">
2131      <style type="text/css">
2132  [data-section-id=announcement] {
2133    position: relative;
2134    z-index: 1030;
2135    background: var(--color-announcement-bg);
2136    color: var(--color-announcement-text);
2137  }
2138  [data-section-id=announcement].header_mask_open{
2139    z-index: unset;
2140  }
2141
2142  .announcement-content {
2143    cursor: pointer;
2144  }
2145
2146  .announcement-content[carousel_off] {
2147    pointer-events: none;
2148  }
2149</style><div id="shoplaza-section-announcement" class="shoplaza-section" data-section-id="announcement" data-section-type="announcement" data-section-style="">
2150
2151</div>
2152      <div id="shoplaza-section-header" class="shoplaza-section" data-section-id="header" data-section-type="header" data-section-style="">
2153<style>
2154  .header__desktop,
2155  .header__mobile {
2156    color: var(--color-header-text);
2157    position: relative;
2158    z-index: 20;
2159  }
2160
2161  .header__layout {
2162    background: var(--color-header-bg);
2163  }
2164
2165  .header-shadow{
2166    box-shadow: 0 6px 10px -3px rgba(41, 41, 41, 0.08);
2167  }
2168
2169  .header-account-shadow{
2170    box-shadow: 0 6px 10px 3px rgba(29, 29, 29, 0.08);
2171  }
2172
2173  .header-bg {
2174    background: var(--color-header-bg);
2175  }
2176
2177  .header__menu-item-tag{
2178    margin-top: -6px;
2179    margin-left: 2px;
2180    padding: 2px 4px;
2181    font-size: 12px;
2182    line-height: 1;
2183    border-radius: 2px;
2184  }
2185  [data-section-id="header"]{
2186    pointer-events: none;
2187  }
2188</style>
2189
2190<style>
2191  @media (min-width: 960px) {
2192      [data-section-id="header"]{
2193      position: sticky;
2194      top: 0;
2195      z-index: 1021;
2196    }
2197  }
2198  @media (max-width: 959.98px) {
2199      [data-section-id="header"]{
2200      position: sticky;
2201      top: 0;
2202      z-index: 1021;
2203    }
2204  }
2205  </style>
2206
2207<style>
2208  /* layout left */
2209  .header__desktop[data-layout="left"] .header__logo {
2210    flex: 1;
2211    order: 1;
2212  }
2213
2214  .header__desktop[data-layout="left"] .header__icons {
2215    order: 4;
2216  }
2217
2218  .header__desktop[data-layout="left"] .header__menu-sticky,
2219  .header__desktop[data-layout="center"] .header__menu-sticky {
2220    display: none;
2221    order: 2;
2222  }
2223
2224  /* layout center */
2225  .header__desktop[data-layout="center"] .header__logo {
2226    order: 2;
2227    display: flex;
2228    justify-content: center;
2229  }
2230
2231  .header__desktop[data-layout="center"] .header__search {
2232    flex: 1;
2233    order: 1;
2234  }
2235
2236  /* layout menu_left_logo_center */
2237  .header__desktop[data-layout="menu_left_logo_center"] .header__logo {
2238    order: 2;
2239    display: flex;
2240    justify-content: center;
2241    width: 200px;
2242    margin-left: 50px;
2243    margin-right: 50px;
2244  }
2245
2246  /* layout logo_left_menu_left */
2247  .header__desktop[data-layout="logo_left_menu_left"] .header__logo {
2248    order: 0;
2249    display: flex;
2250    margin-right: 24px;
2251  }
2252
2253  .header__desktop[data-layout="logo_left_menu_left"] .header__icons {
2254    order: 4;
2255    justify-content: flex-end;
2256  }
2257
2258  .header__desktop[data-layout="center"] .header__icons,
2259  .header__desktop[data-layout="menu_left_logo_center"] .header__icons {
2260    flex: 1;
2261    order: 4;
2262    justify-content: flex-end;
2263  }
2264
2265  .header__desktop[data-layout="left"] .header__menu-sticky,
2266  .header__desktop[data-layout="center"] .header__menu-sticky,
2267  .header__desktop[data-layout="logo_left_menu_left"] .header__menu-sticky {
2268    padding-left: 28px;
2269    padding-right: 28px;
2270  }
2271
2272  .header__desktop[data-layout="logo_left_menu_left"] .header__menu-sticky .header__menu-item-sub,
2273  .header__desktop[data-layout="menu_left_logo_center"] .header__menu-sticky .header__menu-item-sub {
2274    max-width: 425px;
2275  }
2276
2277  .header__desktop[data-layout="left"] .header__menu-wrapper .header__menu,
2278  .header__desktop[data-layout="center"] .header__menu-wrapper .header__menu{
2279    padding: 6px 0 0 0;
2280  }
2281  .header__desktop[data-layout="left"] .header__menu-wrapper .header__menu-item-sub,
2282  .header__desktop[data-layout="center"] .header__menu-wrapper .header__menu-item-sub{
2283    padding-bottom: 17px;
2284  }
2285
2286  </style>
2287
2288<style>
2289  @media (min-width: 960px) {
2290      .header__scroll_hide,
2291      .header__scroll_hide ~ *{
2292        transition: transform 0.3s;
2293      }
2294      #shoplaza-section-header.show_shadow .header__desktop .header__menu-wrapper{
2295        box-shadow: 0 6px 10px -3px rgba(41, 41, 41, 0.08);
2296      }
2297      body.header_scroll #shoplaza-section-header{
2298        box-shadow: none;
2299      }
2300      .header_scroll .header__desktop[data-layout="center"] .header__search,
2301      .header_scroll .header__desktop[data-layout="center"] .header__icons,
2302      .header_scroll .header__desktop[data-layout="left"] .header__search,
2303      .header_scroll .header__desktop[data-layout="left"] .header__icons
2304      {
2305        flex-grow: unset;
2306      }
2307      .header_scroll .header__desktop[data-layout="center"] .header__logo,
2308      .header_scroll .header__desktop[data-layout="left"] .header__logo{
2309        flex-grow: unset;
2310        order: 1;
2311        margin-right: 20px;
2312      }
2313      .header_scroll .header__desktop[data-layout="center"] .header__scroll_hide,
2314      .header_scroll .header__desktop[data-layout="left"] .header__scroll_hide{
2315        transform: translateY(-100%);
2316      }
2317      .header_scroll .header__desktop[data-layout="center"] .header__scroll_hide ~ *,
2318      .header_scroll .header__desktop[data-layout="left"] .header__scroll_hide ~ *{
2319        transform: translateY(calc(-1 * var(--header-scroll-hide-height-pc)));
2320      }
2321      .header_scroll .header__desktop[data-layout="center"] .header__menu-sticky,
2322      .header_scroll .header__desktop[data-layout="left"] .header__menu-sticky{
2323        display: block;
2324        flex: 1;
2325      }
2326      .header_scroll .header__desktop[data-layout="center"] .header__menu-content,
2327      .header_scroll .header__desktop[data-layout="left"] .header__menu-content{
2328        visibility: hidden;
2329      }
2330    }
2331  @media (max-width: 959.98px) {
2332      .header__scroll_hide {
2333        transition: transform .5s;
2334      }
2335
2336      #shoplaza-section-header.show_shadow .header__mobile .header__fixed-top {
2337        box-shadow: 0 6px 10px -3px rgba(41, 41, 41, 0.08);
2338      }
2339
2340      .header_scroll .header__scroll_hide.non-sticky {
2341        transform: translateY(-100%);
2342      }
2343
2344      .header__icons.show-menu-icon .header__account,
2345      .header__icons:not(.show-menu-icon) .header__icon-menu--force,
2346      #header-search-container-mobile:not(.show) {
2347        display: none;
2348      }
2349    }
2350  </style>
2351
2352<style>
2353  .header__logo{
2354    margin: 0;
2355    font-size: 0;
2356  }
2357  .header__logo-title{
2358    max-width: 185px;
2359    overflow-wrap: break-word;
2360    font-size: 24px;
2361    line-height: 38px;
2362    font-weight: 600;
2363    color: inherit;
2364    overflow: hidden;
2365    text-decoration-line: none;
2366  }
2367  [data-section-id="header"] .image_width {
2368    width: 70px;
2369  }
2370  @media (min-width: 960px) {
2371    .header__logo{
2372      padding: 18px 0;
2373    }
2374    .header__logo-title{
2375      max-width: 380px;
2376      font-size: 30px;
2377      line-height: 36px;
2378      font-weight: 500;
2379    }
2380    [data-section-id="header"] .image_width {
2381      width: 80px;
2382    }
2383  }
2384  @media (max-width: 959.98px) {
2385    .header__logo{
2386      flex: 1;
2387    }
2388  }
2389</style>
2390
2391<style>
2392  .header__account,
2393    .header__cart,
2394    .header__drawer_icon{
2395    margin-left: 22px;
2396    }
2397  .header__account_dropdown {
2398    margin: 6px;
2399  }
2400
2401  .header__account_dropdown .i-spzhtml-dropdown-container {
2402    background-color: transparent;
2403  }
2404
2405  .header__account_dropdown_content{
2406    width: 146px;
2407    padding: 15px;
2408    font-size: 14px;
2409    line-height: 18px;
2410    color: var(--color-header-text);
2411    background-color: var(--color-header-bg);
2412    z-index: var(--z-index-dropdown);
2413    transition: all 200ms;
2414    border-radius: 4px;
2415  }
2416  .header__account_dropdown_content > li{
2417    cursor: pointer;
2418  }
2419  .header__account_dropdown_content > li:hover{
2420    color: var(--color-header-text-70);
2421  }
2422  .header__account_dropdown_content > li + li{
2423    margin-top: 18px;
2424  }
2425  .header__account_dropdown_content a{
2426    color: inherit;
2427    text-decoration: none;
2428  }
2429  .header__cart-count{
2430    min-height: 18px;
2431    min-width: 18px;
2432    padding: 3px 4px;
2433    top: -18px;
2434  right: -4px;
2435  font-size: 12px;
2436    color: var(--color-cart-dot-text);
2437    background-color: var(--color-cart-dot-bg);
2438  }
2439
2440  .header-cart-back-btn {
2441    margin-right: 2px;
2442  }
2443
2444  html[dir="rtl"] .header-cart-back-btn {
2445    margin-left: 2px;
2446    margin-right: 0;
2447    transform: rotate(180deg);
2448  }
2449
2450  @media (min-width: 960px) {
2451    .header__account,
2452    .header__cart,
2453    .header__plugin-container > *{
2454      margin-left: 30px;
2455      margin-right: unset;
2456    }
2457    .header__account_dropdown_content{
2458      visibility: hidden;
2459      position: absolute;
2460      margin-top: 10px;
2461    margin-left: -50px;
2462    width: 160px;
2463    }
2464    .header__account:hover .header__account_dropdown_content{
2465      visibility: visible;
2466    }
2467  }
2468</style>
2469<spz-observer layout="logic" value="1" @scrollexceedboundary="shoplaza-section-header.toggleClass(class='show_shadow', force=true);" @scrollnotexceedboundary="shoplaza-section-header.toggleClass(class='show_shadow', force=false);" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-observer>
2470  <spz-observer layout="logic" @scrolldown="nova-theme.toggleClass(class='header_scroll', force=true);header-menu-top.updateMoreLink" @scrollup="nova-theme.toggleClass(class='header_scroll', force=false);" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-observer>
2471<div class="header_container relative">
2472  <style>
2473  .header__menu-sticky {
2474    padding-top: 28px;
2475  }
2476  .header__menu-sticky .header__menu-item-sub {
2477    padding-bottom: 28px;
2478  }
2479</style>
2480<div class="header__desktop md:hidden" data-layout="center">
2481  <div class="header__layout relative z-50 pointer-events-auto">
2482    <div class="header__layout-content page-container flex items-center direction_ltr_self">
2483      <h2 class="header__logo flex-shrink-0 type-heading-font-family">
2484  <a class="header__logo-title md:hidden" href="/">
2485  sacclife
2486  </a>
2487  <a class="header__logo-title lg:hidden" href="/">
2488  sacclife
2489  </a>
2490</h2>
2491<style>
2492  .header__search button,
2493  .header__search input{
2494    border: none;
2495    outline: none;
2496  }
2497  .header__search-btn,
2498  .header__search-icon{
2499    background: transparent;
2500  }
2501  .header__search {
2502    display: flex;
2503    align-items: center;
2504    flex-shrink: 0;
2505  }
2506  .header__search-btn {
2507    padding: 0;
2508    margin: 0;
2509    font-size: 0;
2510    color: inherit;
2511    cursor: pointer;
2512  }
2513  .header__search-form{
2514    min-height: 40px;
2515  }
2516  .header__search-input{
2517    font-size: 13px;
2518    line-height: 16px;
2519    color: var(--color-header-search-text);
2520    background-color: var(--color-header-search-bg);
2521    caret-color: var(--color-header-search-text);
2522    padding: 12px 30px 12px 36px;
2523      border-radius: 2px 0 0 2px;
2524    }
2525  .header__search-input:not(:placeholder-shown) ~ .header__search-icon-close{
2526    display: flex;
2527  }
2528  .header__search-icon{
2529    left: 10px;
2530    top: 50%;
2531    transform: translateY(-50%);
2532    color: var(--color-header-search-text-50);
2533  }
2534  .header__search-icon-close{
2535    top: 50%;
2536    transform: translateY(-50%);
2537    height: 18px;
2538    width: 18px;
2539    color: #fff;
2540    background: #C0C0C0;
2541    right: 10px;
2542    }
2543  .header__search-icon:hover,
2544  .header__search-icon-close:hover{
2545    color: var(--color-header-search-text);
2546  }
2547  .header__search-submit-btn{
2548    padding: 11px 16px;
2549    font-size: 14px;
2550    line-height: 18px;
2551    color: var(--color-header-search-btn-text);
2552    background-color: var(--color-header-search-btn-bg);
2553    border-radius: 0 2px 2px 0;
2554    }
2555  @media (max-width: 959.98px) {
2556    .header__search-form{
2557      width: 100%
2558    }
2559  }
2560  @media (min-width: 960px) {
2561    .header__search-form{
2562      margin: 18px 0;
2563    }
2564    .header__search-input{
2565      width: 232px;
2566      border-radius: 2px;
2567    }
2568    .header__desktop[data-layout="left"] .header__search-input{
2569      width: 278px;
2570    }
2571  }
2572</style>
2573
2574<div class="header__search" id="">
2575    <button
2576        type="button"
2577        class="header__search-btn"
2578        @tap="shoplaza-section-announcement.toggleClass(class='header_mask_open', force=true);header_search_sidebar.open()"
2579      >
2580        <svg class="" width="26" height="26" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.925 20.057A9.955 9.955 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.968 9.968 0 0 1-2.864 7.006l4.929 4.928a.8.8 0 0 1-1.132 1.132l-5-5-.008-.01zM20.4 12a8.4 8.4 0 1 1-16.8 0 8.4 8.4 0 0 1 16.8 0z" fill="currentColor"/></svg>
2581      </button>
2582    </div>
2583<spz-observer layout="logic" target="header__plugin-container" @childupdated="header-menu-top.updateMoreLink" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-observer>
2584<div class="header__icons flex-shrink-0 flex items-center" >
2585  <div class="header__plugin-container md:hidden flex items-center" id="header__plugin-container">
2586    <div class="empty-hidden plugin__translate-header"></div>
2587    <div class="empty-hidden plugin__currency"></div>
2588  </div>
2589
2590  <div class="header__account relative text-0  md:hidden ">
2591    <i class="cursor-pointer" ><svg class=" " width="26" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".01" fill="currentColor" d="M0 0h26v26H0z"/><g fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"><path d="M13.11 1a6.11 6.11 0 1 1 0 12.22 6.11 6.11 0 0 1 0-12.22Zm0 1.6a4.51 4.51 0 1 0 0 9.02 4.51 4.51 0 0 0 0-9.02ZM17.333 15A6.667 6.667 0 0 1 24 21.667V24a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2.333A6.667 6.667 0 0 1 8.667 15h8.666Zm0 1.6H8.667a5.067 5.067 0 0 0-5.062 4.847l-.005.22V23.4h18.8v-1.733a5.067 5.067 0 0 0-4.847-5.062l-.22-.005Z"/></g></svg></i>
2592    <ul class="header__account_dropdown_content list-none header-account-shadow">
2593    <li><a href="/account/login">Log in</a></li>
2594      <li><a href="/account/register">Create an account</a></li>
2595      </ul>
2596</div>
2597  <a class="header__cart relative flex justify-end items-center text-0 text-inherit cursor-pointer no-underline" >
2598    <i>
2599      <svg class="" width="28" height="28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path opacity=".01" fill="currentColor" d="M0 0h28v28H0z"/><g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 2.2a.8.8 0 1 0 0 1.6h2.803l1.542 14.541a1 1 0 0 0 .995.895h15.055a1 1 0 0 0 .982-.811l2.105-10.91a1 1 0 0 0-.982-1.189H6.48l-.432-4.081a.05.05 0 0 0-.05-.045H1.8Zm4.849 5.726h16.923l-1.873 9.709H7.679l-1.03-9.709Z"/>
2599<path d="M10.917 23.62a1.909 1.909 0 1 1-3.818 0 1.909 1.909 0 0 1 3.818 0ZM22.372 23.62a1.91 1.91 0 1 1-3.819 0 1.91 1.91 0 0 1 3.819 0Z"/></g></svg>
2600      </i>
2601    <!-- 购物车数量 -->
2602    <spz-event target-id="header_cart_count_render_pc" target-api="render" event-name="dj.addToCart;dj.cartChange;" layout="logic" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-event>
2603    <spz-render id="header_cart_count_render_pc" layout="container" src="/api/cart/count" class="i-spzhtml-layout-container" i-spzhtml-layout="container">
2604      <template>
2605        <div>
2606          <span class="header__cart-count absolute rounded-full leading-none text-center" spz-if="${data.data && data.data.count > 0}">${data.data && data.data.count}</span>
2607        </div>
2608      </template>
2609    </spz-render>
2610  </a>
2611  <i class="header__drawer_icon  flex lg:hidden cursor-pointer" @tap="shoplaza-section-announcement.toggleClass(class='header_mask_open', force=true);header_drawer.open()">
2612      <svg class="" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".01"><path opacity=".696" fill="currentColor" d="M0 0h28v28H0z"/></g><g fill="currentColor"><path d="M24.17 6.17a.83.83 0 1 1 0 1.66H3.83a.83.83 0 0 1 0-1.66h20.34ZM24.17 13.17a.83.83 0 1 1 0 1.66H3.83a.83.83 0 1 1 0-1.66h20.34ZM24.17 20.17a.83.83 0 1 1 0 1.66H3.83a.83.83 0 1 1 0-1.66h20.34Z"/></g></svg>
2613    </i>
2614  </div>
2615      <div class="header__menu-sticky flex-1 overflow-hidden">
2616        <style>
2617  .header__desktop .header__menu{
2618    background: inherit !important;
2619  }
2620  .header__desktop .header__menu-item{
2621    padding: 0 18px;
2622    font-size: var(--type-nav-font-size);
2623  }
2624  .header__desktop .header__menu-item:first-child {
2625    margin-left: 0;
2626    }
2627  .header__second_menu-wrapper,
2628  .header__three_menu-wrapper,
2629  .header__more_menu-wrapper{
2630    z-index: var(--z-index-sticky);
2631    visibility: hidden;
2632  }
2633  .header__menu-item-first:hover .header__second_menu-wrapper,
2634  .header__menu-item-first:hover .header__three_menu-wrapper,
2635  .header__menu-item-first:hover .header__more_menu-wrapper{
2636    visibility: visible;
2637  }
2638  .header__second_menu-wrapper,
2639  .header__three_menu-wrapper,
2640  .header__more_menu_three{
2641    overflow: hidden auto;
2642    max-height: calc(var(--window-height) - var(--header-height) - 200px);
2643  }
2644  .header__second_menu-wrapper{
2645    min-width: 180px;
2646    max-width: 400px;
2647    margin: 0 0 -18px 0;
2648    padding: 25px 18px;
2649    }
2650  .header__second_menu-wrapper li + li{
2651    margin-top: 18px;
2652  }
2653  .header__three_menu-content{
2654    display: grid;
2655    grid-template-columns: repeat(4, minmax(0, 1fr));
2656    margin: 0 -30px;
2657  }
2658  .header__desktop .header__menu-item[data-levels="2"] .header__three_menu-wrapper ul{
2659    flex-wrap: wrap;
2660    margin-top: -50px;
2661  }
2662  .header__desktop .header__menu-item:not([data-levels="2"]) .header__three_menu-wrapper ul{
2663    flex-direction: column;
2664    margin-top: -12px;
2665  }
2666  .header__desktop .header__menu-item[data-levels="2"][data-has-product] .header__three_menu-wrapper ul li{
2667    width: 33.33%;
2668  }
2669  .header__desktop .header__menu-item[data-levels="2"]:not([data-has-product]) .header__three_menu-wrapper ul li{
2670    width: 25%;
2671  }
2672  .header__desktop .header__menu-item[data-has-product] .header__three_menu-wrapper ul{
2673    grid-column: span 3 / span 3;
2674  }
2675  .header__desktop .header__menu-item:not([data-has-product]) .header__three_menu-wrapper ul{
2676    grid-column: span 4 / span 4;
2677  }
2678  .header__desktop .header__menu-item[data-levels="2"] .header__menu-item-second{
2679    padding: 0 30px;
2680    font-size: var(--type-nav-font-size);
2681    color: var(--color-header-text);
2682  }
2683  .header__desktop .header__menu-item[data-levels="2"] .header__menu-item-second-wrapper {
2684    margin-top: 50px;
2685    margin-bottom: 8px;
2686  }
2687  .header__three_menu-wrapper .header__menu-item-last{
2688    padding: 12px 30px 0;
2689  }
2690  .header__desktop .header__menu-item .header__menu-item-last{
2691    color: var(--color-header-text-70);
2692    font-size: calc(var(--type-nav-font-size) - 2px);
2693    line-height: 1.4;
2694  }
2695  .header__desktop .header__menu-item .header__menu-item-last:hover {
2696    color: var(--color-header-text);
2697  }
2698  .header__menu_product{
2699    grid-column: span 1 / span 1;
2700    padding-left: 30px;
2701    padding-right: 30px;
2702  }
2703  .header_menu_hover_animation{
2704    opacity: 0;
2705    transform: translateY(-12px);
2706    transition: all 200ms;
2707  }
2708  .header__desktop .header__menu-item-first:first-child {
2709    padding-left: 0;
2710  }
2711  .header__menu-item-first:hover .header_menu_hover_animation{
2712    opacity: 1;
2713    transform: translateY(0);
2714  }
2715  .header__desktop .header__menu-item-first .header__menu-item-sub::after{
2716    content: "";
2717    position: absolute;
2718    left: 0;
2719    bottom: 0;
2720    display: block;
2721    width: 0;
2722    height: 3px;
2723    background-color: var(--color-header-text);
2724    transition: width .2s;
2725	}
2726	.header__desktop .header__menu-item-first:hover .header__menu-item-sub::after{
2727		width: 100%;
2728	}
2729  .header__waterfall-wrapper {
2730    margin: 0 -30px;
2731    margin-top: -50px;
2732  }
2733  .header__waterfall-wrapper.grid-menu-list {
2734    grid-auto-rows: max-content;
2735    grid-template-columns: repeat(4, minmax(0, 1fr));
2736  }
2737  .menu_has_product .header-menu-full-screen-content {
2738    display: grid;
2739    grid-template-columns: repeat(4, minmax(0, 1fr));
2740  }
2741  .menu_has_product .header__waterfall-wrapper {
2742    grid-column: span 3 / span 3;
2743  }
2744  .menu_has_product .header__menu_product {
2745    grid-column: span 1 / span 1;
2746  }
2747</style>
2748
2749<spz-menu id="header-menu-top" layout="container" class="header-menu-container   type-heading-font-family  i-spzhtml-layout-container" i-spzhtml-layout="container">
2750  <ul class="header__menu flex m-0 p-0 list-none">
2751
2752    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-1" data-id="81892641"  data-levels="">
2753          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
2754href="/"  >
2755  <span class="">Home</span>
2756  </a>
2757</li>
2758    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-2" data-id="83129055"  data-levels="">
2759          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
2760href="/collections/necklace"  >
2761  <span class="">Necklace</span>
2762  </a>
2763</li>
2764    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-3" data-id="83129057"  data-levels="">
2765          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
2766href="/collections/ring"  >
2767  <span class="">Ring</span>
2768  </a>
2769</li>
2770    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-4" data-id="83129059"  data-levels="">
2771          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
2772href="/collections/exquisite-bracelet"  >
2773  <span class="">Exquisite bracelet</span>
2774  </a>
2775</li>
2776    <style>
2777    .header-menu-container[finish] .header__more_menu-wrapper {
2778      display: block !important;
2779      position: static !important;
2780    }
2781    .header__more_menu {
2782      display: grid;
2783    }
2784    .header__more_menu {
2785      grid-template-columns: repeat(4,minmax(0,1fr));
2786    }
2787
2788    .header__more_menu_right {
2789      grid-column: span 3/span 3;
2790      grid-template-columns: repeat(3,minmax(0,1fr));
2791    }
2792
2793    .header__more_menu [role="tabs"],
2794    .header__more_menu_right .header__menu_product {
2795      grid-column: span 1/span 1;
2796    }
2797
2798    .header__more_menu_right .menu_list_wrapper[data-has-product] {
2799      grid-column: span 2/span 2;
2800    }
2801
2802    .header__more_menu [role="tabpanel"],
2803    .header__more_menu_right .menu_list_wrapper {
2804      grid-column: span 3/span 3;
2805    }
2806
2807    .header__more_menu {
2808      line-height: 1.25;
2809      padding-top: 32px;
2810      padding-bottom: 36px;
2811    }
2812    .header__more_menu [role="tab"] + [role="tab"] {
2813      padding-top: 20px;
2814    }
2815    .header__more_menu_icon {
2816      transform: rotate(180deg);
2817      transition: all 200ms;
2818    }
2819    .header__more_menu [role="tab"][active] .header__more_menu_icon {
2820      transform: rotate(0);
2821    }
2822    .header__more_menu_right li {
2823      padding-bottom: 20px;
2824    }
2825    .header__more_menu_right {
2826      margin-top: -50px;
2827    }
2828    .grid_gap_ele {
2829      height: 50px;
2830      margin: 0;
2831    }
2832    .header__more_menu_right:not(.grid_gap_ele) {
2833      margin-top: 0;
2834    }
2835    .header__more_menu_right_item {
2836      padding: 0 30px 8px;
2837    }
2838    .header__more_menu_right_item + .header__more_menu_right_item {
2839      padding: 12px 30px 0;
2840    }
2841    .header__more_menu_right .header__menu_product {
2842      padding: 0 30px;
2843    }
2844    .header__more_menu_right.has_third_menu {
2845      margin-top: -50px;
2846    }
2847    .header__more_menu_right.has_third_menu .header__menu_product {
2848      margin-top: 50px;
2849    }
2850    .header__more_menu_right spz-product-snippet {
2851      height: 100%;
2852    }
2853    .header__more_menu_right .grid-col-list {
2854      grid-auto-rows: min-content;
2855    }
2856</style>
2857  
2858<li spz-menu-more-link class="header__menu-item header__menu-item-first">
2859    <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap cursor-pointer" href="javascript:;" >More links</a>
2860    <div class="header__more_menu-wrapper" spz-menu-submenu 
2861    ></div>
2862</li>
2863
2864<template id="more-link-template">
2865    ${(function(){
2866
2867        var linkList =[false,false,false,false].slice(offset); 
2868        var hasChild = linkList.some(v => v);
2869
2870        if(!hasChild){ 
2871            return `
2872                <div>
2873                    <ul class="header__more_menu_second header__second_menu-wrapper header-shadow absolute header-bg list-none overflow-x-hidden overflow-y-auto">
2874                        
2875                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=1}">
2876                                
2877<a class="header__menu-item-last flex items-start text-inherit no-underline" 
2878href="/"  >
2879  <span class="">Home</span>
2880  </a>
2881</li>
2882                        
2883                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=2}">
2884                                
2885<a class="header__menu-item-last flex items-start text-inherit no-underline" 
2886href="/collections/necklace"  >
2887  <span class="">Necklace</span>
2888  </a>
2889</li>
2890                        
2891                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=3}">
2892                                
2893<a class="header__menu-item-last flex items-start text-inherit no-underline" 
2894href="/collections/ring"  >
2895  <span class="">Ring</span>
2896  </a>
2897</li>
2898                        
2899                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=4}">
2900                                
2901<a class="header__menu-item-last flex items-start text-inherit no-underline" 
2902href="/collections/exquisite-bracelet"  >
2903  <span class="">Exquisite bracelet</span>
2904  </a>
2905</li>
2906                        
2907                    </ul>
2908                </div>
2909            `
2910        }
2911
2912        return `
2913          <div>
2914            <div class="header__more_menu_three header-shadow absolute left-0 right-0 header-bg overflow-x-hidden overflow-y-auto">
2915              <spz-tabs class="header__more_menu page-container" layout="container" interact="hover" >
2916                <ul class="header__more_menu_left header_menu_hover_animation list-none" role="tabs" 
2917                >
2918                    
2919                        
2920                        <li 
2921                            role="tab" 
2922                            data-panel="tab-81892641" 
2923                            spz-if="${offset+1<=1}"
2924                        >
2925                            
2926                            
2927<a class="flex items-start text-inherit no-underline" 
2928href="/"  >
2929  <span class="flex-1 mr-4">Home</span>
2930  </a>
2931</li>
2932                    
2933                        
2934                        <li 
2935                            role="tab" 
2936                            data-panel="tab-83129055" 
2937                            spz-if="${offset+1<=2}"
2938                        >
2939                            
2940                            
2941<a class="flex items-start text-inherit no-underline" 
2942href="/collections/necklace"  >
2943  <span class="flex-1 mr-4">Necklace</span>
2944  </a>
2945</li>
2946                    
2947                        
2948                        <li 
2949                            role="tab" 
2950                            data-panel="tab-83129057" 
2951                            spz-if="${offset+1<=3}"
2952                        >
2953                            
2954                            
2955<a class="flex items-start text-inherit no-underline" 
2956href="/collections/ring"  >
2957  <span class="flex-1 mr-4">Ring</span>
2958  </a>
2959</li>
2960                    
2961                        
2962                        <li 
2963                            role="tab" 
2964                            data-panel="tab-83129059" 
2965                            spz-if="${offset+1<=4}"
2966                        >
2967                            
2968                            
2969<a class="flex items-start text-inherit no-underline" 
2970href="/collections/exquisite-bracelet"  >
2971  <span class="flex-1 mr-4">Exquisite bracelet</span>
2972  </a>
2973</li>
2974                    
2975                </ul>
2976
2977                <div 
2978                        class="header__more_menu_right header_menu_hover_animation grid  " 
2979                        role="tabpanel" 
2980                        data-id="tab-81892641" 
2981                        spz-if="${offset+1<=1}"
2982                    >
2983                        
2984                        
2985                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
2986                              
2987                            >
2988                              
2989                        
2990                    
2991                            </ul>
2992                        
2993                    
2994                        
2995                    </div>
2996                <div 
2997                        class="header__more_menu_right header_menu_hover_animation grid  " 
2998                        role="tabpanel" 
2999                        data-id="tab-83129055" 
3000                        spz-if="${offset+1<=2}"
3001                    >
3002                        
3003                        
3004                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
3005                              
3006                            >
3007                              
3008                        
3009                    
3010                            </ul>
3011                        
3012                    
3013                        
3014                    </div>
3015                <div 
3016                        class="header__more_menu_right header_menu_hover_animation grid  " 
3017                        role="tabpanel" 
3018                        data-id="tab-83129057" 
3019                        spz-if="${offset+1<=3}"
3020                    >
3021                        
3022                        
3023                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
3024                              
3025                            >
3026                              
3027                        
3028                    
3029                            </ul>
3030                        
3031                    
3032                        
3033                    </div>
3034                <div 
3035                        class="header__more_menu_right header_menu_hover_animation grid  " 
3036                        role="tabpanel" 
3037                        data-id="tab-83129059" 
3038                        spz-if="${offset+1<=4}"
3039                    >
3040                        
3041                        
3042                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
3043                              
3044                            >
3045                              
3046                        
3047                    
3048                            </ul>
3049                        
3050                    
3051                        
3052                    </div>
3053                </spz-tabs>
3054            </div>
3055          </div>
3056        `
3057    })()}
3058
3059</template>
3060   
3061  </ul>
3062</spz-menu>
3063      </div>
3064    </div>
3065  </div>
3066
3067  <div class="header__menu-wrapper header__scroll_hide header-bg overflow-hidden pointer-events-auto">
3068      <div class="header__menu-content page-container">
3069        <style>
3070  .header__desktop .header__menu{
3071    background: inherit !important;
3072  }
3073  .header__desktop .header__menu-item{
3074    padding: 0 18px;
3075    font-size: var(--type-nav-font-size);
3076  }
3077  .header__desktop .header__menu-item:first-child {
3078    margin-left: 0;
3079    }
3080  .header__second_menu-wrapper,
3081  .header__three_menu-wrapper,
3082  .header__more_menu-wrapper{
3083    z-index: var(--z-index-sticky);
3084    visibility: hidden;
3085  }
3086  .header__menu-item-first:hover .header__second_menu-wrapper,
3087  .header__menu-item-first:hover .header__three_menu-wrapper,
3088  .header__menu-item-first:hover .header__more_menu-wrapper{
3089    visibility: visible;
3090  }
3091  .header__second_menu-wrapper,
3092  .header__three_menu-wrapper,
3093  .header__more_menu_three{
3094    overflow: hidden auto;
3095    max-height: calc(var(--window-height) - var(--header-height) - 200px);
3096  }
3097  .header__second_menu-wrapper{
3098    min-width: 180px;
3099    max-width: 400px;
3100    margin: 0 0 -18px 0;
3101    padding: 25px 18px;
3102    }
3103  .header__second_menu-wrapper li + li{
3104    margin-top: 18px;
3105  }
3106  .header__three_menu-content{
3107    display: grid;
3108    grid-template-columns: repeat(4, minmax(0, 1fr));
3109    margin: 0 -30px;
3110  }
3111  .header__desktop .header__menu-item[data-levels="2"] .header__three_menu-wrapper ul{
3112    flex-wrap: wrap;
3113    margin-top: -50px;
3114  }
3115  .header__desktop .header__menu-item:not([data-levels="2"]) .header__three_menu-wrapper ul{
3116    flex-direction: column;
3117    margin-top: -12px;
3118  }
3119  .header__desktop .header__menu-item[data-levels="2"][data-has-product] .header__three_menu-wrapper ul li{
3120    width: 33.33%;
3121  }
3122  .header__desktop .header__menu-item[data-levels="2"]:not([data-has-product]) .header__three_menu-wrapper ul li{
3123    width: 25%;
3124  }
3125  .header__desktop .header__menu-item[data-has-product] .header__three_menu-wrapper ul{
3126    grid-column: span 3 / span 3;
3127  }
3128  .header__desktop .header__menu-item:not([data-has-product]) .header__three_menu-wrapper ul{
3129    grid-column: span 4 / span 4;
3130  }
3131  .header__desktop .header__menu-item[data-levels="2"] .header__menu-item-second{
3132    padding: 0 30px;
3133    font-size: var(--type-nav-font-size);
3134    color: var(--color-header-text);
3135  }
3136  .header__desktop .header__menu-item[data-levels="2"] .header__menu-item-second-wrapper {
3137    margin-top: 50px;
3138    margin-bottom: 8px;
3139  }
3140  .header__three_menu-wrapper .header__menu-item-last{
3141    padding: 12px 30px 0;
3142  }
3143  .header__desktop .header__menu-item .header__menu-item-last{
3144    color: var(--color-header-text-70);
3145    font-size: calc(var(--type-nav-font-size) - 2px);
3146    line-height: 1.4;
3147  }
3148  .header__desktop .header__menu-item .header__menu-item-last:hover {
3149    color: var(--color-header-text);
3150  }
3151  .header__menu_product{
3152    grid-column: span 1 / span 1;
3153    padding-left: 30px;
3154    padding-right: 30px;
3155  }
3156  .header_menu_hover_animation{
3157    opacity: 0;
3158    transform: translateY(-12px);
3159    transition: all 200ms;
3160  }
3161  .header__desktop .header__menu-item-first:first-child {
3162    padding-left: 0;
3163  }
3164  .header__menu-item-first:hover .header_menu_hover_animation{
3165    opacity: 1;
3166    transform: translateY(0);
3167  }
3168  .header__desktop .header__menu-item-first .header__menu-item-sub::after{
3169    content: "";
3170    position: absolute;
3171    left: 0;
3172    bottom: 0;
3173    display: block;
3174    width: 0;
3175    height: 3px;
3176    background-color: var(--color-header-text);
3177    transition: width .2s;
3178	}
3179	.header__desktop .header__menu-item-first:hover .header__menu-item-sub::after{
3180		width: 100%;
3181	}
3182  .header__waterfall-wrapper {
3183    margin: 0 -30px;
3184    margin-top: -50px;
3185  }
3186  .header__waterfall-wrapper.grid-menu-list {
3187    grid-auto-rows: max-content;
3188    grid-template-columns: repeat(4, minmax(0, 1fr));
3189  }
3190  .menu_has_product .header-menu-full-screen-content {
3191    display: grid;
3192    grid-template-columns: repeat(4, minmax(0, 1fr));
3193  }
3194  .menu_has_product .header__waterfall-wrapper {
3195    grid-column: span 3 / span 3;
3196  }
3197  .menu_has_product .header__menu_product {
3198    grid-column: span 1 / span 1;
3199  }
3200</style>
3201
3202<spz-menu id="header-menu-bottom" layout="container" class="header-menu-container   type-heading-font-family  i-spzhtml-layout-container" i-spzhtml-layout="container">
3203  <ul class="header__menu flex m-0 p-0 list-none">
3204
3205    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-1" data-id="81892641"  data-levels="">
3206          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
3207href="/"  >
3208  <span class="">Home</span>
3209  </a>
3210</li>
3211    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-2" data-id="83129055"  data-levels="">
3212          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
3213href="/collections/necklace"  >
3214  <span class="">Necklace</span>
3215  </a>
3216</li>
3217    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-3" data-id="83129057"  data-levels="">
3218          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
3219href="/collections/ring"  >
3220  <span class="">Ring</span>
3221  </a>
3222</li>
3223    <li class="header__menu-item header__menu-item-first cursor-pointer header__menu-item-first-4" data-id="83129059"  data-levels="">
3224          <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap flex items-start" 
3225href="/collections/exquisite-bracelet"  >
3226  <span class="">Exquisite bracelet</span>
3227  </a>
3228</li>
3229    <style>
3230    .header-menu-container[finish] .header__more_menu-wrapper {
3231      display: block !important;
3232      position: static !important;
3233    }
3234    .header__more_menu {
3235      display: grid;
3236    }
3237    .header__more_menu {
3238      grid-template-columns: repeat(4,minmax(0,1fr));
3239    }
3240
3241    .header__more_menu_right {
3242      grid-column: span 3/span 3;
3243      grid-template-columns: repeat(3,minmax(0,1fr));
3244    }
3245
3246    .header__more_menu [role="tabs"],
3247    .header__more_menu_right .header__menu_product {
3248      grid-column: span 1/span 1;
3249    }
3250
3251    .header__more_menu_right .menu_list_wrapper[data-has-product] {
3252      grid-column: span 2/span 2;
3253    }
3254
3255    .header__more_menu [role="tabpanel"],
3256    .header__more_menu_right .menu_list_wrapper {
3257      grid-column: span 3/span 3;
3258    }
3259
3260    .header__more_menu {
3261      line-height: 1.25;
3262      padding-top: 32px;
3263      padding-bottom: 36px;
3264    }
3265    .header__more_menu [role="tab"] + [role="tab"] {
3266      padding-top: 20px;
3267    }
3268    .header__more_menu_icon {
3269      transform: rotate(180deg);
3270      transition: all 200ms;
3271    }
3272    .header__more_menu [role="tab"][active] .header__more_menu_icon {
3273      transform: rotate(0);
3274    }
3275    .header__more_menu_right li {
3276      padding-bottom: 20px;
3277    }
3278    .header__more_menu_right {
3279      margin-top: -50px;
3280    }
3281    .grid_gap_ele {
3282      height: 50px;
3283      margin: 0;
3284    }
3285    .header__more_menu_right:not(.grid_gap_ele) {
3286      margin-top: 0;
3287    }
3288    .header__more_menu_right_item {
3289      padding: 0 30px 8px;
3290    }
3291    .header__more_menu_right_item + .header__more_menu_right_item {
3292      padding: 12px 30px 0;
3293    }
3294    .header__more_menu_right .header__menu_product {
3295      padding: 0 30px;
3296    }
3297    .header__more_menu_right.has_third_menu {
3298      margin-top: -50px;
3299    }
3300    .header__more_menu_right.has_third_menu .header__menu_product {
3301      margin-top: 50px;
3302    }
3303    .header__more_menu_right spz-product-snippet {
3304      height: 100%;
3305    }
3306    .header__more_menu_right .grid-col-list {
3307      grid-auto-rows: min-content;
3308    }
3309</style>
3310  
3311<li spz-menu-more-link class="header__menu-item header__menu-item-first">
3312    <a class="header__menu-item-sub relative block text-inherit no-underline whitespace-nowrap cursor-pointer" href="javascript:;" >More links</a>
3313    <div class="header__more_menu-wrapper" spz-menu-submenu 
3314    ></div>
3315</li>
3316
3317<template id="more-link-template">
3318    ${(function(){
3319
3320        var linkList =[false,false,false,false].slice(offset); 
3321        var hasChild = linkList.some(v => v);
3322
3323        if(!hasChild){ 
3324            return `
3325                <div>
3326                    <ul class="header__more_menu_second header__second_menu-wrapper header-shadow absolute header-bg list-none overflow-x-hidden overflow-y-auto">
3327                        
3328                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=1}">
3329                                
3330<a class="header__menu-item-last flex items-start text-inherit no-underline" 
3331href="/"  >
3332  <span class="">Home</span>
3333  </a>
3334</li>
3335                        
3336                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=2}">
3337                                
3338<a class="header__menu-item-last flex items-start text-inherit no-underline" 
3339href="/collections/necklace"  >
3340  <span class="">Necklace</span>
3341  </a>
3342</li>
3343                        
3344                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=3}">
3345                                
3346<a class="header__menu-item-last flex items-start text-inherit no-underline" 
3347href="/collections/ring"  >
3348  <span class="">Ring</span>
3349  </a>
3350</li>
3351                        
3352                            <li class="header_menu_hover_animation"  spz-if="${offset+1<=4}">
3353                                
3354<a class="header__menu-item-last flex items-start text-inherit no-underline" 
3355href="/collections/exquisite-bracelet"  >
3356  <span class="">Exquisite bracelet</span>
3357  </a>
3358</li>
3359                        
3360                    </ul>
3361                </div>
3362            `
3363        }
3364
3365        return `
3366          <div>
3367            <div class="header__more_menu_three header-shadow absolute left-0 right-0 header-bg overflow-x-hidden overflow-y-auto">
3368              <spz-tabs class="header__more_menu page-container" layout="container" interact="hover" >
3369                <ul class="header__more_menu_left header_menu_hover_animation list-none" role="tabs" 
3370                >
3371                    
3372                        
3373                        <li 
3374                            role="tab" 
3375                            data-panel="tab-81892641" 
3376                            spz-if="${offset+1<=1}"
3377                        >
3378                            
3379                            
3380<a class="flex items-start text-inherit no-underline" 
3381href="/"  >
3382  <span class="flex-1 mr-4">Home</span>
3383  </a>
3384</li>
3385                    
3386                        
3387                        <li 
3388                            role="tab" 
3389                            data-panel="tab-83129055" 
3390                            spz-if="${offset+1<=2}"
3391                        >
3392                            
3393                            
3394<a class="flex items-start text-inherit no-underline" 
3395href="/collections/necklace"  >
3396  <span class="flex-1 mr-4">Necklace</span>
3397  </a>
3398</li>
3399                    
3400                        
3401                        <li 
3402                            role="tab" 
3403                            data-panel="tab-83129057" 
3404                            spz-if="${offset+1<=3}"
3405                        >
3406                            
3407                            
3408<a class="flex items-start text-inherit no-underline" 
3409href="/collections/ring"  >
3410  <span class="flex-1 mr-4">Ring</span>
3411  </a>
3412</li>
3413                    
3414                        
3415                        <li 
3416                            role="tab" 
3417                            data-panel="tab-83129059" 
3418                            spz-if="${offset+1<=4}"
3419                        >
3420                            
3421                            
3422<a class="flex items-start text-inherit no-underline" 
3423href="/collections/exquisite-bracelet"  >
3424  <span class="flex-1 mr-4">Exquisite bracelet</span>
3425  </a>
3426</li>
3427                    
3428                </ul>
3429
3430                <div 
3431                        class="header__more_menu_right header_menu_hover_animation grid  " 
3432                        role="tabpanel" 
3433                        data-id="tab-81892641" 
3434                        spz-if="${offset+1<=1}"
3435                    >
3436                        
3437                        
3438                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
3439                              
3440                            >
3441                              
3442                        
3443                    
3444                            </ul>
3445                        
3446                    
3447                        
3448                    </div>
3449                <div 
3450                        class="header__more_menu_right header_menu_hover_animation grid  " 
3451                        role="tabpanel" 
3452                        data-id="tab-83129055" 
3453                        spz-if="${offset+1<=2}"
3454                    >
3455                        
3456                        
3457                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
3458                              
3459                            >
3460                              
3461                        
3462                    
3463                            </ul>
3464                        
3465                    
3466                        
3467                    </div>
3468                <div 
3469                        class="header__more_menu_right header_menu_hover_animation grid  " 
3470                        role="tabpanel" 
3471                        data-id="tab-83129057" 
3472                        spz-if="${offset+1<=3}"
3473                    >
3474                        
3475                        
3476                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
3477                              
3478                            >
3479                              
3480                        
3481                    
3482                            </ul>
3483                        
3484                    
3485                        
3486                    </div>
3487                <div 
3488                        class="header__more_menu_right header_menu_hover_animation grid  " 
3489                        role="tabpanel" 
3490                        data-id="tab-83129059" 
3491                        spz-if="${offset+1<=4}"
3492                    >
3493                        
3494                        
3495                            <ul class="flex flex-col list-none w-full menu_list_wrapper  " 
3496                              
3497                            >
3498                              
3499                        
3500                    
3501                            </ul>
3502                        
3503                    
3504                        
3505                    </div>
3506                </spz-tabs>
3507            </div>
3508          </div>
3509        `
3510    })()}
3511
3512</template>
3513   
3514  </ul>
3515</spz-menu>
3516      </div>
3517    </div>
3518  <div class="plugin__fixed-div pointer-events-auto md:hidden"></div>
3519</div>
3520<style>
3521  .header__mobile .header{
3522    padding-top: 18px;
3523    padding-bottom: 18px;
3524  }
3525  .header__mobile .header_apps_wrap > * {
3526    margin-bottom: 18px;
3527    flex: 1;
3528  }
3529  .header__mobile .header__search-wrapper{
3530    padding-top: 4px;
3531    padding-bottom: 10px;
3532  }
3533  .header__mobile .header__menu-wrapper{
3534    padding: 8px 0 8px 16px;
3535  background: var(--color-menu-bg);
3536  }
3537  .header__mobile__menu-item-first{
3538    padding-right: 10px;
3539  }
3540  .header__mobile__menu-item-first a{
3541    padding: 9px 12px;
3542    font-size: 12px;
3543    line-height: 1.3;
3544    color: var(--color-menu-item-text-90);
3545    background: var(--color-menu-item-bg);
3546    border-radius: 4px;
3547  }
3548  .header_menu_tooltip,
3549  .header_menu_tooltip .i-spzhtml-tooltip-inner{
3550    padding: 0;
3551    background: transparent !important;
3552  }
3553  .header_menu_tooltip .header__menu_second {
3554    width: 150px;
3555    max-height: 236px;
3556    border-radius: 4px ;
3557  }
3558  .header_menu_tooltip .header__menu_second-item{
3559    background: #fff;
3560    color: var(--color-menu-item-text-80);
3561    padding: 0 0 0 14px;
3562  font-size: 12px;
3563    line-height: 1.3
3564  }
3565  .header_menu_tooltip .header__menu_second-item a{
3566    padding: 15px 14px 15px 0;
3567  }
3568  .header_menu_tooltip .header__menu_second-item a + a{
3569    border: 1px solid #E6E6E6;
3570  }
3571  .header__mobile__menu-item-first a.header_menu_active {
3572    background-color: var(--color-actived-menu-item-bg) ;
3573    color: var(--color-actived-menu-item-text) ;
3574  }
3575</style>
3576<header class="header__mobile tw-text-header-text-color lg:hidden">
3577  <div class="header page-container z-20 relative header-bg pointer-events-auto">
3578    <div class="flex items-center">
3579      <button
3580          class="lg:hidden header-cart-back-btn clear flex text-inherit"
3581          type="button"
3582          @tap="SPZ.history(type='back', defaultUrl='/');"
3583        >
3584          <svg class="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" d="M6.828 11.526a.6.6 0 0 0 0 .849l7 7a.3.3 0 0 0 .425 0l.721-.721a.3.3 0 0 0 0-.424l-6.279-6.28 6.28-6.279a.3.3 0 0 0 0-.424l-.722-.721a.3.3 0 0 0-.424 0l-7 7Z"/></svg>
3585        </button>
3586      <h2 class="header__logo flex-shrink-0 type-heading-font-family">
3587  <a class="header__logo-title md:hidden" href="/">
3588  sacclife
3589  </a>
3590  <a class="header__logo-title lg:hidden" href="/">
3591  sacclife
3592  </a>
3593</h2>
3594<style>
3595  .header__search button,
3596  .header__search input{
3597    border: none;
3598    outline: none;
3599  }
3600  .header__search-btn,
3601  .header__search-icon{
3602    background: transparent;
3603  }
3604  .header__search {
3605    display: flex;
3606    align-items: center;
3607    flex-shrink: 0;
3608  }
3609  .header__search-btn {
3610    padding: 0;
3611    margin: 0;
3612    font-size: 0;
3613    color: inherit;
3614    cursor: pointer;
3615  }
3616  .header__search-form{
3617    min-height: 40px;
3618  }
3619  .header__search-input{
3620    font-size: 13px;
3621    line-height: 16px;
3622    color: var(--color-header-search-text);
3623    background-color: var(--color-header-search-bg);
3624    caret-color: var(--color-header-search-text);
3625    padding: 12px 30px 12px 36px;
3626      border-radius: 2px 0 0 2px;
3627    }
3628  .header__search-input:not(:placeholder-shown) ~ .header__search-icon-close{
3629    display: flex;
3630  }
3631  .header__search-icon{
3632    left: 10px;
3633    top: 50%;
3634    transform: translateY(-50%);
3635    color: var(--color-header-search-text-50);
3636  }
3637  .header__search-icon-close{
3638    top: 50%;
3639    transform: translateY(-50%);
3640    height: 18px;
3641    width: 18px;
3642    color: #fff;
3643    background: #C0C0C0;
3644    right: 10px;
3645    }
3646  .header__search-icon:hover,
3647  .header__search-icon-close:hover{
3648    color: var(--color-header-search-text);
3649  }
3650  .header__search-submit-btn{
3651    padding: 11px 16px;
3652    font-size: 14px;
3653    line-height: 18px;
3654    color: var(--color-header-search-btn-text);
3655    background-color: var(--color-header-search-btn-bg);
3656    border-radius: 0 2px 2px 0;
3657    }
3658  @media (max-width: 959.98px) {
3659    .header__search-form{
3660      width: 100%
3661    }
3662  }
3663  @media (min-width: 960px) {
3664    .header__search-form{
3665      margin: 18px 0;
3666    }
3667    .header__search-input{
3668      width: 232px;
3669      border-radius: 2px;
3670    }
3671    .header__desktop[data-layout="left"] .header__search-input{
3672      width: 278px;
3673    }
3674  }
3675</style>
3676
3677<div class="header__search" id="">
3678    <button
3679        type="button"
3680        class="header__search-btn"
3681        @tap="shoplaza-section-announcement.toggleClass(class='header_mask_open', force=true);header_search_sidebar.open()"
3682      >
3683        <svg class="" width="26" height="26" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.925 20.057A9.955 9.955 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.968 9.968 0 0 1-2.864 7.006l4.929 4.928a.8.8 0 0 1-1.132 1.132l-5-5-.008-.01zM20.4 12a8.4 8.4 
36830 1 1-16.8 0 8.4 8.4 0 0 1 16.8 0z" fill="currentColor"/></svg>
3684      </button>
3685    </div>
3686<spz-observer layout="logic" target="header__plugin-container" @childupdated="header-menu-top.updateMoreLink" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-observer>
3687<div class="header__icons flex-shrink-0 flex items-center"  id="header-icons" >
3688  <div class="header__plugin-container md:hidden flex items-center" id="header__plugin-container">
3689    <div class="empty-hidden plugin__translate-header"></div>
3690    <div class="empty-hidden plugin__currency"></div>
3691  </div>
3692
3693  <div class="header__account relative text-0  md:hidden ">
3694    <i class="cursor-pointer" @tap="header_account_dropdown_md.open"><svg class=" " width="26" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".01" fill="currentColor" d="M0 0h26v26H0z"/><g fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"><path d="M13.11 1a6.11 6.11 0 1 1 0 12.22 6.11 6.11 0 0 1 0-12.22Zm0 1.6a4.51 4.51 0 1 0 0 9.02 4.51 4.51 0 0 0 0-9.02ZM17.333 15A6.667 6.667 0 0 1 24 21.667V24a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2.333A6.667 6.667 0 0 1 8.667 15h8.666Zm0 1.6H8.667a5.067 5.067 0 0 0-5.062 4.847l-.005.22V23.4h18.8v-1.733a5.067 5.067 0 0 0-4.847-5.062l-.22-.005Z"/></g></svg></i>
3695    <spz-dropdown class="header__account_dropdown i-spzhtml-layout-nodisplay" id="header_account_dropdown_md" layout="nodisplay" placement="bottom" hidden="" style="display: none" i-spzhtml-layout="nodisplay">
3696        <ul class="header__account_dropdown_content list-none header-account-shadow">
3697    <li><a href="/account/login">Log in</a></li>
3698      <li><a href="/account/register">Create an account</a></li>
3699      </ul>
3700</spz-dropdown>
3701    </div>
3702  <a class="header__cart relative flex justify-end items-center text-0 text-inherit cursor-pointer no-underline" >
3703    <i>
3704      <svg class="" width="28" height="28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path opacity=".01" fill="currentColor" d="M0 0h28v28H0z"/><g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.8 2.2a.8.8 0 1 0 0 1.6h2.803l1.542 14.541a1 1 0 0 0 .995.895h15.055a1 1 0 0 0 .982-.811l2.105-10.91a1 1 0 0 0-.982-1.189H6.48l-.432-4.081a.05.05 0 0 0-.05-.045H1.8Zm4.849 5.726h16.923l-1.873 9.709H7.679l-1.03-9.709Z"/><path d="M10.917 23.62a1.909 1.909 0 1 1-3.818 0 1.909 1.909 0 0 1 3.818 0ZM22.372 23.62a1.91 1.91 0 1 1-3.819 0 1.91 1.91 0 0 1 3.819 0Z"/></g></svg>
3705      </i>
3706    <!-- 购物车数量 -->
3707    <spz-event target-id="header_cart_count_render_md" target-api="render" event-name="dj.addToCart;dj.cartChange;" layout="logic" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-event>
3708    <spz-render id="header_cart_count_render_md" layout="container" src="/api/cart/count" class="i-spzhtml-layout-container" i-spzhtml-layout="container">
3709      <template>
3710        <div>
3711          <span class="header__cart-count absolute rounded-full leading-none text-center" spz-if="${data.data && data.data.count > 0}">${data.data && data.data.count}</span>
3712        </div>
3713      </template>
3714    </spz-render>
3715  </a>
3716  <i class="header__drawer_icon  flex lg:hidden cursor-pointer" @tap="shoplaza-section-announcement.toggleClass(class='header_mask_open', force=true);header_drawer.open()">
3717      <svg class="" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity=".01"><path opacity=".696" fill="currentColor" d="M0 0h28v28H0z"/></g><g fill="currentColor"><path d="M24.17 6.17a.83.83 0 1 1 0 1.66H3.83a.83.83 0 0 1 0-1.66h20.34ZM24.17 13.17a.83.83 0 1 1 0 1.66H3.83a.83.83 0 1 1 0-1.66h20.34ZM24.17 20.17a.83.83 0 1 1 0 1.66H3.83a.83.83 0 1 1 0-1.66h20.34Z"/></g></svg>
3718    </i>
3719  </div>
3720    </div>
3721  </div>
3722
3723  <div
3724    class="header__fixed-top header__scroll_hide pointer-events-auto"
3725    id="header-scrollable-container-mobile"
3726  >
3727    </div>
3728  <div class="plugin__fixed-div pointer-events-auto"></div>
3729</header>
3730<style>
3731    .header__search_sidebar{
3732      height: 100vh;
3733      width: 100%;
3734      pointer-events: none;
3735    }
3736    .header__search_sidebar_content{
3737      pointer-events: auto;
3738      overflow: hidden auto;
3739      max-height: 100%;
3740      background-color: var(--color-header-bg);
3741    }
3742    .header__search-modal-form{
3743      position: sticky;
3744      top: 0;
3745      z-index: 10;
3746      background-color: var(--color-header-bg);
3747    }
3748    .header__search_sidebar-input{
3749      padding: 24px 16px;
3750      color: var(--color-header-search-text);
3751    }
3752    .header__search_sidebar + .i-spzhtml-sidebar-mask{
3753      pointer-events: auto;
3754    }
3755  </style>
3756  <spz-sidebar class="header__search_sidebar i-spzhtml-layout-nodisplay" id="header_search_sidebar" layout="nodisplay" side="top" @close="shoplaza-section-announcement.toggleClass(class='header_mask_open', force=false);" hidden="" style="display: none" i-spzhtml-layout="nodisplay">
3757    <div class="header__search_sidebar_content">
3758      <div class="page-container header__search-modal-form">
3759        <form class="flex items-center" action="/search" method="get">
3760          <button type="submit" class="clear text-0 text-inherit cursor-pointer">
3761            <svg class="" width="26" height="26" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.925 20.057A9.955 9.955 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.968 9.968 0 0 1-2.864 7.006l4.929 4.928a.8.8 0 0 1-1.132 1.132l-5-5-.008-.01zM20.4 12a8.4 8.4 
37610 1 1-16.8 0 8.4 8.4 0 0 1 16.8 0z" fill="currentColor"/></svg>
3762          </button>
3763          <input
3764            @input-debounced="header_search_predictive_render-sidebar.rerender(data=event.value, redo=true);"
3765            class="header__search_sidebar-input flex-1 text-base leading-none type-text-font-family clear"
3766            type="text"
3767            autocomplete="off"
3768            name="q"
3769            placeholder="Search products"
3770          />
3771          <button type="reset" class="header__search-modal-close text-0 text-inherit clear cursor-pointer" @tap="header_search_sidebar.close()">
3772            <svg class="" width="26" height="26" xmlns="http://www.w3.org/2000/svg"><path d="M21.502 5.732A.85.85 0 0 0 20.3 4.53l-7.32 7.32L5.734 4.6a.85.85 0 0 0-1.202 1.203l7.248 7.247L4.53 20.3A.85.85 0 0 0 5.733 21.5l7.248-7.248 7.319 7.319a.85.85 0 0 0 1.202-1.202l-7.319-7.319 7.319-7.319z" fill="currentColor"/></svg>
3773          </button>
3774        </form>
3775      </div>
3776      <style>
3777    .header__search_predictive_render{
3778      background-color: var(--color-header-bg);
3779    }
3780    .header__search_product_list_wrap{
3781      padding: 24px 0 70px;
3782    }
3783    .header__search_product_list{
3784      display: grid;
3785      grid-template-columns: repeat(2, minmax(0, 1fr));
3786      column-gap: 16px;
3787      row-gap: 24px;
3788    }
3789    .header__search_product_list[data-empty],
3790    .header__search_product__empty,
3791    .header__search_product__view_more_wrap{
3792      display: none;
3793    }
3794    .header__search_product_list[hasmore] + .header__search_product__view_more_wrap,
3795    .header__search_product_list[data-empty] ~ .header__search_product__empty{
3796      display: flex;
3797      justify-content: center;
3798      align-items: center;
3799    }
3800    .header__search_product_list[loading] ~ .loading{
3801      display: var(--loading-show);
3802    }
3803    .header__search_product_list ~ .loading .loading-bounce{
3804      border-bottom-color: var(--color-body-text);
3805    }
3806    .header__search_product__view_more{
3807      margin: 24px auto 0;
3808      padding: 8px 24px;
3809      font-weight: 600;
3810      font-size: 16px;
3811      line-height: 24px;
3812    }
3813    @media (min-width: 960px) {
3814      .header__search_product_list{
3815        grid-template-columns: repeat(4, minmax(0, 1fr));
3816        column-gap: 24px;
3817      }
3818      .header__search_product_list_wrap{
3819        padding: 24px 0 40px;
3820      }
3821    }
3822  </style>
3823  <template id="header_search_product_list_template-sidebar">
3824    <spz-product-snippet
3825  data-source-id="header_search_product_list-sidebar"
3826  product-id="${data.id}"
3827  layout="container"
3828  template="product-snippet-template"
3829  variant-thumb-names="color"
3830  thumb-max-num="3"
3831  ></spz-product-snippet>
3832</template>
3833  <spz-render id="header_search_predictive_render-sidebar" class="header__search_predictive_render i-spzhtml-layout-container" layout="container" manual i-spzhtml-layout="container">
3834    <template>
3835      <div class="page-container">
3836        ${(function(){
3837          if (data === undefined || typeof data !== 'string' || data == '') return '';
3838          const keyword = encodeURIComponent(data);
3839          return `
3840            <div class="header__search_product_list_wrap">
3841              <spz-list
3842                class="header__search_product_list"
3843                id="header_search_product_list-sidebar"
3844                layout="container"
3845                initial-page="0"
3846                size="limit"
3847                page-size="4"
3848                src="/api/search?keyword=${keyword}"
3849                list="data.products"
3850                total="data.total"
3851                template="header_search_product_list_template-sidebar"
3852              ></spz-list>
3853              <div class="header__search_product__view_more_wrap">
3854                <a
3855                  href="/search?q=${keyword}"
3856                  class="header__search_product__view_more button-primary rounded-btn no-underline">
3857                  View more
3858                </a>
3859              </div>
3860              <div class="header__search_product__empty">
3861                Your search for '${data}' did not yield any results.
3862              </div>
3863              <div class="loading items-center justify-center " role="loading"   hide >
3864  <div class="loading-bounce"></div>
3865</div>
3866            </div>
3867          `
3868        })()}
3869      </div>
3870    </template>
3871  </spz-render>
3872</div>
3873  </spz-sidebar>
3874<style>
3875  .header__drawer{
3876    width: 330px;
3877    top: 0;
3878    bottom: 0;
3879    max-width: 100vw !important;
3880    line-height: 1.4;
3881  }
3882  .header__drawer,
3883  .header__drawer + .i-spzhtml-sidebar-mask{
3884    pointer-events: auto;
3885  }
3886  .header__drawer a{
3887    color: inherit;
3888    text-decoration: none;
3889  }
3890  .header__drawer_header{
3891    position: sticky;
3892    top: 0;
3893    z-index: 10;
3894    height: 62px;
3895    border-bottom: 1px solid var(--color-border);
3896  }
3897  .header__drawer_close{
3898    width: 62px;
3899    position: absolute;
3900    top: 0;
3901    right: 0;
3902    bottom: 0;
3903    opacity: 0.7;
3904  }
3905  .header__drawer_footer{
3906    position: sticky;
3907    bottom: 0;
3908    z-index: 10;
3909    border-top: 1px solid rgba(230,230,230,0.6);
3910    padding: 16px 20px;
3911  }
3912  .header__drawer_prev{
3913    position: sticky;
3914    top: 0;
3915    z-index: 10;
3916    display: flex;
3917    align-items: center;
3918    border-bottom: 1px solid var(--color-border);
3919    padding: 16px 20px;
3920    background-color: var(--color-body-bg);
3921  }
3922  .header__drawer [spz-nested-submenu]:not([child-open]){
3923    overflow: hidden auto;
3924    max-height: 100%;
3925  }
3926  .header__drawer_menu_item{
3927    display: flex;
3928    align-items: center;
3929    justify-content: space-between;
3930    min-height: 22px;
3931    margin-left: 20px;
3932      padding: 16px 20px 16px 0;
3933    border-bottom: 1px solid var(--color-border);
3934    cursor: pointer;
3935  }
3936  .header__drawer_menu_item a:not([spz-nested-submenu-open]){
3937    flex: 1
3938  }
3939  .header_drawer_menu .header_drawer_menu_first{
3940    overflow: hidden auto;
3941  }
3942  .header_drawer_menu[child-open] .header_drawer_menu_first{
3943    overflow: unset !important;
3944  }
3945  </style>
3946<spz-sidebar id="header_drawer" class="header__drawer  flex flex-col bg-color-body i-spzhtml-layout-nodisplay" side="right" layout="nodisplay" @close="shoplaza-section-announcement.toggleClass(class='header_mask_open', force=false);" hidden="" style="display: none" i-spzhtml-layout="nodisplay">
3947  <div class="header__drawer_header flex-shrink-0 relative flex bg-color-body">
3948    <i class="header__drawer_close flex-center cursor-pointer" @tap="header_drawer.close()">
3949      <svg class="" width="22" height="22" xmlns="http://www.w3.org/2000/svg"><path d="M5.034 3.652a.367.367 0 0 0-.518 0l-.864.864a.367.367 0 0 0 0 .519l5.963 5.963-5.963 5.963a.367.367 0 0 0 0 .519l.864.864a.367.367 0 0 0 .518 0l5.964-5.963 5.963 5.963a.367.367 0 0 0 .519 0l.864-.864a.367.367 0 0 0 0-.519l-5.964-5.963 5.964-5.963a.367.367 0 0 0 0-.519l-.864-.864a.367.367 0 0 0-.519 0l-5.963 5.963-5.964-5.963z" fill="currentColor"/></svg>
3950    </i>
3951  </div>
3952  <div class="flex-1 relative overflow-hidden">
3953    <spz-nested-menu class="header_drawer_menu flex flex-col i-spzhtml-layout-fill i-spzhtml-layout-size-defined" layout="fill" side="right" id="menu-drawer" i-spzhtml-layout="fill">
3954      <ul class="header_drawer_menu_first flex-1 hide-scrollbar">
3955        <li>
3956              <div  class="header__drawer_menu_item">
3957                <a class="flex items-start " 
3958href="/" >
3959  <span>Home</span>
3960  </a>
3961                </div>
3962              </li>
3963          <li>
3964              <div  class="header__drawer_menu_item">
3965                <a class="flex items-start " 
3966href="/collections/necklace" >
3967  <span>Necklace</span>
3968  </a>
3969                </div>
3970              </li>
3971          <li>
3972              <div  class="header__drawer_menu_item">
3973                <a class="flex items-start " 
3974href="/collections/ring" >
3975  <span>Ring</span>
3976  </a>
3977                </div>
3978              </li>
3979          <li>
3980              <div  class="header__drawer_menu_item">
3981                <a class="flex items-start " 
3982href="/collections/exquisite-bracelet" >
3983  <span>Exquisite bracelet</span>
3984  </a>
3985                </div>
3986              </li>
3987          <div class="header__drawer_plugins">
3988          <div class="empty-hidden  plugin__translate-header px-5 my-10"></div>
3989          <div class="empty-hidden  plugin__currency px-5 my-10"></div>
3990        </div>
3991      </ul>
3992
3993      <li class="header__drawer_menu_item"><a href="/account/login">Log in</a></li>
3994          <li class="header__drawer_menu_item"><a href="/account/register">Create an account</a></li>
3995          </spz-nested-menu>
3996  </div>
3997</spz-sidebar>
3998</div>
3999<spz-script layout="logic" type="application/javascript">
4000  (function(){
4001    let w = window.innerWidth;
4002    function setHeaderCssVar() {
4003      const headerEle = document.getElementById('shoplaza-section-header');
4004      if(!headerEle){ return };
4005      document.body.style.setProperty('--window-height', `${window.innerHeight}px`);
4006      document.body.style.setProperty('--header-height', `${headerEle.clientHeight}px`);
4007
4008      const mdScorllHideEle = headerEle.querySelector('.header__mobile .header__scroll_hide');
4009      if (mdScorllHideEle) {
4010        document.body.style.setProperty('--header-scroll-hide-height-md', `${mdScorllHideEle.clientHeight}px`);
4011      }
4012
4013      const pcScorllHideEle = headerEle.querySelector('.header__desktop .header__scroll_hide');
4014      if (pcScorllHideEle) {
4015        document.body.style.setProperty('--header-scroll-hide-height-pc', `${pcScorllHideEle.clientHeight}px`);
4016      }
4017
4018    }
4019    function handlResize() {
4020      if(w == window.innerWidth){return};
4021      w = window.innerWidth;
4022      setHeaderCssVar();
4023    };
4024    function init(){
4025      setHeaderCssVar();
4026      window.removeEventListener('resize', window._theme_header_listener)
4027      window._theme_header_listener = handlResize;
4028      window.addEventListener('resize', window._theme_header_listener);
4029    }
4030    init();
4031  })();
4032</spz-script>
4033
4034</div>
4035      <div class="plugin__static-div"></div>
4036      <div class="main-content" id="main-content">
4037        <div id="shoplaza-section-1717490469203" class="shoplaza-section" data-section-id="1717490469203" data-section-type="cart_shopping" data-section-style=""><style>
4038  .main-content {
4039    padding-bottom: 32px;
4040  }
4041
4042  @media (min-width: 960px) {
4043    .main-content {
4044      padding-bottom: 66px;
4045    }
4046  }
4047
4048  #cart-render {
4049    width: 0;
4050    height: 0;
4051  }
4052
4053  #cart-render[loading] ~ *,
4054  #cart-render:not([finish]) ~ * {
4055    display: none;
4056  }
4057
4058  #cart-render[loading] ~ .cart-loading,
4059  #cart-render[interact-loading] ~ .cart-loading {
4060    display: var(--loading-show);
4061  }
4062
4063  #cart-render:not([finish]) ~ .cart-content > header,
4064  #cart-render:not([finish]) ~ .cart-content .cart-items-top-container,
4065  #cart-render[finish][data-empty] ~ .cart-content .cart-items-top-container,
4066  #cart-render[finish][data-empty] ~ .cart-content .cart-subtotal-outer-container,
4067  #cart-render[finish][data-empty] ~ .cart-content .cart-summary-sticky-container {
4068    display: none;
4069  }
4070
4071  .cart-content .cart-empty {
4072    padding: 80px 0;
4073  }
4074
4075  .cart-content spz-render {
4076    min-width: unset !important;
4077  }
4078
4079  .cart-continue-shopping {
4080    width: 100%;
4081    height: 46px;
4082  }
4083
4084  .cart-item-image {
4085    flex-shrink: 0;
4086    width: 19.55%;
4087  }
4088
4089  .cart-qty spz-quantity {
4090    width: 81px;
4091  }
4092
4093  .cart-qty spz-quantity .i-spzhtml-quantity-number-decrease[disabled] {
4094    cursor: pointer;
4095  }
4096
4097  .cart-qty spz-quantity input[type="number"] {
4098    width: 25px;
4099  }
4100
4101  .cart-qty spz-quantity span[role="button"] {
4102    padding: 6px;
4103    border-radius: var(--global-border-radius);
4104    border-color: var(--color-border) !important;
4105  }
4106
4107  .cart-qty-minimum-tip {
4108    color: #FF3F02;
4109  }
4110
4111  .cart-subtotal-free-shipping + .cart-subtotal-content {
4112    margin-top: 10px;
4113  }
4114
4115  .cart-subtotal-content {
4116    padding: 12px;
4117    border-radius: 2px;
4118    background-color: var(--color-cart-subtotal-bg);
4119  }
4120
4121  .cart-invalid-msg {
4122    color: #FF3F02;
4123  }
4124
4125  .cart-checkout-btn,
4126  .cart-summary-checkout-btn {
4127    width: 100%;
4128    height: 46px;
4129  }
4130
4131  .cart-subtotal-render {
4132    min-height: 1px;
4133  }
4134  @media (max-width: 959.98px) {
4135    .cart-item {
4136      padding: 16px 0;
4137    }
4138
4139    .cart-qty-minimum-tip {
4140      margin-bottom: -8px;
4141    }
4142
4143    .cart-summary-sticky-container {
4144      z-index: var(--z-index-sticky);
4145      position: fixed;
4146      left: 0;
4147      bottom: 0;
4148      width: 100%;
4149      background-color: var(--color-body-bg);
4150      box-shadow: 0 -8px 20px 0 rgba(34, 34, 34, .08);
4151      opacity: 0;
4152      transform: translateY(140%);
4153    }
4154
4155    .cart-summary-sticky-container .ios_safari_bottom_bar {
4156      display: none;
4157    }
4158
4159    .cart-summary-sticky-container[hidden] {
4160      display: block !important;
4161      pointer-events: none;
4162    }
4163
4164    .cart-summary-sticky-container[show] {
4165      animation: sticky-bottom-show .7s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
4166    }
4167
4168    @keyframes sticky-bottom-show {
4169      0% { opacity: 1;}
4170      100% { transform: translateY(0); opacity: 1; }
4171    }
4172
4173    .cart-summary-sticky-checkout-btn {
4174      min-height: 46px;
4175      margin-top: 0;
4176      width: 126px;
4177      padding: 14px 12px;
4178      word-break: break-all;
4179    }
4180
4181    .cart-summary-discount-btn {
4182      display: flex;
4183      align-items: center;
4184      margin-top: 4px;
4185      padding: 4px 8px;
4186      color: #F16515;
4187      background-color: #fff;
4188      border-radius: 100px;
4189    }
4190
4191    .cart-summary-discount-btn > span {
4192      margin-right: 2px;
4193    }
4194
4195    html[dir="rtl"] .cart-summary-discount-btn > span {
4196      margin-left: 2px;
4197      margin-right: 0;
4198    }
4199
4200    .cart-summary-discount-btn svg {
4201      transition: transform .2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
4202    }
4203
4204    .cart-summary-discount-list.open .cart-summary-discount-btn svg {
4205      transform: rotate(-180deg);
4206    }
4207
4208    .cart-summary-discount-list ul {
4209      display: none;
4210    }
4211
4212    .cart-summary-discount-list.open ul {
4213      display: block;
4214    }
4215
4216    .cart-summary-sticky-render .cart-summary-discount-btn {
4217      background-color: #F6F6F6;
4218    }
4219
4220    .cart-summary-sticky-modal {
4221      z-index: calc(var(--z-index-modal) + 1);
4222      width: 100% !important;
4223      max-height: 85vh !important;
4224      display: flex;
4225      align-items: flex-end;
4226      justify-content: flex-end;
4227      pointer-events: none;
4228    }
4229
4230    .cart-summary-sticky-modal .ios_safari_bottom_bar {
4231      display: none;
4232    }
4233
4234    .cart-summary-sticky-modal-inner {
4235      width: 100%;
4236      padding: 8px 16px 16px;
4237      border-radius: 2px;
4238      background-color: #fff;
4239      box-shadow: 0 -8px 20px 0 rgba(34, 34, 34, .08);
4240      pointer-events: auto;
4241    }
4242
4243    .cart-summary-sticky-modal-close {
4244      margin-right: -8px;
4245    }
4246
4247    html[dir="rtl"] .cart-summary-sticky-modal-close {
4248      margin-left: -8px;
4249      margin-right: 0;
4250    }
4251
4252    .cart-summary-sticky-modal ~ .i-spzhtml-sidebar-mask {
4253      top: unset;
4254      bottom: 0;
4255    }
4256
4257    .cart-checkout-btn-mobile {
4258      flex-shrink: 0;
4259      width: 40.268%;
4260      margin-top: 0;
4261    }
4262
4263    .cart-summary-sticky-render .cart-summary-discount-btn svg {
4264      transform: rotate(0) !important;
4265    }
4266
4267    .cart-item-delete-btn {
4268      position: relative;
4269    }
4270
4271    .cart-item-delete-btn::before {
4272      content: '';
4273      position: absolute;
4274      top: -8px;
4275      left: -8px;
4276      right: -8px;
4277      bottom: -8px;
4278    }
4279  }
4280
4281  @media (min-width: 960px) {
4282    .cart-title {
4283      line-height: 1.1667;
4284      font-size: calc(var(--type-heading-font-size) * .8);
4285    }
4286
4287    .cart-content .cart-empty {
4288      padding: 60px 0 120px;
4289    }
4290
4291    .cart-continue-shopping {
4292      width: 420px;
4293    }
4294
4295    .cart-header-continue-shopping-btn {
4296      border-bottom: 1px solid var(--color-body-text);
4297    }
4298
4299    #cart-render[data-empty] ~ .cart-content .cart-header-wrapper {
4300      display: none;
4301    }
4302
4303    .cart-items-header,
4304    .cart-item {
4305      display: grid;
4306      grid-template-columns: 50% 16.13% 24.2%;
4307      gap: 4.8387%;
4308    }
4309
4310    .cart-items-header {
4311      line-height: 1.14;
4312      border-bottom: 1px solid var(--color-border);
4313    }
4314
4315    .cart-items-header li {
4316      padding: 16px 0;
4317    }
4318
4319    .cart-item-image {
4320      width: 19.35%;
4321    }
4322
4323    .cart-qty spz-quantity {
4324      width: 93px;
4325    }
4326
4327    .cart-qty spz-quantity input[type="number"] {
4328      width: 37px;
4329    }
4330
4331    .cart-subtotal-outer-container {
4332      width: 37.74%;
4333    }
4334  }
4335</style>
4336<spz-event target-id="cart-render" target-api="render" event-name="dj.addToCart" layout="logic" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-event>
4337
4338<div id="cart">
4339  <spz-cart id="cart-render" layout="container" empty-item="cart.line_items" @mounted="cart-items-render.rerender(data=event.cart);cart-subtotal-render.rerender(data=event.cart);cart-subtotal-free-shipping.rerender(data=event.cart);cart-summary-sticky-render.rerender(data=event.cart);" @cartincrease="theme-toast-success.showToast(content='Increased successfully')" @cartdecrease="theme-toast-success.showToast(content='Decreased successfully')" @cartchange="cart-items-render.rerender(data=event.cart);cart-subtotal-render.rerender(data=event.cart);cart-subtotal-free-shipping.rerender(data=event.cart);cart-summary-sticky-render.rerender(data=event.cart);" @cartempty="cart-payment-breakdown.toggleClass(class='hidden', force=true);" @cartitemexists="cart-payment-breakdown.toggleClass(class='hidden', force=false);" class="i-spzhtml-layout-container" i-spzhtml-layout="container">
4340    <template><div></div></template>
4341  </spz-cart>
4342
4343  <div class="loading items-center justify-center cart-loading" role="loading"  has-full-mask   hide >
4344  <div class="loading-bounce"></div>
4345</div>
4346
4347  <article class="cart-content" id="cart-content">
4348
4349    <header class="cart-header-wrapper md:hidden page-container flex items-start justify-between" >
4350  <h4 class="cart-title m-0 type-heading-font-family title-color">Cart</h4>
4351  <button class="cart-header-continue-shopping-btn clear" type="button" @tap="SPZ.history(type='back', defaultUrl='/');">
4352    Continue shopping
4353  </button>
4354</header>
4355        <div class="page-container cart-items-top-container w-full mt-4">
4356  <div class="cart__discount-container mt-2 empty-hidden"></div>
4357</div>
4358
4359<spz-render class="page-container cart-items-render i-spzhtml-layout-container" id="cart-items-render" layout="container" manual i-spzhtml-layout="container">
4360  <template>
4361    <div>
4362      <section spz-if="${!!(data.line_items && data.line_items.length > 0)}">
4363        <ul class="md:hidden cart-items-header clear mt-4 color-text-default">
4364          <li>Product</li>
4365          <li>Quantity</li>
4366          <li class="text-right">Price</li>
4367        </ul>
4368
4369        <ul class="clear cart-items">
4370          <li class="cart-item lg:mt-7" spz-for="item in data.line_items" key="item.id">
4371            <div class="flex items-start">
4372              <a
4373                class="cart-item-image"
4374                spz-href="${item.product_url}?variant=${item.variant_id}"
4375                data-track-type="image"
4376                data-track-product_id="${item.variant_id}"
4377                data-track="click"
4378                data-track-content="product_link"
4379                data-track-product-id="${item.product_id}"
4380                data-track-position="cart"
4381              >
4382                <spz-img class="rounded-global-fixed overflow-hidden" width="${item.image.width}" height="${item.image.height}" layout="responsive" src="${item.image.src}" alt="${item.image.alt}" object-fit="cover" auto-fit></spz-img>
4383              </a>
4384
4385              <div class="flex-1 ml-4">
4386                <div class="md:flex md:items-start md:justify-between">
4387                  <div class="">
4388  <a
4389    class="product-title-color no-underline leading-1.25 line-clamp-2 lg:line-clamp-3"
4390    spz-href="${item.product_url}"
4391    data-track="click"
4392    data-track-content="product_link"
4393    data-track-product-id="${item.product_id}"
4394    data-track-position="cart"
4395  >
4396    ${item.product_title}
4397  </a>
4398  <ul class="clear break-words color-body-70 leading-1.25 mt-1 lg:mt-2">
4399    <li>${item.options.map(option => option.value).join('/')}</li>
4400    <li class="mt-1" spz-for="propertie in item.parsedProperties">
4401      ${propertie.name}/${propertie.isImage ? `<a class="no-underline text-inherit" spz-href="${propertie.value}" target="_blank" >View image</a>` : propertie.value}
4402    </li>
4403  </ul>
4404  <div class="discount_gift_content mt-1 lg:mt-2" spz-if="${!!item.is_free_gift}">
4405  <svg class=""  width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.236 2.684c0-.407.381-.829.978-.829.58 0 1.232.481 1.232 1.29v.368H4.98c-.445 0-.915-.006-1.275-.138a.74.74 0 0 1-.343-.228c-.063-.083-.125-.22-.125-.463Zm3.783.83h-.467v-.37c0-.808.652-1.289 1.232-1.289.597 0 .978.422.978.83 0 .242-.062.378-.125.462a.74.74 0 0 1-.344.227c-.359.133-.828.14-1.274.14Zm2.848-.83c0 .309-.057.586-.169.83h.998a.829.829 0 0 1 .83.828v1.382H.472V4.342a.829.829 0 0 1 .829-.829H2.3a1.96 1.96 0 0 1-.17-.829C2.13 1.562 3.117.75 4.215.75c.644 0 1.325.302 1.785.845A2.387 2.387 0 0 1 7.784.75c1.099 0 2.083.812 2.083 1.934Zm-4.42 8.566V6.829H1.024v3.592c0 .459.37.829.83.829h3.591Zm1.105 0V6.829h4.42v3.592c0 .459-.37.829-.828.829H6.552Z" fill="#EB391B"/></svg>
4406  <div class="discount__gift_lan">Free gift</div>
4407</div>
4408
4409  <div spz-if="${item.mixed_wholesale && false}">
4410    <style>
4411  .mixed_wholesale_label {
4412    padding: 2px 4px;
4413  }
4414
4415  .mixed_wholesale_tooltip .i-spzhtml-tooltip-arrow:before,
4416  .mixed_wholesale_tooltip .i-spzhtml-tooltip-inner {
4417    background: var(--color-body-bg);
4418    color: var(--color-body-text);
4419  }
4420
4421  .mixed_wholesale_tooltip {
4422    max-width: 100%;
4423    border-radius: 4px;
4424    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
4425  }
4426
4427  @media (min-width: 960px) {
4428    .mixed_wholesale_tooltip {
4429      max-width: 450px;
4430    }
4431  }
4432</style>
4433<div class="mt-1 mixed_wholesale_label inline-flex color-custom-label-text bg-custom-label text-xs rounded" id="mixed-${item.id}">
4434  Mixed Lot
4435</div>
4436<spz-tooltip layout="logic" content="You can enjoy the wholesale price when you add up to {{count}} pieces of current goods and any goods that support &quot;Mixed Lot&quot; in the store." interact="hover" for="mixed-${item.id}" placement="bottom" overlay-class="mixed_wholesale_tooltip">
4437</spz-tooltip>
4438  </div>
4439</div>
4440                  <button class="clear flex color-body-70 lg:hidden cart-item-delete-btn flex-shrink-0 ml-4" type="button" @tap="cart-render.delete(id=${item.id})">
4441  <svg
4442  class="icon-delete "
4443  xmlns="http://www.w3.org/2000/svg"
4444  width="16"
4445  height="17"
4446  viewBox="0 0 16 17"
4447  fill="none"
4448>
4449  <path d="M6.375 2.65625C6.375 2.4822 6.44414 2.31528 6.56721 2.19221C6.69028 2.06914 6.8572 2 7.03125 2H9.21875C9.3928 2 9.55972 2.06914 9.68279 2.19221C9.80586 2.31528 9.875 2.4822 9.875 2.65625C9.875 2.8303 9.80586 2.99722 9.68279 3.12029C9.55972 3.24336 9.3928 3.3125 9.21875 3.3125H7.03125C6.8572 3.3125 6.69028 3.24336 6.56721 3.12029C6.44414 2.99722 6.375 2.8303 6.375 2.65625ZM2 5.28125C2 5.1072 2.06914 4.94028 2.19221 4.81721C2.31528 4.69414 2.4822 4.625 2.65625 4.625H13.5938C13.7678 4.625 13.9347 4.69414 14.0578 4.81721C14.1809 4.94028 14.25 5.1072 14.25 5.28125C14.25 5.4553 14.1809 5.62222 14.0578 5.74529C13.9347 5.86836 13.7678 5.9375 13.5938 5.9375H2.65625C2.4822 5.9375 2.31528 5.86836 2.19221 5.74529C2.06914 5.62222 2 5.4553 2 5.28125ZM7.03125 8.125C6.8572 8.125 6.69028 8.19414 6.56721 8.31721C6.44414 8.44028 6.375 8.6072 6.375 8.78125V10.9688C6.375 11.1428 6.44414 11.3097 6.56721 11.4328C6.69028 11.5559 6.8572 11.625 7.03125 11.625C7.2053 11.625 7.37222 11.5559 7.49529 11.4328C7.61836 11.3097 7.687
44495 11.1428 7.6875 10.9688V8.78125C7.6875 8.6072 7.61836 8.44028 7.49529 8.31721C7.37222 8.19414 7.2053 8.125 7.03125 8.125ZM8.5625 8.78125C8.5625 8.6072 8.63164 8.44028 8.75471 8.31721C8.87778 8.19414 9.0447 8.125 9.21875 8.125C9.3928 8.125 9.55972 8.19414 9.68279 8.31721C9.80586 8.44028 9.875 8.6072 9.875 8.78125V10.9688C9.875 11.1428 9.80586 11.3097 9.68279 11.4328C9.55972 11.5559 9.3928 11.625 9.21875 11.625C9.0447 11.625 8.87778 11.5559 8.75471 11.4328C8.63164 11.3097 8.5625 11.1428 8.5625 10.9688V8.78125ZM4.1875 7.03125C4.1875 6.8572 4.11836 6.69028 3.99529 6.56721C3.87222 6.44414 3.7053 6.375 3.53125 6.375C3.3572 6.375 3.19028 6.44414 3.06721 6.56721C2.94414 6.69028 2.875 6.8572 2.875 7.03125V13.5938C2.875 14.2319 3.12852 14.844 3.57977 15.2952C4.03103 15.7465 4.64307 16 5.28125 16H10.9688C11.2847 16 11.5976 15.9378 11.8896 15.8168C12.1815 15.6959 12.4468 15.5187 12.6702 15.2952C12.8937 15.0718 13.0709 14.8065 13.1918 14.5146C13.3128 14.2226 13.375 13.9097 13.375 13.5938V7.03125C13.375 6.8572 13.3059 6.69028 13.1828 6.56721C13.0597 6.44414 12.8928 6.375 12.7188 6.375C12.5447 6.375 12.3778 6.44414 12.2547 6.56721C12.1316 6.69028 12.0625 6.8572 12.0625 7.03125V13.5938C12.0625 14.1975 11.5725 14.6875 10.9688 14.6875H5.28125C4.6775 14.6875 4.1875 14.1975 4.1875 13.5938V7.03125Z" fill="currentColor" fill-opacity="0.6"/>
4450</svg>
4451</button>
4452                </div>
4453
4454                <div class="lg:hidden mt-2 cart-qty-minimum-tip" spz-if="${!!item.item_text}">${item.item_text}</div>
4455
4456                <div class="lg:hidden mt-2">
4457                  <div class="flex items-center justify-between">
4458                    <div class="flex flex-wrap items-center mr-1 leading-1.25">
4459  <spz-currency class="${!!item.final_line_price && (+item.final_line_price < +item.line_price) ? 'color-compare-price line-through md:order-1 ml-1 body-minus-2' : 'color-price font-medium font-medium body-plus-2'}" layout="container" value="${item.line_price}"></spz-currency>
4460  <spz-currency class="color-price font-medium font-medium body-plus-2 " spz-if="${!!item.final_line_price && (+item.final_line_price < +item.line_price)}" layout="container" value="${item.final_line_price}"></spz-currency>
4461</div>
4462                    <div class="flex-shrink-0 flex flex-col cart-qty">
4463  <div class="break-words" spz-if="${!!item.disabled}">
4464    *${item.quantity}
4465  </div>
4466  <spz-quantity
4467    spz-else
4468    icon-class="clear flex items-center justify-center flex-shrink-0 h-full w-7"
4469    input-class="clear flex-1 h-full text-center body-base color-body-text"
4470    name="quantity"
4471    value="${item.quantity}"
4472    min="1"
4473    max="${item.available_quantity}"
4474    height="28"
4475    layout="flex-item"
4476    @quantityChange="cart-render.update(value=event.value,id='${item.id}');"
4477    @quantityChangeUnderflow="cart-render.delete(id='${item.id}');"
4478  >
4479    <svg class="" width="13" height="13" xmlns="http://www.w3.org/2000/svg" role="decrease"><path d="M1 6h11v1H1z" fill-rule="evenodd" fill="currentColor"/></svg>
4480    <svg class="" width="13" height="13" xmlns="http://www.w3.org/2000/svg" role="increase"><path d="M7 1v5h5v1H7v5H6V7H1V6h5V1h1z" fill="currentColor"/></svg>
4481  </spz-quantity>
4482
4483  <div class="hidden mt-1" spz-if="${!!item.item_text}">${item.item_text}</div>
4484</div>
4485                  </div>
4486                  <div class="flex items-start flex-wrap  mt-1 body-minus-2 leading-1.25 color-body-60" spz-for="discount_item in item.discount_applications">
4487  <div class="flex">
4488    <spz-img spz-if="${!!discount_item.icon}" class="flex-shrink-0 mr-1 mt-0.5" src="${discount_item.icon}" layout="fixed" width="12" height="12" alt="item.image.alt || item.product_title" object-fit="contain"></spz-img>
4489    <span>${discount_item.title}</span>
4490  </div>
4491  <span spz-if="${discount_item.discount_amount > 0 || discount_item.amount > 0}" class="flex-shrink-0">(-<spz-currency style="display: inline-block;" layout="container" value="${discount_item.discount_amount || discount_item.amount}"></spz-currency>)</span>
4492</div>
4493                </div>
4494              </div>
4495            </div>
4496            <div class="md:hidden">
4497              <div class="flex items-center">
4498                <div class="flex-shrink-0 flex flex-col cart-qty">
4499  <div class="break-words" spz-if="${!!item.disabled}">
4500    *${item.quantity}
4501  </div>
4502  <spz-quantity
4503    spz-else
4504    icon-class="clear flex items-center justify-center flex-shrink-0 h-full w-7"
4505    input-class="clear flex-1 h-full text-center body-base color-body-text"
4506    name="quantity"
4507    value="${item.quantity}"
4508    min="1"
4509    max="${item.available_quantity}"
4510    height="28"
4511    layout="flex-item"
4512    @quantityChange="cart-render.update(value=event.value,id='${item.id}');"
4513    @quantityChangeUnderflow="cart-render.delete(id='${item.id}');"
4514  >
4515    <svg class="" width="13" height="13" xmlns="http://www.w3.org/2000/svg" role="decrease"><path d="M1 6h11v1H1z" fill-rule="evenodd" fill="currentColor"/></svg>
4516    <svg class="" width="13" height="13" xmlns="http://www.w3.org/2000/svg" role="increase"><path d="M7 1v5h5v1H7v5H6V7H1V6h5V1h1z" fill="currentColor"/></svg>
4517  </spz-quantity>
4518
4519  <div class="hidden mt-1" spz-if="${!!item.item_text}">${item.item_text}</div>
4520</div>
4521                <button class="clear flex color-body-70 ml-6" type="button" @tap="cart-render.delete(id=${item.id})">
4522  <svg
4523  class="icon-delete "
4524  xmlns="http://www.w3.org/2000/svg"
4525  width="16"
4526  height="17"
4527  viewBox="0 0 16 17"
4528  fill="none"
4529>
4530  <path d="M6.375 2.65625C6.375 2.4822 6.44414 2.31528 6.56721 2.19221C6.69028 2.06914 6.8572 2 7.03125 2H9.21875C9.3928 2 9.55972 2.06914 9.68279 2.19221C9.80586 2.31528 9.875 2.4822 9.875 2.65625C9.875 2.8303 9.80586 2.99722 9.68279 3.12029C9.55972 3.24336 9.3928 3.3125 9.21875 3.3125H7.03125C6.8572 3.3125 6.69028 3.24336 6.56721 3.12029C6.44414 2.99722 6.375 2.8303 6.375 2.65625ZM2 5.28125C2 5.1072 2.06914 4.94028 2.19221 4.81721C2.31528 4.69414 2.4822 4.625 2.65625 4.625H13.5938C13.7678 4.625 13.9347 4.69414 14.0578 4.81721C14.1809 4.94028 14.25 5.1072 14.25 5.28125C14.25 5.4553 14.1809 5.62222 14.0578 5.74529C13.9347 5.86836 13.7678 5.9375 13.5938 5.9375H2.65625C2.4822 5.9375 2.31528 5.86836 2.19221 5.74529C2.06914 5.62222 2 5.4553 2 5.28125ZM7.03125 8.125C6.8572 8.125 6.69028 8.19414 6.56721 8.31721C6.44414 8.44028 6.375 8.6072 6.375 8.78125V10.9688C6.375 11.1428 6.44414 11.3097 6.56721 11.4328C6.69028 11.5559 6.8572 11.625 7.03125 11.625C7.2053 11.625 7.37222 11.5559 7.49529 11.4328C7.61836 11.3097 7.6875 11.1428 7.6875 10.9688V8.78125C7.6875 8.6072 7.61836 8.44028 7.49529 8.31721C7.37222 8.19414 7.2053 8.125 7.03125 8.125ZM8.5625 8.78125C8.5625 8.6072 8.63164 8.44028 8.75471 8.31721C8.87778 8.19414 9.0447 8.125 9.21875 8.125C9.3928 8.125 9.55972 8.19414 9.68279 8.31721C9.80586 8.44028 9.875 8.6072 9.875 8.78125V10.9688C9.875 11.1428 9.80586 11.3097 9.68279 11.4328C9.55972 11.5559 9.3928 11.625 9.21875 11.625C9.0447 11.625 8.87778 11.5559 8.75471 11.4328C8.63164 11.3097 8.5625 11.1428 8.5625 10.9688V8.78125ZM4.1875 7.03125C4.1875 6.8572 4.11836 6.69028 3.99529 6.56721C3.87222 6.44414 3.7053 6.375 3.53125 6.375C3.3572 6.375 3.19028 6.44414 3.06721 6.56721C2.94414 6.69028 2.875 6.8572 2.875 7.03125V13.5938C2.875 14.2319 3.12852 14.844 3.57977 15.2952C4.03103 15.7465 4.64307 16 5.28125 16H10.9688C11.2847 16 11.5976 15.9378 11.8896 15.8168C12.1815 15.6959 12.4468 15.5187 12.6702 15.2952C12.8937 15.0718 13.0709 14.8065 13.1918 14.5146C13.3128 14.2226 13.375 13.9097 13.375 13.5938V7.03125C13.375 6.8572 13.3059 6.69028 13.1828 6.56721C13.0597 6.44414 12.8928 6.375 12.7188 6.375C12.5447 6.375 12.3778 6.44414 12.2547 6.56721C12.1316 6.69028 12.0625 6.8572 12.0625 7.03125V13.5938C12.0625 14.1975 11.5725 14.6875 10.9688 14.6875H5.28125C4.6775 14.6875 4.1875 14.1975 4.1875 13.5938V7.03125Z" fill="currentColor" fill-opacity="0.6"/>
4531</svg>
4532</button>
4533              </div>
4534              <div class="mt-1 cart-qty-minimum-tip" spz-if="${!!item.item_text}">${item.item_text}</div>
4535            </div>
4536            <div class="md:hidden text-right">
4537              <div class=" leading-1.25">
4538  <spz-currency class="${!!item.final_line_price && (+item.final_line_price < +item.line_price) ? 'color-compare-price line-through ' : 'color-price font-medium font-medium body-plus-2'}" layout="container" value="${item.line_price}"></spz-currency>
4539  <spz-currency class="color-price font-medium font-medium body-plus-2 mt-1" spz-if="${!!item.final_line_price && (+item.final_line_price < +item.line_price)}" layout="container" value="${item.final_line_price}"></spz-currency>
4540</div>
4541              <div class="flex items-start flex-wrap  justify-end mt-1 body-minus-2 leading-1.25 color-body-60 text-right" spz-for="discount_item in item.discount_applications">
4542  <div class="flex">
4543    <spz-img spz-if="${!!discount_item.icon}" class="flex-shrink-0 mr-1 mt-0.5" src="${discount_item.icon}" layout="fixed" width="12" height="12" alt="item.image.alt || item.product_title" object-fit="contain"></spz-img>
4544    <span>${discount_item.title}</span>
4545  </div>
4546  <span spz-if="${discount_item.discount_amount > 0 || discount_item.amount > 0}" class="flex-shrink-0">(-<spz-currency style="display: inline-block;" layout="container" value="${discount_item.discount_amount || discount_item.amount}"></spz-currency>)</span>
4547</div>
4548            </div>
4549          </li>
4550        </ul>
4551      </section>
4552      <div class="cart-empty flex flex-col items-center text-center " spz-else>
4553  <svg class="color-body-70" xmlns="http://www.w3.org/2000/svg" width="80" height="70" fill="none">
4553<path fill="currentColor" fill-opacity=".7" d="M41.867 16.76c.64 0 1.168.486 1.231 1.11l.007.127v17.334a1.238 1.238 0 0 1-2.47.126l-.006-.126V17.997c0-.683.554-1.238 1.238-1.238ZM55.183 17.87a1.238 1.238 0 0 0-2.47.127v17.334l.007.126a1.238 1.238 0 0 0 2.47-.126V17.997l-.007-.126ZM29.081 16.782c.63-.122 1.24.255 1.422.856l.03.123 3.37 17.333a1.238 1.238 0 0 1-2.4.596l-.03-.123-3.37-17.333a1.238 1.238 0 0 1 .978-1.452ZM65.503 17.638a1.238 1.238 0 0 1 2.4.596l-3.37 17.333-.03.123a1.238 1.238 0 0 1-2.4-.596l3.37-17.333.03-.123Z"/><path fill="currentColor" fill-opacity=".7" fill-rule="evenodd" d="M17.622 3.07A3.601 3.601 0 0 0 14.13.355H1.865l-.68.006C.56.425.627.951.627 1.593c0 .684 0 1.238.684 1.238H14.13l.123.007c.484.052.885.413.981.9l7.424 37.368a6.136 6.136 0 0 0-3.525 5.555 6.135 6.135 0 0 0 6.136 6.136h46.229l.126-.007a1.238 1.238 0 0 0-.126-2.47h-46.23l-.194-.005a3.659 3.659 0 0 1-3.465-3.654 3.659 3.659 0 0 1 3.66-3.66h45.533a3.097 3.097 0 0 0 3.041-2.51l5.475-28.477a3.095 3.095 0 0 0-3.038-3.68H18.672l-1.009-5.078-.041-.186Zm1.736 7.74 5.715 29.714h45.73a.62.62 0 0 0 .608-.502l5.475-28.476a.619.619 0 0 0-.606-.736H19.358ZM20.643 62.074a7.57 7.57 0 0 1 7.571-7.57 7.57 7.57 0 1 1-7.57 7.57Zm12.666 0a5.094 5.094 0 1 0-10.189.002 5.094 5.094 0 0 0 10.189-.002ZM62.028 54.504a7.57 7.57 0 1 0 0 15.142 7.57 7.57 0 0 0 0-15.142Zm0 2.477a5.094 5.094 0 1 1 0 10.188 5.094 5.094 0 0 1 0-10.188Z" clip-rule="evenodd"/></svg>
4554  <div class="mt-5 color-body-70 font-medium body-plus-4 leading-1.2">Your shopping bag is empty</div>
4555  <button class="cart-empty-btn button-primary clear flex items-center justify-center text-center mt-5 cart-continue-shopping body-plus-2"  data-track="cart-continue-shopping" @tap="SPZ.history(type='back', defaultUrl='/');" type="button">
4556    Continue shopping
4557  </button>
4558</div>
4559    </div>
4560  </template>
4561</spz-render>
4562        </article>
4563</div>
4564</div>
4564<script>try { if (window.performance || window.webkitPerformance) { var perf = window.performance || window.webkitPerformance;var timing = perf.timing;window.firstTiming = Date.now() - timing.navigationStart;}}catch(e){}</script>
4564<div id="shoplaza-section-1717490478703" class="shoplaza-section" data-section-id="1717490478703" data-section-type="cart_payment_breakdown" data-section-style=""><style>
4565  .main-content {
4566    padding-bottom: 32px;
4567  }
4568
4569  @media (min-width: 960px) {
4570    .main-content {
4571      padding-bottom: 66px;
4572    }
4573  }
4574
4575  #cart-render {
4576    width: 0;
4577    height: 0;
4578  }
4579
4580  #cart-render[loading] ~ *,
4581  #cart-render:not([finish]) ~ * {
4582    display: none;
4583  }
4584
4585  #cart-render[loading] ~ .cart-loading,
4586  #cart-render[interact-loading] ~ .cart-loading {
4587    display: var(--loading-show);
4588  }
4589
4590  #cart-render:not([finish]) ~ .cart-content > header,
4591  #cart-render:not([finish]) ~ .cart-content .cart-items-top-container,
4592  #cart-render[finish][data-empty] ~ .cart-content .cart-items-top-container,
4593  #cart-render[finish][data-empty] ~ .cart-content .cart-subtotal-outer-container,
4594  #cart-render[finish][data-empty] ~ .cart-content .cart-summary-sticky-container {
4595    display: none;
4596  }
4597
4598  .cart-content .cart-empty {
4599    padding: 80px 0;
4600  }
4601
4602  .cart-content spz-render {
4603    min-width: unset !important;
4604  }
4605
4606  .cart-continue-shopping {
4607    width: 100%;
4608    height: 46px;
4609  }
4610
4611  .cart-item-image {
4612    flex-shrink: 0;
4613    width: 19.55%;
4614  }
4615
4616  .cart-qty spz-quantity {
4617    width: 81px;
4618  }
4619
4620  .cart-qty spz-quantity .i-spzhtml-quantity-number-decrease[disabled] {
4621    cursor: pointer;
4622  }
4623
4624  .cart-qty spz-quantity input[type="number"] {
4625    width: 25px;
4626  }
4627
4628  .cart-qty spz-quantity span[role="button"] {
4629    padding: 6px;
4630    border-radius: var(--global-border-radius);
4631    border-color: var(--color-border) !important;
4632  }
4633
4634  .cart-qty-minimum-tip {
4635    color: #FF3F02;
4636  }
4637
4638  .cart-subtotal-free-shipping + .cart-subtotal-content {
4639    margin-top: 10px;
4640  }
4641
4642  .cart-subtotal-content {
4643    padding: 12px;
4644    border-radius: 2px;
4645    background-color: var(--color-cart-subtotal-bg);
4646  }
4647
4648  .cart-invalid-msg {
4649    color: #FF3F02;
4650  }
4651
4652  .cart-checkout-btn,
4653  .cart-summary-checkout-btn {
4654    width: 100%;
4655    height: 46px;
4656  }
4657
4658  .cart-subtotal-render {
4659    min-height: 1px;
4660  }
4661  @media (max-width: 959.98px) {
4662    .cart-item {
4663      padding: 16px 0;
4664    }
4665
4666    .cart-qty-minimum-tip {
4667      margin-bottom: -8px;
4668    }
4669
4670    .cart-summary-sticky-container {
4671      z-index: var(--z-index-sticky);
4672      position: fixed;
4673      left: 0;
4674      bottom: 0;
4675      width: 100%;
4676      background-color: var(--color-body-bg);
4677      box-shadow: 0 -8px 20px 0 rgba(34, 34, 34, .08);
4678      opacity: 0;
4679      transform: translateY(140%);
4680    }
4681
4682    .cart-summary-sticky-container .ios_safari_bottom_bar {
4683      display: none;
4684    }
4685
4686    .cart-summary-sticky-container[hidden] {
4687      display: block !important;
4688      pointer-events: none;
4689    }
4690
4691    .cart-summary-sticky-container[show] {
4692      animation: sticky-bottom-show .7s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
4693    }
4694
4695    @keyframes sticky-bottom-show {
4696      0% { opacity: 1;}
4697      100% { transform: translateY(0); opacity: 1; }
4698    }
4699
4700    .cart-summary-sticky-checkout-btn {
4701      min-height: 46px;
4702      margin-top: 0;
4703      width: 126px;
4704      padding: 14px 12px;
4705      word-break: break-all;
4706    }
4707
4708    .cart-summary-discount-btn {
4709      display: flex;
4710      align-items: center;
4711      margin-top: 4px;
4712      padding: 4px 8px;
4713      color: #F16515;
4714      background-color: #fff;
4715      border-radius: 100px;
4716    }
4717
4718    .cart-summary-discount-btn > span {
4719      margin-right: 2px;
4720    }
4721
4722    html[dir="rtl"] .cart-summary-discount-btn > span {
4723      margin-left: 2px;
4724      margin-right: 0;
4725    }
4726
4727    .cart-summary-discount-btn svg {
4728      transition: transform .2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
4729    }
4730
4731    .cart-summary-discount-list.open .cart-summary-discount-btn svg {
4732      transform: rotate(-180deg);
4733    }
4734
4735    .cart-summary-discount-list ul {
4736      display: none;
4737    }
4738
4739    .cart-summary-discount-list.open ul {
4740      display: block;
4741    }
4742
4743    .cart-summary-sticky-render .cart-summary-discount-btn {
4744      background-color: #F6F6F6;
4745    }
4746
4747    .cart-summary-sticky-modal {
4748      z-index: calc(var(--z-index-modal) + 1);
4749      width: 100% !important;
4750      max-height: 85vh !important;
4751      display: flex;
4752      align-items: flex-end;
4753      justify-content: flex-end;
4754      pointer-events: none;
4755    }
4756
4757    .cart-summary-sticky-modal .ios_safari_bottom_bar {
4758      display: none;
4759    }
4760
4761    .cart-summary-sticky-modal-inner {
4762      width: 100%;
4763      padding: 8px 16px 16px;
4764      border-radius: 2px;
4765      background-color: #fff;
4766      box-shadow: 0 -8px 20px 0 rgba(34, 34, 34, .08);
4767      pointer-events: auto;
4768    }
4769
4770    .cart-summary-sticky-modal-close {
4771      margin-right: -8px;
4772    }
4773
4774    html[dir="rtl"] .cart-summary-sticky-modal-close {
4775      margin-left: -8px;
4776      margin-right: 0;
4777    }
4778
4779    .cart-summary-sticky-modal ~ .i-spzhtml-sidebar-mask {
4780      top: unset;
4781      bottom: 0;
4782    }
4783
4784    .cart-checkout-btn-mobile {
4785      flex-shrink: 0;
4786      width: 40.268%;
4787      margin-top: 0;
4788    }
4789
4790    .cart-summary-sticky-render .cart-summary-discount-btn svg {
4791      transform: rotate(0) !important;
4792    }
4793
4794    .cart-item-delete-btn {
4795      position: relative;
4796    }
4797
4798    .cart-item-delete-btn::before {
4799      content: '';
4800      position: absolute;
4801      top: -8px;
4802      left: -8px;
4803      right: -8px;
4804      bottom: -8px;
4805    }
4806  }
4807
4808  @media (min-width: 960px) {
4809    .cart-title {
4810      line-height: 1.1667;
4811      font-size: calc(var(--type-heading-font-size) * .8);
4812    }
4813
4814    .cart-content .cart-empty {
4815      padding: 60px 0 120px;
4816    }
4817
4818    .cart-continue-shopping {
4819      width: 420px;
4820    }
4821
4822    .cart-header-continue-shopping-btn {
4823      border-bottom: 1px solid var(--color-body-text);
4824    }
4825
4826    #cart-render[data-empty] ~ .cart-content .cart-header-wrapper {
4827      display: none;
4828    }
4829
4830    .cart-items-header,
4831    .cart-item {
4832      display: grid;
4833      grid-template-columns: 50% 16.13% 24.2%;
4834      gap: 4.8387%;
4835    }
4836
4837    .cart-items-header {
4838      line-height: 1.14;
4839      border-bottom: 1px solid var(--color-border);
4840    }
4841
4842    .cart-items-header li {
4843      padding: 16px 0;
4844    }
4845
4846    .cart-item-image {
4847      width: 19.35%;
4848    }
4849
4850    .cart-qty spz-quantity {
4851      width: 93px;
4852    }
4853
4854    .cart-qty spz-quantity input[type="number"] {
4855      width: 37px;
4856    }
4857
4858    .cart-subtotal-outer-container {
4859      width: 37.74%;
4860    }
4861  }
4862</style>
4863<div id="cart-payment-breakdown" class="hidden">
4864  <section class="page-container lg:flex lg:justify-end" >
4865  <div class="cart-subtotal-outer-container md:w-full mt-4" id="cart-subtotal-outer-container">
4866    <div class="cart-subtotal-content">
4867      <div class="cart-summary-checkout mb-1"></div>
4868      <div class="cart-summary" id="cart-summary">
4869        
4869<script async crossorigin="anonymous" src="//static.staticdj.com/cuttlefish/v1/spz.min.js"></script>
4869
4870<link rel="stylesheet" href="//app-assets.staticdj.com/apps/publicapp/basic_css-82a8310f.css">
4871<style>
4872  .cart-coupon-code {
4873    --inputs-radius: 4px;
4874    --inputs-border: 1px;
4875  }
4876  ljs-coupon-code:not([dom-mounted]) {
4877    opacity: 0;
4878    margin-bottom: 0 !important;
4879  }
4880</style>
4881<link rel="stylesheet" href="//app-assets.staticdj.com/apps/publicapp/cart_coupon_code-e4d109ea.css" media="print" onload="this.media='all'">
4882<noscript><link rel="stylesheet" href="//app-assets.staticdj.com/apps/publicapp/cart_coupon_code-e4d109ea.css"></noscript>
4883<script type="application/json" data-tpl-i18n>
4884{
4885  "discount_code.add": "Add",
4886  "discount_code.code_unavailable": "Below discount codes are unavailable",
4887  "discount_code.recommend_discount_code": "Recommend discount codes"
4888}
4889</script>
4889
4890<ljs-script layout="logic" type="application/javascript" src="//app-assets.staticdj.com/apps/publicapp/marketing_tpl_loader-7adfd043.js" data-nosnippet class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></ljs-script>
4891<link rel="stylesheet" href="//app-assets.staticdj.com/apps/publicapp/cart_coupon_code_modal-227ab51a.css" media="print" onload="this.media='all'">
4892<noscript><link rel="stylesheet" href="//app-assets.staticdj.com/apps/publicapp/cart_coupon_code_modal-227ab51a.css"></noscript>
4893
4894<template id="cart-coupon-code-modal-tpl"></template>
4895<template id="cart-coupon-code-modal-products-template"></template>
4896<template id="cart-coupon-code-modal-products-template-y"></template>
4897<script type="application/json" data-tpl-loader-map>
4898  {
4899    "cart-coupon-code-modal-tpl": {
4900      "url": "\/\/app-assets.staticdj.com\/apps\/publicapp\/cart_coupon_code_modal-ccaf576e.tpl",
4901      "vars": { "PROGRESS_TPL_URL": "\/\/app-assets.staticdj.com\/apps\/publicapp\/cart_coupon_code_modal_progress-0bc17e28.tpl" }
4902    },
4903    "cart-coupon-code-modal-products-template": {
4904      "url": "\/\/app-assets.staticdj.com\/apps\/publicapp\/cart_coupon_code_modal_products-6f9d27f7.tpl",
4905      "vars": { "SOURCE_ID": "cart-coupon-code-modal__buy", "PRODUCT_TPL_ID": "product-snippet-template" }
4906    },
4907    "cart-coupon-code-modal-products-template-y": {
4908      "url": "\/\/app-assets.staticdj.com\/apps\/publicapp\/cart_coupon_code_modal_products-6f9d27f7.tpl",
4909      "vars": { "SOURCE_ID": "cart-coupon-code-modal__buy_y", "PRODUCT_TPL_ID": "product-snippet-template" }
4910    }
4911  }
4912</script>
4912
4913<spz-custom-cart-coupon-code-utils layout="logic" id="cart-coupon-code-utils" data-modal-id="cart-coupon-code-modal" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-custom-cart-coupon-code-utils>
4914
4915<ljs-sidebar layout="nodisplay" side="bottom" id="cart-coupon-code-modal" class="app-marketing-block-base-style cart-coupon-code-modal i-spzhtml-layout-nodisplay" hidden="" target="body" @open="cart-coupon-code-utils.setSideBarHeight();" style="display: none" i-spzhtml-layout="nodisplay">
4916  <ljs-render layout="container" src="custom:coupon-code.getModalData" id="cart_coupon_code_modal" class="cart-coupon-code-modal-render i-spzhtml-layout-container" template="cart-coupon-code-modal-tpl" i-spzhtml-layout="container"></ljs-render>
4917</ljs-sidebar>
4918
4919<ljs-script layout="logic" type="application/javascript" src="//app-assets.staticdj.com/apps/publicapp/cart_coupon_code_modal-75a23140.js" data-nosnippet class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></ljs-script>
4920<template id="cart-coupon-code-message-tpl"></template>
4921<template id="cart-coupon-code-unavailable-tpl"></template>
4922<template id="cart-coupon-code-recommend-tpl"></template>
4923<script type="application/json" data-tpl-loader-map>
4924  {
4925    "cart-coupon-code-message-tpl": {
4926      "url": "\/\/app-assets.staticdj.com\/apps\/publicapp\/cart_coupon_code_message-fddd9ead.tpl"
4927    },
4928    "cart-coupon-code-unavailable-tpl": {
4929      "url": "\/\/app-assets.staticdj.com\/apps\/publicapp\/cart_coupon_code_unavailable-0e79e1e9.tpl"
4930    },
4931    "cart-coupon-code-recommend-tpl": {
4932      "url": "\/\/app-assets.staticdj.com\/apps\/publicapp\/cart_coupon_code_recommend-032c082e.tpl"
4933    }
4934  }
4935</script>
4935
4936<ljs-coupon-code id="coupon-code" cart-id="cart-render" layout="container" class="app-marketing-block-base-style cart-coupon-code i-spzhtml-layout-container" @copied="theme-toast.showToast(content=Discount code copied !)" @apply="cart-coupon-code-input.focus();cart-coupon-code-input.select();" @applymessage="coupon-code-message.rerender(data=event, redo=true);cart-coupon-code-modal-progress.render(redo=true);" i-spzhtml-layout="container">
4937  <div>
4938    <div class="flex">
4939      <div class="cart-coupon-code-input">
4940        <div class="cart-coupon-code-close cursor-pointer" role="clear">
4941    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
4942      <rect opacity="0.01" width="16" height="16" fill="#6D7175"/>
4943      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 3.5888 3.5888 0 8 0C12.4112 0 16 3.5888 16 8C16 12.4112 12.4112 16 8 16C3.5888 16 0 12.4112 0 8ZM6.16569 5.03431C5.85327 4.7219 5.34673 4.7219 5.03431 5.03431C4.7219 5.34673 4.7219 5.85327 5.03431 6.16569L6.86863 8L5.03431 9.83432C4.7219 10.1467 4.7219 10.6533 5.03431 10.9657C5.34673 11.2781 5.85327 11.2781 6.16569 10.9657L8 9.13137L9.83432 10.9657C10.1467 11.2781 10.6533 11.2781 10.9657 10.9657C11.2781 10.6533 11.2781 10.1467 10.9657 9.83432L9.13137 8L10.9657 6.16569C11.2781 5.85327 11.2781 5.34673 10.9657 5.03431C10.6533 4.7219 10.1467 4.7219 9.83432 5.03431L8 6.86863L6.16569 5.03431Z" fill="#6D7175"/>
4944    </svg>
4945  </div>
4946        <input id="cart-coupon-code-input" role="input"/>
4947        <label for="cart-coupon-code-input" class="absolute">Discount code</label>
4948      </div>
4949      <button role='apply'>Apply</button>
4950    </div>
4951    <ljs-render layout='container' id="coupon-code-message" manual template="cart-coupon-code-message-tpl" class="i-spzhtml-layout-container" i-spzhtml-layout="container"></ljs-render>
4952    <ljs-render layout='container' role='applied' manual template-src="//app-assets.staticdj.com/apps/publicapp/cart_coupon_code_applied-b0c911c9.tpl" class="i-spzhtml-layout-container" i-spzhtml-layout="container"></ljs-render>
4953    <ljs-render layout='container' role='unavailable' manual template="cart-coupon-code-unavailable-tpl" class="i-spzhtml-layout-container" i-spzhtml-layout="container"></ljs-render>
4954    <ljs-render layout='container' role='recommend' manual template="cart-coupon-code-recommend-tpl" class="i-spzhtml-layout-container" i-spzhtml-layout="container"></ljs-render>
4955  </div>
4956</ljs-coupon-code>
4957<div >
4958                <spz-render class="cart-subtotal-render i-spzhtml-layout-container" id="cart-subtotal-render" layout="container" manual i-spzhtml-layout="container">
4959                  <template>
4960                    <div>
4961                      <div class="flex justify-between font-medium body-plus-2 leading-1.25">
4962  <span>Total:</span>
4963  <div class="flex items-center">
4964    <spz-currency container-class="plugin__bundle__cart__total-price" layout="container" value="${data.total_price}"></spz-currency>
4965    </div>
4966</div>
4967
4968<div class="cart-summary-discount-list flex flex-col items-end" id="cart-summary-discount-list" spz-if="${data.total_discount > 0}">
4969  <div class="cart-summary-discount-btn lg:hidden" spz-if="${data.discount_applications && data.discount_applications.length <= 0}">
4970    <span class="leading-1.2 body-minus-2">
4971      ${function() {
4972  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
4973  if (textArray.length > 0 && textArray.length < 2) {
4974    textArray.push('');
4975  }
4976  return textArray.map((text, index) => {
4977    if (index == 0) {
4978      return `<span>${text}</span>`;
4979    }
4980
4981    return `
4982      <span class="notranslate whitespace-nowrap">
4983        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
4984      </span>
4985      <span>${text}</span>
4986    `;
4987  }).join('');
4988}()}
4989    </span>
4990  </div>
4991  <div class="cart-summary-discount-btn lg:hidden" @tap="cart-summary-discount-list.toggleClass(class='open')" spz-else>
4992    <span class="leading-1.2 body-minus-2">
4993      ${function() {
4994  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
4995  if (textArray.length > 0 && textArray.length < 2) {
4996    textArray.push('');
4997  }
4998  return textArray.map((text, index) => {
4999    if (index == 0) {
5000      return `<span>${text}</span>`;
5001    }
5002
5003    return `
5004      <span class="notranslate whitespace-nowrap">
5005        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5006      </span>
5007      <span>${text}</span>
5008    `;
5009  }).join('');
5010}()}
5011    </span>
5012    <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" d="M7.543 11.306a.6.6 0 0 0 .848 0l4.455-4.454a.3.3 0 0 0 0-.425l-.34-.339a.3.3 0 0 0-.424 0l-4.115 4.115-4.115-4.115a.3.3 0 0 0-.425 0l-.34.34a.3.3 0 0 0 0 .424l4.456 4.454Z"/></svg>
5013  </div>
5014
5015  <ul class="clear w-full mt-1 leading-1.25 color-body-70" spz-if="${data.discount_applications && data.discount_applications.length > 0}">
5016    <li class="plugin__bundle__cart__save md:hidden empty-hidden flex items-center justify-between mb-2"></li>
5017    <li class="flex items-center justify-between ${index > 0 ? 'mt-2' : ''}" spz-for="(discount_application,index) in data.discount_applications">
5018      <span>${discount_application.title}:</span>
5019      <span class="notranslate ml-2 whitespace-nowrap">
5020        <span>-</span><spz-currency class="inline-block" layout="container" value="${discount_application.discount_amount}"></spz-currency>
5021      </span>
5022    </li>
5023  </ul>
5024</div>
5025<div class="plugin__bundle__cart__save md:hidden empty-hidden flex items-center justify-between mb-2" spz-else></div>
5026
5027<div class="cart-invalid-msg mt-4" spz-if="${!!data.invalid_msg}">${data.invalid_msg}</div>
5028<spz-observer
5029                        id="cart-summary-sticky-observer"
5030                        layout="logic"
5031                        target="cart-subtotal-outer-container"
5032                        @visible="cart-summary-sticky-container.hideSticky;"
5033                        @invisible="cart-summary-sticky-container.showSticky;"
5034                      ></spz-observer>
5035                      <spz-observer
5036                        layout="logic"
5037                        target="cart-content"
5038                        @childUpdated="cart-summary-sticky-observer.restart"
5039                      ></spz-observer>
5040                    </div>
5041                  </template>
5042                </spz-render>
5043              </div>
5044            <div >
5045                <button
5046  type="button"
5047  class="cart-summary-checkout-btn button-primary relative flex-shrink-0 w-full mt-4 body-plus-2 leading-1.2"
5048  data-track="checkout-submit,click"
5049  data-track-content="checkout"
5050  data-track-source="checkout"
5051  @tap="cart-render.checkout;"
5052>
5053  <span>Check out</span>
5054  <div class="loading items-center justify-center absolute inset-0 flex" role="loading"   show >
5055  <div class="loading-bounce"></div>
5056</div>
5057</button>
5058<div class="mt-2 body-minus-2 color-body-70 text-center">Taxes and shipping calculated at checkout</div>
5059              </div>
5060            </div>
5061    </div>
5062  </div>
5063</section>
5064  <spz-sticky class="lg:hidden cart-summary-sticky-container i-spzhtml-layout-container" id="cart-summary-sticky-container" layout="container" position="bottom" bottom-compensation-container-class="lg:hidden" hidden i-spzhtml-layout="container">
5065  <spz-render class=" cart-summary-sticky-render p-4 i-spzhtml-layout-container" id="cart-summary-sticky-render" layout="container" manual i-spzhtml-layout="container">
5066    <template>
5067      <div>
5068        <div class="cart-invalid-msg mb-4" spz-if="${!!data.invalid_msg}">${data.invalid_msg}</div>
5069
5070        <div class="flex items-center justify-between">
5071          <div class="flex flex-col items-start">
5072            <div class="flex flex-wrap items-center">
5073              <div class="flex font-medium body-plus-2 leading-1.25 lg:items-center lg:justify-between">
5074                <span class="color-body-70">Total:&nbsp;</span>
5075                <spz-currency container-class="plugin__bundle__cart__total-price" layout="container" value="${data.total_price}"></spz-currency>
5076              </div>
5077              </div>
5078
5079            <div spz-if="${data.total_discount > 0}">
5080              <div class="cart-summary-discount-btn" spz-if="${!!(data.discount_applications && data.discount_applications.length <= 0)}">
5081                <span class="leading-1.2 body-minus-2">
5082                  ${function() {
5083  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
5084  if (textArray.length > 0 && textArray.length < 2) {
5085    textArray.push('');
5086  }
5087  return textArray.map((text, index) => {
5088    if (index == 0) {
5089      return `<span>${text}</span>`;
5090    }
5091
5092    return `
5093      <span class="notranslate whitespace-nowrap">
5094        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5095      </span>
5096      <span>${text}</span>
5097    `;
5098  }).join('');
5099}()}
5100                </span>
5101              </div>
5102              <div class="cart-summary-discount-btn" @tap="cart-summary-sticky-modal.open;" spz-else>
5103                <span class="leading-1.2 body-minus-2">
5104                  ${function() {
5105  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
5106  if (textArray.length > 0 && textArray.length < 2) {
5107    textArray.push('');
5108  }
5109  return textArray.map((text, index) => {
5110    if (index == 0) {
5111      return `<span>${text}</span>`;
5112    }
5113
5114    return `
5115      <span class="notranslate whitespace-nowrap">
5116        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5117      </span>
5118      <span>${text}</span>
5119    `;
5120  }).join('');
5121}()}
5122                </span>
5123                <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" d="M7.543 11.306a.6.6 0 0 0 .848 0l4.455-4.454a.3.3 0 0 0 0-.425l-.34-.339a.3.3 0 0 0-.424 0l-4.115 4.115-4.115-4.115a.3.3 0 0 0-.425 0l-.34.34a.3.3 0 0 0 0 .424l4.456 4.454Z"/></svg>
5124              </div>
5125
5126              <spz-sidebar class="cart-summary-sticky-modal " id="cart-summary-sticky-modal" layout="nodisplay" side="bottom" hidden  @open="top-button.toggleClass(class='hidden', force=true);" @close="top-button.toggleClass(class='hidden', force=false);" >
5127  <div class="cart-summary-sticky-modal-inner relative">
5128    <div class="flex justify-end">
5129      <button class="cart-summary-sticky-modal-close clear flex p-2 cursor-pointer" @tap="cart-summary-sticky-modal.close();" type="button">
5130        <svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M1.93 17.147a.3.3 0 0 0 0 .425l.905.904a.3.3 0 0 0 .424 0l6.652-6.653 6.704 6.704a.3.3 0 0 0 .424 0l.904-.904a.3.3 0 0 0 0-.425l-6.703-6.703 6.652-6.653a.3.3 0 0 0 0-.424l-.904-.904a.3.3 0 0 0-.424 0L9.91 9.166 3.31 2.565a.3.3 0 0 0-.424 0l-.905.904a.3.3 0 0 0 0 .424l6.602 6.602-6.653 6.652Z" clip-rule="evenodd"/></svg>
5131      </button>
5132    </div>
5133
5134    <ul class="clear w-full mt-3 leading-1.25 color-body-70" spz-if="${!!(data.discount_applications && data.discount_applications.length > 0)}">
5135      <li class="flex items-center justify-between">
5136        <span>Subtotal:</span>
5137        <span class="notranslate ml-2 whitespace-nowrap">
5138          <spz-currency class="inline-block" layout="container" value="${data.line_price}"></spz-currency>
5139        </span>
5140      </li>
5141      <li class="flex items-center justify-between mt-2" spz-for="(discount_application,index) in data.discount_applications">
5142        <span>${discount_application.title}:</span>
5143        <span class="notranslate ml-2 whitespace-nowrap">
5144          <span>-</span><spz-currency class="inline-block" layout="container" value="${discount_application.discount_amount}"></spz-currency>
5145        </span>
5146      </li>
5147    </ul>
5148
5149    <div class="flex items-start justify-between mt-2 font-medium body-plus-2 leading-1.25">
5150      <span>Total:</span>
5151      <div class="flex items-center">
5152        <spz-currency class="color-price" container-class="plugin__bundle__cart__total-price" layout="container" value="${data.total_price}"></spz-currency>
5153        </div>
5154    </div>
5155    <button
5156  type="button"
5157  class="cart-checkout-btn mt-4 button-primary relative flex-shrink-0 w-full mt-4 body-plus-2 leading-1.2"
5158  data-track="checkout-submit,click"
5159  data-track-content="checkout"
5160  data-track-source="checkout"
5161  @tap="cart-render.checkout;"
5162>
5163  <span>Check out</span>
5164  <div class="loading items-center justify-center absolute inset-0 flex" role="loading"   show >
5165  <div class="loading-bounce"></div>
5166</div>
5167</button>
5168    <div class="mt-2 body-minus-2 color-body-70 text-center">Taxes and shipping calculated at checkout</div>
5169  </div>
5170</spz-sidebar>
5171            </div>
5172          </div>
5173
5174          <button
5175  type="button"
5176  class="cart-summary-sticky-checkout-btn button-primary relative flex-shrink-0 w-full mt-4 body-plus-2 leading-1.2"
5177  data-track="checkout-submit,click"
5178  data-track-content="checkout"
5179  data-track-source="checkout"
5180  @tap="cart-render.checkout;"
5181>
5182  <span>Check out</span>
5183  <div class="loading items-center justify-center absolute inset-0 flex" role="loading"   show >
5184  <div class="loading-bounce"></div>
5185</div>
5186</button>
5187        </div>
5188
5189        <div class="mt-2 body-minus-2 color-body-70 text-right">Taxes and shipping calculated at checkout</div>
5190      </div>
5191    </template>
5192  </spz-render>
5193</spz-sticky>
5194  </div>
5195</div><div id="shoplaza-section-1634017942336" class="shoplaza-section" data-section-id="1634017942336" data-section-type="cart_recommendations" data-section-style=""><style>
5196  .cart_recommend_container {
5197    padding-top: 96px;
5198  }
5199  .cart_recommend_title {
5200    margin-bottom: 32px;
5201    font-size: 24px;
5202  }
5203  .recommend_list_carousel>.i-spzhtml-slides-container>.i-spzhtml-slide-item{
5204    width: 25%;
5205    padding-left: 40px;
5206  }
5207  .recommend_list_carousel {
5208    margin-left: -40px;
5209  }
5210  .recommend_list_carousel .spz-carousel-button-prev {
5211    left: 56px;
5212  }
5213  @media (max-width: 960px) {
5214    .cart_recommend_container {
5215      padding-top: 68px;
5216    }
5217    .cart_recommend_title {
5218      margin-bottom: 24px;
5219      font-size: 18px;
5220    }
5221    .recommend_list_item:last-child {
5222      padding-right: 0;
5223    }
5224  }
5225</style>
5226<spz-render layout="container" src="/api/cart" items="cart.line_items" class="i-spzhtml-layout-container" i-spzhtml-layout="container">
5227    <template>
5228      <spz-render spz-if="${!!data.length}" layout="container" src="/api/product/similar-products?product_id=${data[0] && data[0].product_id}&page=1&per_page=8" @finish="cart-recommendations-render.rerender(data=event.data.data.products);"></spz-render>
5229    </template>
5230  </spz-render>
5231</div>
5232      </div>
5233      <div id="shoplaza-section-footer" class="shoplaza-section" data-section-id="footer" data-section-type="footer" data-section-style="expand"><style>
5234  [data-section-id="footer"] {
5235    color: var(--color-footer-text);
5236    background-color: var(--color-footer-bg);
5237  }
5238  .footer__newsletter,
5239  .footer_blocks,
5240  .footer__additional {
5241    border-top: 1px solid var(--color-footer-border);
5242  }
5243</style>
5244<style>
5245    .footer__additional__item{
5246      padding-top: 12px
5247    }
5248    .footer__additional__item + .footer__additional__item{
5249      padding-left: 20px;
5250    }
5251    .footer__copyright a[href] {
5252      color: inherit;
5253      text-decoration: none;
5254    }
5255  </style>
5256
5257  <div class="footer__additional pt-5 pb-8 lg:pt-6 lg:pb-8">
5258    <div class="page-container body-minus-1 flex flex-wrap justify-center">
5259      <span class="footer__additional__item">&copy;&nbsp;<time datetime="2026">2026</time>&nbsp;sacclife</span>
5260      <a class="footer__additional__item text-inherit" 
5261href="/pages/privacy-policy" >PRIVACY POLICY</a>
5262      <a class="footer__additional__item text-inherit" 
5263href="/pages/contact-us" >CONTACT US</a>
5264      <a class="footer__additional__item text-inherit" 
5265href="/pages/return-policy" >RETURN POLICY</a>
5266      <a class="footer__additional__item text-inherit" 
5267href="/pages/about-us" >ABOUT US</a>
5268      <a class="footer__additional__item text-inherit" 
5269href="/pages/faq" >FAQ</a>
5270      <a class="footer__additional__item text-inherit" 
5271href="/pages/track-your-order" >TRACK YOUR ORDER</a>
5272      <a class="footer__additional__item text-inherit" 
5273href="/pages/shipping" >SHIPPING</a>
5274      <a class="footer__additional__item text-inherit" 
5275href="/pages/terms-of-service" >TERMS OF SERVICE</a>
5276      <a class="footer__additional__item text-inherit" 
5277href="/pages/intellectual-property" >Intellectual property</a>
5278      </div>
5279  </div>
5280</div>
5281      <div id="shoplaza-section-cart_drawer" class="shoplaza-section" data-section-id="cart_drawer" data-section-type="cart_drawer" data-section-style="">
5282  <style>
5283  #cart-drawer {
5284    width: 0;
5285    height: 0;
5286  }
5287
5288  #cart-drawer[loading] ~ *,
5289  #cart-drawer[data-empty][finish] ~ *,
5290  #cart-drawer:not([data-empty])[finish] ~ .cart-empty {
5291    display: none;
5292  }
5293
5294  #cart-drawer[loading] ~ .cart-drawer-loading {
5295    display: var(--loading-show);
5296  }
5297
5298  #cart-drawer:not([loading]) ~ .cart-drawer-loading {
5299    display: none !important;
5300  }
5301
5302  #cart-drawer[data-empty][finish] ~ .cart-empty {
5303    display: block;
5304  }
5305
5306  .cart-drawer-loading {
5307    padding-top: 50%;
5308  }
5309
5310  .cart-drawer-loading .loading-bounce {
5311    border-bottom-color: var(--color-body-text);
5312  }
5313
5314  #cart-drawer-modal {
5315    height: 100vh;
5316  }
5317
5318  #cart-drawer-modal,
5319  .cart-drawer-summary-sticky-render {
5320    width: 84.62%;
5321    max-width: 84.62%;
5322    background-color: var(--color-body-bg);
5323  }
5324
5325  .cart-drawer-header {
5326    padding: 12px 16px;
5327    border-bottom: 1px solid var(--color-border);
5328  }
5329
5330  .cart-drawer-title {
5331    line-height: 1.1667;
5332    font-size: calc(var(--type-heading-font-size) * .8);
5333  }
5334
5335  .cart-drawer-item-image {
5336    flex-shrink: 0;
5337    width: 23.49%;
5338  }
5339
5340  .cart-drawer-item-delete-btn::before {
5341    content: '';
5342    position: absolute;
5343    top: -8px;
5344    left: -8px;
5345    right: -8px;
5346    bottom: -8px;
5347  }
5348
5349  .cart-drawer-item-qty-container spz-quantity {
5350    width: 81px;
5351  }
5352
5353  .cart-drawer-item-qty-container spz-quantity .i-spzhtml-quantity-number-decrease[disabled] {
5354    cursor: pointer;
5355  }
5356
5357  .cart-drawer-item-qty-container spz-quantity span[role="button"] {
5358    padding: 6px;
5359    border-color: var(--color-border) !important;
5360  }
5361
5362  .cart-drawer-item-qty-container spz-quantity input[type="number"] {
5363    width: 25px;
5364  }
5365
5366  .cart-drawer-item-text {
5367    color: #FF3F02;
5368  }
5369
5370  .cart-drawer-countdown-wrapper {
5371    margin: 0 -16px;
5372  }
5373
5374  .cart_free_shipping ~ .cart-drawer-summary {
5375    margin-top: 10px;
5376  }
5377
5378  .cart-drawer-summary {
5379    padding: 8px;
5380    border-radius: 2px;
5381    background-color: var(--color-cart-subtotal-bg);
5382  }
5383
5384  .cart-drawer-summary-discount-btn {
5385    display: flex;
5386    align-items: center;
5387    padding: 4px 8px;
5388    margin-top: 4px;
5389    color: #F16515;
5390    border-radius: 100px;
5391    background-color: #fff;
5392    cursor: pointer;
5393  }
5394
5395  .cart-drawer-summary-discount-btn span {
5396    margin-right: 2px;
5397  }
5398
5399  html[dir="rtl"] .cart-drawer-summary-discount-btn span {
5400    margin-left: 2px;
5401    margin-right: 0;
5402  }
5403
5404  .cart-drawer-summary-discount-btn svg {
5405    transition: transform .2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
5406  }
5407
5408  .cart-drawer-summary-discount-list.open .cart-drawer-summary-discount-btn svg {
5409    transform: rotate(-180deg);
5410  }
5411
5412  .cart-drawer-summary-discount-list ul {
5413    display: none;
5414  }
5415
5416  .cart-drawer-summary-discount-list.open ul {
5417    display: block;
5418  }
5419
5420  .cart-drawer-invalid-msg {
5421    color: #FF3F02;
5422  }
5423
5424  .cart-drawer-checkout-btn {
5425    height: 46px;
5426    padding: 12px 0;
5427  }
5428
5429  .cart-drawer-checkout-btn > *,
5430  .cart-drawer-checkout-btn[loading] {
5431    pointer-events: none;
5432  }
5433
5434  .cart-drawer-checkout-btn[loading] > span,
5435  .cart-drawer-checkout-btn:not([loading]) > .loading {
5436    display: none;
5437  }
5438
5439  .cart-drawer-checkout-btn[loading] > .loading {
5440    opacity: 1;
5441  }
5442
5443  .cart-drawer-summary-sticky-render {
5444    z-index: calc(var(--z-index-modal) + 1);
5445    position: fixed;
5446    right: 0;
5447    bottom: 0;
5448    width: 100%;
5449    background-color: #fff;
5450    box-shadow: 0 -8px 20px 0 rgba(34, 34, 34, .08);
5451    opacity: 0;
5452    transform: translateY(100%);
5453  }
5454
5455  .cart-drawer-summary-sticky {
5456    padding: 16px;
5457    background-color: var(--color-body-bg);
5458  }
5459
5460  .cart-drawer-summary-sticky-render {
5461    pointer-events: none;
5462  }
5463
5464  .cart-drawer-summary-sticky-render:not(.open),
5465  .cart-drawer-summary-sticky-render:not(.visible) {
5466    display: none;
5467  }
5468
5469  .cart-drawer-summary-sticky-render.visible.open {
5470    pointer-events: auto;
5471    animation: sticky-bottom-show .4s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
5472  }
5473
5474  @keyframes sticky-bottom-show {
5475    0% { opacity: 1;}
5476    100% { transform: translateY(0); opacity: 1; }
5477  }
5478
5479  .cart-drawer-summary-sticky-compensation-container.visible {
5480    height: var(--cart-drawer-summary-sticky-height);
5481  }
5482
5483  .cart-drawer-summary-sticky .cart-drawer-summary-discount-btn {
5484    background-color: #F6F6F6;
5485  }
5486
5487  .cart-drawer-empty-container {
5488    padding: 80px 16px;
5489  }
5490
5491  .cart-drawer-empty-btn {
5492    height: 46px;
5493  }
5494
5495  @media (max-width: 959.98px) {
5496    #cart-drawer-modal .ios_safari_bottom_bar {
5497      display: none;
5498    }
5499
5500    #cart-drawer-modal.deepen ~ .i-spzhtml-sidebar-mask {
5501      background-color: var(--color-body-text-70);
5502    }
5503
5504    .cart-drawer-summary-sticky-modal {
5505      z-index: calc(var(--z-index-modal) + 1);
5506      width: 100% !important;
5507      max-height: 85vh !important;
5508      display: flex;
5509      align-items: flex-end;
5510      justify-content: flex-end;
5511      pointer-events: none;
5512    }
5513
5514    .cart-drawer-summary-sticky-modal .ios_safari_bottom_bar {
5515      display: none;
5516    }
5517
5518    .cart-drawer-summary-sticky-modal-inner {
5519      width: 100%;
5520      padding: 8px 16px 16px;
5521      border-radius: 2px;
5522      background-color: #fff;
5523      box-shadow: 0 -8px 20px 0 rgba(34, 34, 34, .08);
5524      pointer-events: auto;
5525    }
5526
5527    .cart-drawer-summary-sticky-modal-close {
5528      margin-right: -8px;
5529    }
5530
5531    html[dir="rtl"] .cart-drawer-summary-sticky-modal-close {
5532      margin-left: -8px;
5533      margin-right: 0;
5534    }
5535
5536    .cart-drawer-checkout-btn-mobile {
5537      flex-shrink: 0;
5538      width: 40.268%;
5539      margin-top: 0;
5540    }
5541
5542    .cart-drawer-summary-sticky .cart-drawer-summary-discount-btn svg {
5543      transform: rotate(0) !important;
5544    }
5545
5546    .cart-drawer-summary-sticky-modal ~ .i-spzhtml-sidebar-mask {
5547      top: unset !important;
5548      bottom: 0;
5549    }
5550  }
5551
5552  @media (min-width: 960px) {
5553    #cart-drawer-modal,
5554    .cart-drawer-summary-sticky-render {
5555      width: 468px;
5556      max-width: 468px;
5557    }
5558
5559    .cart-drawer-header {
5560      padding: 22px 16px;
5561    }
5562
5563    .cart-drawer-item-image {
5564      width: 32.11%;
5565    }
5566
5567    .cart-drawer-item-qty-container spz-quantity {
5568      width: 93px;
5569    }
5570
5571    .cart-drawer-item-qty-container spz-quantity input[type="number"] {
5572      width: 37px;
5573    }
5574  }
5575</style>
5576  <spz-sidebar class="flex flex-col bg-white i-spzhtml-layout-nodisplay" id="cart-drawer-modal" layout="nodisplay" side="right" hidden="" @open="cart-drawer-summary-sticky-render.toggleClass(class='open', force=true);cart-drawer-summary-sticky-observer.restart()" @beforeclose="cart-drawer-summary-sticky-render.toggleClass(class='open', force=false);cart-drawer-summary-sticky-modal.close();" disable-unmount style="display: none" i-spzhtml-layout="nodisplay">
5577    <header class="cart-drawer-header flex-shrink-0 flex items-center justify-between">
5578      <h4 class="cart-drawer-title m-0 type-heading-font-family color-heading">
5579        Cart
5580      </h4>
5581      <button class="clear flex p-2 cursor-pointer" @tap="cart-drawer-modal.close();" type="button">
5582        <svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M1.93 17.147a.3.3 0 0 0 0 .425l.905.904a.3.3 0 0 0 .424 0l6.652-6.653 6.704 6.704a.3.3 0 0 0 .424 0l.904-.904a.3.3 0 0 0 0-.425l-6.703-6.703 6.652-6.653a.3.3 0 0 0 0-.424l-.904-.904a.3.3 0 0 0-.424 0L9.91 9.166 3.31 2.565a.3.3 0 0 0-.424 0l-.905.904a.3.3 0 0 0 0 .424l6.602 6.602-6.653 6.652Z" clip-rule="evenodd"/></svg>
5583      </button>
5584    </header>
5585
5586    <spz-cart id="cart-drawer" layout="container" empty-item="cart.line_items" @mounted="cart-drawer-subtotal-render.rerender(data=event.cart);cart-drawer-summary-sticky-render.rerender(data=event.cart);cart-drawer-items-render.rerender(data=event.cart);" @cartchange="cart-drawer-items-render.rerender(data=event.cart);cart-drawer-subtotal-render.rerender(data=event.cart);cart-drawer-summary-sticky-render.rerender(data=event.cart);" class="i-spzhtml-layout-container" i-spzhtml-layout="container">
5587      <template><div></div></template>
5588    </spz-cart>
5589    <spz-event target-id="cart-drawer" target-api="render" event-name="dj.addToCart" layout="logic" class="i-spzhtml-layout-logic" i-spzhtml-layout="logic"></spz-event>
5590
5591    <div class="loading items-center justify-center cart-drawer-loading" role="loading"   show >
5592  <div class="loading-bounce"></div>
5593</div>
5594    <div class="cart-empty flex flex-col items-center text-center cart-drawer-empty-container" >
5595  <svg class="color-body-70" xmlns="http://www.w3.org/2000/svg" width="80" height="70" fill="none">
5595<path fill="currentColor" fill-opacity=".7" d="M41.867 16.76c.64 0 1.168.486 1.231 1.11l.007.127v17.334a1.238 1.238 0 0 1-2.47.126l-.006-.126V17.997c0-.683.554-1.238 1.238-1.238ZM55.183 17.87a1.238 1.238 0 0 0-2.47.127v17.334l.007.126a1.238 1.238 0 0 0 2.47-.126V17.997l-.007-.126ZM29.081 16.782c.63-.122 1.24.255 1.422.856l.03.123 3.37 17.333a1.238 1.238 0 0 1-2.4.596l-.03-.123-3.37-17.333a1.238 1.238 0 0 1 .978-1.452ZM65.503 17.638a1.238 1.238 0 0 1 2.4.596l-3.37 17.333-.03.123a1.238 1.238 0 0 1-2.4-.596l3.37-17.333.03-.123Z"/><path fill="currentColor" fill-opacity=".7" fill-rule="evenodd" d="M17.622 3.07A3.601 3.601 0 0 0 14.13.355H1.865l-.68.006C.56.425.627.951.627 1.593c0 .684 0 1.238.684 1.238H14.13l.123.007c.484.052.885.413.981.9l7.424 37.368a6.136 6.136 0 0 0-3.525 5.555 6.135 6.135 0 0 0 6.136 6.136h46.229l.126-.007a1.238 1.238 0 0 0-.126-2.47h-46.23l-.194-.005a3.659 3.659 0 0 1-3.465-3.654 3.659 3.659 0 0 1 3.66-3.66h45.533a3.097 3.097 0 0 0 3.041-2.51l5.475-28.477a3.095 3.095 0 0 0-3.038-3.68H18.672l-1.009-5.078-.041-.186Zm1.736 7.74 5.715 29.714h45.73a.62.62 0 0 0 .608-.502l5.475-28.476a.619.619 0 0 0-.606-.736H19.358ZM20.643 62.074a7.57 7.57 0 0 1 7.571-7.57 7.57 7.57 0 1 1-7.57 7.57Zm12.666 0a5.094 5.094 0 1 0-10.189.002 5.094 5.094 0 0 0 10.189-.002ZM62.028 54.504a7.57 7.57 0 1 0 0 15.142 7.57 7.57 0 0 0 0-15.142Zm0 2.477a5.094 5.094 0 1 1 0 10.188 5.094 5.094 0 0 1 0-10.188Z" clip-rule="evenodd"/></svg>
5596  <div class="mt-5 color-body-70 font-medium body-plus-4 leading-1.2">Your shopping bag is empty</div>
5597  <button class="cart-empty-btn button-primary clear flex items-center justify-center text-center mt-5 cart-drawer-empty-btn w-full"  data-track="cart-continue-shopping" @tap="cart-drawer-modal.close();" type="button">
5598    Continue shopping
5599  </button>
5600</div>
5601
5602    <div class="cart-drawer-content flex-1 overflow-y-auto px-4" id="cart-drawer-content">
5603      <spz-render id="cart-drawer-items-render" layout="container" manual class="i-spzhtml-layout-container" i-spzhtml-layout="container">
5604  <template>
5605    <div>
5606      <ul class="clear overflow-hidden" spz-if="${!!(data.line_items && data.line_items.length > 0)}">
5607        <li class="flex items-start py-4" spz-for="item in data.line_items" key="item.id">
5608          <a
5609            class="cart-drawer-item-image"
5610            spz-href="${item.product_url}?variant=${item.variant_id}"
5611            data-track-type="image"
5612            data-track-product_id="${item.variant_id}"
5613            data-track="click"
5614            data-track-content="product_link"
5615            data-track-product-id="${item.product_id}"
5616            data-track-position="cart"
5617          >
5618            <spz-img
5619              class="rounded-global-fixed overflow-hidden"
5620              width="${item.image.width}"
5621              height="${item.image.height}"
5622              layout="responsive"
5623              src="${item.image.src}"
5624              alt="${item.image.alt}"
5625              object-fit="cover"
5626              auto-fit
5627            ></spz-img>
5628          </a>
5629
5630          <div class="flex-1 px-4">
5631            <div class="">
5632  <a
5633    class="product-title-color no-underline leading-1.25 line-clamp-2"
5634    spz-href="${item.product_url}"
5635    data-track="click"
5636    data-track-content="product_link"
5637    data-track-product-id="${item.product_id}"
5638    data-track-position="cart"
5639  >
5640    ${item.product_title}
5641  </a>
5642  <ul class="clear break-words color-body-70 leading-1.25 mt-1">
5643    <li>${item.options.map(option => option.value).join('/')}</li>
5644    <li class="mt-0.5" spz-for="propertie in item.parsedProperties">
5645      ${propertie.name}/${propertie.isImage ? `<a class="no-underline text-inherit" spz-href="${propertie.value}" target="_blank" >View image</a>` : propertie.value}
5646    </li>
5647  </ul>
5648  <div class="discount_gift_content mt-1 lg:mt-2" spz-if="${!!item.is_free_gift}">
5649  <svg class=""  width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.236 2.684c0-.407.381-.829.978-.829.58 0 1.232.481 1.232 1.29v.368H4.98c-.445 0-.915-.006-1.275-.138a.74.74 0 0 1-.343-.228c-.063-.083-.125-.22-.125-.463Zm3.783.83h-.467v-.37c0-.808.652-1.289 1.232-1.289.597 0 .978.422.978.83 0 .242-.062.378-.125.462a.74.74 0 0 1-.344.227c-.359.133-.828.14-1.274.14Zm2.848-.83c0 .309-.057.586-.169.83h.998a.829.829 0 0 1 .83.828v1.382H.472V4.342a.829.829 0 0 1 .829-.829H2.3a1.96 1.96 0 0 1-.17-.829C2.13 1.562 3.117.75 4.215.75c.644 0 1.325.302 1.785.845A2.387 2.387 0 0 1 7.784.75c1.099 0 2.083.812 2.083 1.934Zm-4.42 8.566V6.829H1.024v3.592c0 .459.37.829.83.829h3.591Zm1.105 0V6.829h4.42v3.592c0 .459-.37.829-.828.829H6.552Z" fill="#EB391B"/></svg>
5650  <div class="discount__gift_lan">Free gift</div>
5651</div>
5652
5653  <div spz-if="${item.mixed_wholesale && false}">
5654    <style>
5655  .mixed_wholesale_label {
5656    padding: 2px 4px;
5657  }
5658
5659  .mixed_wholesale_tooltip .i-spzhtml-tooltip-arrow:before,
5660  .mixed_wholesale_tooltip .i-spzhtml-tooltip-inner {
5661    background: var(--color-body-bg);
5662    color: var(--color-body-text);
5663  }
5664
5665  .mixed_wholesale_tooltip {
5666    max-width: 100%;
5667    border-radius: 4px;
5668    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
5669  }
5670
5671  @media (min-width: 960px) {
5672    .mixed_wholesale_tooltip {
5673      max-width: 450px;
5674    }
5675  }
5676</style>
5677<div class="mt-1 mixed_wholesale_label inline-flex color-custom-label-text bg-custom-label text-xs rounded" id="mixed-${item.id}">
5678  Mixed Lot
5679</div>
5680<spz-tooltip layout="logic" content="You can enjoy the wholesale price when you add up to {{count}} pieces of current goods and any goods that support &quot;Mixed Lot&quot; in the store." interact="hover" for="mixed-${item.id}" placement="bottom" overlay-class="mixed_wholesale_tooltip">
5681</spz-tooltip>
5682  </div>
5683</div>
5684            <div class="flex-shrink-0 flex flex-col cart-drawer-item-qty-container mt-3">
5685  <div class="break-words" spz-if="${!!item.disabled}">
5686    *${item.quantity}
5687  </div>
5688  <spz-quantity
5689    spz-else
5690    icon-class="clear flex items-center justify-center flex-shrink-0 h-full w-7"
5691    input-class="clear flex-1 h-full text-center body-base color-body-text"
5692    name="quantity"
5693    value="${item.quantity}"
5694    min="1"
5695    max="${item.available_quantity}"
5696    height="28"
5697    layout="flex-item"
5698    @quantityChange="cart-drawer.update(value=event.value,id='${item.id}');"
5699    @quantityChangeUnderflow="cart-drawer.delete(id='${item.id}');"
5700  >
5701    <svg class="" width="13" height="13" xmlns="http://www.w3.org/2000/svg" role="decrease"><path d="M1 6h11v1H1z" fill-rule="evenodd" fill="currentColor"/></svg>
5702    <svg class="" width="13" height="13" xmlns="http://www.w3.org/2000/svg" role="increase"><path d="M7 1v5h5v1H7v5H6V7H1V6h5V1h1z" fill="currentColor"/></svg>
5703  </spz-quantity>
5704
5705  <div class="cart-drawer-item-text mt-1" spz-if="${!!item.item_text}">${item.item_text}</div>
5706</div>
5707            <div class="flex items-center justify-end flex-row-reverse mt-3 leading-1.25">
5708  <spz-currency class="${!!item.final_line_price && (+item.final_line_price < +item.line_price) ? 'color-compare-price line-through ml-1 body-minus-2' : 'color-price font-medium '}" layout="container" value="${item.line_price}"></spz-currency>
5709  <spz-currency class="color-price font-medium  " spz-if="${!!item.final_line_price && (+item.final_line_price < +item.line_price)}" layout="container" value="${item.final_line_price}"></spz-currency>
5710</div>
5711            <div class="flex items-start flex-wrap  mt-1 body-minus-2 leading-1.25 color-body-60" spz-for="discount_item in item.discount_applications">
5712  <div class="flex">
5713    <spz-img
5714      spz-if="${!!discount_item.icon}"
5715      class="flex-shrink-0 mr-1 mt-0.5"
5716      src="${discount_item.icon}"
5717      layout="fixed"
5718      width="12"
5719      height="12"
5720      alt="item.image.alt || item.product_title"
5721      object-fit="contain"
5722    ></spz-img>
5723    <span>${discount_item.title}</span>
5724  </div>
5725  <span spz-if="${discount_item.discount_amount > 0 || discount_item.amount > 0}" class="flex-shrink-0">(-<spz-currency style="display: inline-block;" layout="container" value="${discount_item.discount_amount || discount_item.amount}"></spz-currency>)</span>
5726</div>
5727          </div>
5728
5729          <button class="clear flex color-body-70 flex-shrink-0 cart-drawer-item-delete-btn relative" type="button" @tap="cart-drawer.delete(id=${item.id})">
5730  <svg
5731  class="icon-delete "
5732  xmlns="http://www.w3.org/2000/svg"
5733  width="16"
5734  height="17"
5735  viewBox="0 0 16 17"
5736  fill="none"
5737>
5738  <path d="M6.375 2.65625C6.375 2.4822 6.44414 2.31528 6.56721 2.19221C6.69028 2.06914 6.8572 2 7.03125 2H9.21875C9.3928 2 9.55972 2.06914 9.68279 2.19221C9.80586 2.31528 9.875 2.4822 9.875 2.65625C9.875 2.8303 9.80586 2.99722 9.68279 3.12029C9.55972 3.24336 9.3928 3.3125 9.21875 3.3125H7.03125C6.8572 3.3125 6.69028 3.24336 6.56721 3.12029C6.44414 2.99722 6.375 2.8303 6.375 2.65625ZM2 5.28125C2 5.1072 2.06914 4.94028 2.19221 4.81721C2.31528 4.69414 2.4822 4.625 2.65625 4.625H13.5938C13.7678 4.625 13.9347 4.69414 14.0578 4.81721C14.1809 4.94028 14.25 5.1072 14.25 5.28125C14.25 5.4553 14.1809 5.62222 14.0578 5.74529C13.9347 5.86836 13.7678 5.9375 13.5938 5.9375H2.65625C2.4822 5.9375 2.31528 5.86836 2.19221 5.74529C2.06914 5.62222 2 5.4553 2 5.28125ZM7.03125 8.125C6.8572 8.125 6.69028 8.19414 6.56721 8.31721C6.44414 8.44028 6.375 8.6072 6.375 8.78125V10.9688C6.375 11.1428 6.44414 11.3097 6.56721 11.4328C6.69028 11.5559 6.8572 11.625 7.03125 11.625C7.2053 11.625 7.37222 11.5559 7.49529 11.4328C7.61836 11.3097 7.6875 11.1428 7.6875 10.9688V8.78125C7.6875 8.6072 7.61836 8.44028 7.49529 8.31721C7.37222 8.19414 7.2053 8.125 7.03125 8.125ZM8.5625 8.78125C8.5625 8.6072 8.63164 8.44028 8.75471 8.31721C8.87778 8.19414 9.0447 8.125 9.21875 8.125C9.3928 8.125 9.55972 8.19414 9.68279 8.31721C9.80586 8.44028 9.875 8.6072 9.875 8.78125V10.9688C9.875 11.1428 9.80586 11.3097 9.68279 11.4328C9.55972 11.5559 9.3928 11.625 9.21875 11.625C9.0447 11.625 8.87778 11.5559 8.75471 11.4328C8.63164 11.3097 8.5625 11.1428 8.5625 10.9688V8.78125ZM4.1875 7.03125C4.1875 6.8572 4.11836 6.69028 3.99529 6.56721C3.87222 6.44414 3.7053 6.375 3.53125 6.375C3.3572 6.375 3.19028 6.44414 3.06721 6.56721C2.94414 6.69028 2.875 6.8572 2.875 7.03125V13.5938C2.875 14.2319 3.12852 14.844 3.57977 15.2952C4.03103 15.7465 4.64307 16 5.28125 16H10.9688C11.2847 16 11.5976 15.9378 11.8896 15.8168C12.1815 15.6959 12.4468 15.5187 12.6702 15.2952C12.8937 15.0718 13.0709 14.8065 13.1918 14.5146C13.3128 14.2226 13.375 13.9097 13.375 13.5938V7.03125C13.375 6.8572 13.3059 6.69028 13.1828 6.56721C13.0597 6.44414 12.8928 6.375 12.7188 6.375C12.5447 6.375 12.3778 6.44414 12.2547 6.56721C12.1316 6.69028 12.0625 6.8572 12.0625 7.03125V13.5938C12.0625 14.1975 11.5725 14.6875 10.9688 14.6875H5.28125C4.6775 14.6875 4.1875 14.1975 4.1875 13.5938V7.03125Z" fill="currentColor" fill-opacity="0.6"/>
5739</svg>
5740</button>
5741        </li>
5742      </ul>
5743    </div>
5744  </template>
5745</spz-render>
5746        <spz-render id="cart-drawer-subtotal-render" layout="container" manual class="i-spzhtml-layout-container" i-spzhtml-layout="container">
5747  <template>
5748    <section class="py-4">
5749      <div class="cart-drawer-summary" id="cart-drawer-summary">
5750  <div class="flex justify-between font-medium body-plus-2 leading-1.25">
5751    <span>Total:</span>
5752    <div class="flex items-center">
5753      <spz-currency container-class="plugin__bundle__cart__total-price" layout="container" value="${data.total_price}"></spz-currency>
5754      </div>
5755  </div>
5756
5757  <div class="cart-drawer-summary-discount-list flex flex-col items-end" id="cart-drawer-summary-discount-list" spz-if="${data.total_discount > 0}">
5758    <div class="cart-drawer-summary-discount-btn" spz-if="${data.discount_applications && data.discount_applications.length <= 0}">
5759      <span class="leading-1.2 body-minus-2">
5760        ${function() {
5761  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
5762  if (textArray.length > 0 && textArray.length < 2) {
5763    textArray.push('');
5764  }
5765  return textArray.map((text, index) => {
5766    if (index == 0) {
5767      return `<span>${text}</span>`;
5768    }
5769
5770    return `
5771      <span class="notranslate whitespace-nowrap">
5772        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5773      </span>
5774      <span>${text}</span>
5775    `;
5776  }).join('');
5777}()}
5778      </span>
5779    </div>
5780    <div class="cart-drawer-summary-discount-btn" @tap="cart-drawer-summary-discount-list.toggleClass(class='open');cart-drawer-summary-sticky-discount-list.toggleClass(class='open');" spz-else>
5781      <span class="leading-1.2 body-minus-2">
5782        ${function() {
5783  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
5784  if (textArray.length > 0 && textArray.length < 2) {
5785    textArray.push('');
5786  }
5787  return textArray.map((text, index) => {
5788    if (index == 0) {
5789      return `<span>${text}</span>`;
5790    }
5791
5792    return `
5793      <span class="notranslate whitespace-nowrap">
5794        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5795      </span>
5796      <span>${text}</span>
5797    `;
5798  }).join('');
5799}()}
5800      </span>
5801      <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" d="M7.543 11.306a.6.6 0 0 0 .848 0l4.455-4.454a.3.3 0 0 0 0-.425l-.34-.339a.3.3 0 0 0-.424 0l-4.115 4.115-4.115-4.115a.3.3 0 0 0-.425 0l-.34.34a.3.3 0 0 0 0 .424l4.456 4.454Z"/></svg>
5802    </div>
5803
5804    <ul class="clear w-full mt-1 leading-1.25 color-body-70" spz-if="${data.discount_applications && data.discount_applications.length > 0}">
5805      <li class="flex items-center justify-between ${index > 0 ? 'mt-2' : ''}" spz-for="(discount_application,index) in data.discount_applications">
5806        <span>${discount_application.title}:</span>
5807        <span class="notranslate ml-2 whitespace-nowrap">
5808          -<spz-currency class="inline-block" layout="container" value="${discount_application.discount_amount}"></spz-currency>
5809        </span>
5810      </li>
5811    </ul>
5812  </div>
5813
5814  <div class="cart-drawer-invalid-msg mt-4" spz-if="${!!data.invalid_msg}">${data.invalid_msg}</div>
5815
5816  <button
5817    type="button"
5818    class="cart-drawer-checkout-btn button-primary relative flex-shrink-0 w-full mt-5 body-plus-2 leading-1.2"
5819    data-track="checkout-submit,click"
5820    data-track-content="checkout"
5821    data-track-source="checkout"
5822    @tap="cart-drawer.checkout;"
5823  >
5824    <span>Check out</span>
5825    <div class="loading items-center justify-center absolute inset-0 flex" role="loading"   show >
5826  <div class="loading-bounce"></div>
5827</div>
5828  </button>
5829
5830  <div class="mt-2 color-body-70 body-minus-2 text-center">Taxes and shipping calculated at checkout</div>
5831</div>
5832
5833      <spz-observer
5834        layout="logic"
5835        id="cart-drawer-summary-sticky-observer"
5836        target="cart-drawer-subtotal-render"
5837        root-container="cart-drawer-content"
5838        @visible="cart-drawer-summary-sticky-render.toggleClass(class='visible', force=false);cart-drawer-summary-sticky-compensation-container.toggleClass(class='visible', force=false)"
5839        @invisible="cart-drawer-summary-sticky-render.toggleClass(class='visible', force=true);cart-drawer-summary-sticky-compensation-container.toggleClass(class='visible', force=true)"
5840      ></spz-observer>
5841      <spz-observer
5842        layout="logic"
5843        target="cart-drawer-content"
5844        @childUpdated="cart-drawer-summary-sticky-observer.restart"
5845      ></spz-observer>
5846    </section>
5847  </template>
5848</spz-render>
5849        </div>
5850
5851    <div class="cart-drawer-summary-sticky-compensation-container" id="cart-drawer-summary-sticky-compensation-container"></div>
5852  </spz-sidebar>
5853
5854  <spz-render class="cart-drawer-summary-sticky-render i-spzhtml-layout-container" id="cart-drawer-summary-sticky-render" layout="container" manual i-spzhtml-layout="container">
5855  <template>
5856    <div class="cart-drawer-summary-sticky ${(data.line_items && data.line_items.length) == 0 ? 'hidden' : ''}">
5857      <div class="cart-drawer-invalid-msg lg:hidden mb-4" spz-if="${!!data.invalid_msg}">${data.invalid_msg}</div>
5858
5859      <div>
5860        <div class="md:flex md:items-center md:justify-between">
5861          <div class="md:flex md:flex-col md:items-start">
5862            <div class="md:flex md:items-center md:flex-wrap">
5863              <div class="flex font-medium body-plus-2 leading-1.25 lg:items-center lg:justify-between">
5864                <span class="md:color-body-70">Total:&nbsp;</span>
5865                <div class="flex items-center">
5866                  <spz-currency container-class="plugin__bundle__cart__total-price" layout="container" value="${data.total_price}"></spz-currency>
5867                  </div>
5868              </div>
5869              </div>
5870
5871            <div class="cart-drawer-summary-discount-list flex flex-col items-end" id="cart-drawer-summary-sticky-discount-list" spz-if="${data.total_discount > 0}">
5872              <div class="cart-drawer-summary-discount-btn" spz-if="${!!(data.discount_applications && data.discount_applications.length <= 0)}">
5873                <span class="leading-1.2 body-minus-2">
5874                  ${function() {
5875  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
5876  if (textArray.length > 0 && textArray.length < 2) {
5877    textArray.push('');
5878  }
5879  return textArray.map((text, index) => {
5880    if (index == 0) {
5881      return `<span>${text}</span>`;
5882    }
5883
5884    return `
5885      <span class="notranslate whitespace-nowrap">
5886        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5887      </span>
5888      <span>${text}</span>
5889    `;
5890  }).join('');
5891}()}
5892                </span>
5893              </div>
5894              <div spz-else>
5895                <div class="cart-drawer-summary-discount-btn md:hidden" @tap="cart-drawer-summary-sticky-discount-list.toggleClass(class='open');cart-drawer-summary-discount-list.toggleClass(class='open');" >
5896                  <span class="leading-1.2 body-minus-2">
5897                    ${function() {
5898  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
5899  if (textArray.length > 0 && textArray.length < 2) {
5900    textArray.push('');
5901  }
5902  return textArray.map((text, index) => {
5903    if (index == 0) {
5904      return `<span>${text}</span>`;
5905    }
5906
5907    return `
5908      <span class="notranslate whitespace-nowrap">
5909        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5910      </span>
5911      <span>${text}</span>
5912    `;
5913  }).join('');
5914}()}
5915                  </span>
5916                  <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" d="M7.543 11.306a.6.6 0 0 0 .848 0l4.455-4.454a.3.3 0 0 0 0-.425l-.34-.339a.3.3 0 0 0-.424 0l-4.115 4.115-4.115-4.115a.3.3 0 0 0-.425 0l-.34.34a.3.3 0 0 0 0 .424l4.456 4.454Z"/></svg>
5917                </div>
5918                <div class="cart-drawer-summary-discount-btn lg:hidden" @tap="cart-drawer-summary-sticky-modal.open;">
5919                  <span class="leading-1.2 body-minus-2">
5920                    ${function() {
5921  const textArray = ("Save {{save_amount}}").split(/\{\{\s*save_amount\}\}/);
5922  if (textArray.length > 0 && textArray.length < 2) {
5923    textArray.push('');
5924  }
5925  return textArray.map((text, index) => {
5926    if (index == 0) {
5927      return `<span>${text}</span>`;
5928    }
5929
5930    return `
5931      <span class="notranslate whitespace-nowrap">
5932        <spz-currency class="inline-block" layout="container" value="${data.total_discount}"></spz-currency>
5933      </span>
5934      <span>${text}</span>
5935    `;
5936  }).join('');
5937}()}
5938                  </span>
5939                  <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" d="M7.543 11.306a.6.6 0 0 0 .848 0l4.455-4.454a.3.3 0 0 0 0-.425l-.34-.339a.3.3 0 0 0-.424 0l-4.115 4.115-4.115-4.115a.3.3 0 0 0-.425 0l-.34.34a.3.3 0 0 0 0 .424l4.456 4.454Z"/></svg>
5940                </div>
5941              </div>
5942
5943              <ul class="md:hidden clear w-full mt-1 leading-1.25 color-body-70" spz-if="${!!(data.discount_applications && data.discount_applications.length > 0)}">
5944                <li class="flex items-center justify-between ${index > 0 ? 'mt-2' : ''}" spz-for="(discount_application,index) in data.discount_applications">
5945                  <span>${discount_application.title}:</span>
5946                  <span class="notranslate ml-2 whitespace-nowrap">
5947                    -<spz-currency class="inline-block" layout="container" value="${discount_application.discount_amount}"></spz-currency>
5948                  </span>
5949                </li>
5950              </ul>
5951            </div>
5952          </div>
5953          <button
5954  type="button"
5955  class="cart-drawer-checkout-btn cart-drawer-checkout-btn-mobile ml-2 lg:hidden button-primary relative flex-shrink-0 w-full mt-4 body-plus-2 leading-1.2"
5956  data-track="checkout-submit,click"
5957  data-track-content="checkout"
5958  data-track-source="checkout"
5959  @tap="cart-drawer.checkout;"
5960>
5961  <span>Check out</span>
5962  <div class="loading items-center justify-center absolute inset-0 flex" role="loading"   show >
5963  <div class="loading-bounce"></div>
5964</div>
5965</button>
5966        </div>
5967
5968        <div class="cart-drawer-invalid-msg md:hidden mt-4" spz-if="${!!data.invalid_msg}">${data.invalid_msg}</div>
5969
5970        <button
5971  type="button"
5972  class="cart-drawer-checkout-btn md:hidden button-primary relative flex-shrink-0 w-full mt-4 body-plus-2 leading-1.2"
5973  data-track="checkout-submit,click"
5974  data-track-content="checkout"
5975  data-track-source="checkout"
5976  @tap="cart-drawer.checkout;"
5977>
5978  <span>Check out</span>
5979  <div class="loading items-center justify-center absolute inset-0 flex" role="loading"   show >
5980  <div class="loading-bounce"></div>
5981</div>
5982</button>
5983
5984        <div class="mt-2 color-body-70 text-right lg:text-center">Taxes and shipping calculated at checkout</div>
5985      </div>
5986
5987      <spz-sidebar class="cart-drawer-summary-sticky-modal lg:hidden" id="cart-drawer-summary-sticky-modal" layout="nodisplay" side="bottom" hidden  @open="cart-drawer-modal.toggleClass(class='deepen', force=true);" @beforeClose="cart-drawer-modal.toggleClass(class='deepen', force=false);" >
5988  <div class="cart-drawer-summary-sticky-modal-inner relative">
5989    <div class="flex justify-end">
5990      <button class="cart-drawer-summary-sticky-modal-close clear flex p-2 cursor-pointer" @tap="cart-drawer-summary-sticky-modal.close();" type="button">
5991        <svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M1.93 17.147a.3.3 0 0 0 0 .425l.905.904a.3.3 0 0 0 .424 0l6.652-6.653 6.704 6.704a.3.3 0 0 0 .424 0l.904-.904a.3.3 0 0 0 0-.425l-6.703-6.703 6.652-6.653a.3.3 0 0 0 0-.424l-.904-.904a.3.3 0 0 0-.424 0L9.91 9.166 3.31 2.565a.3.3 0 0 0-.424 0l-.905.904a.3.3 0 0 0 0 .424l6.602 6.602-6.653 6.652Z" clip-rule="evenodd"/></svg>
5992      </button>
5993    </div>
5994
5995    <ul class="clear w-full mt-3 leading-1.25 color-body-70" spz-if="${!!(data.discount_applications && data.discount_applications.length > 0)}">
5996      <li class="flex items-center justify-between">
5997        <span>Subtotal:</span>
5998        <span class="notranslate ml-2 whitespace-nowrap">
5999          <spz-currency class="inline-block" layout="container" value="${data.line_price}"></spz-currency>
6000        </span>
6001      </li>
6002      <li class="flex items-center justify-between mt-2" spz-for="(discount_application,index) in data.discount_applications">
6003        <span>${discount_application.title}:</span>
6004        <span class="notranslate ml-2 whitespace-nowrap">
6005          <span>-</span><spz-currency class="inline-block" layout="container" value="${discount_application.discount_amount}"></spz-currency>
6006        </span>
6007      </li>
6008    </ul>
6009
6010    <div class="flex items-start justify-between mt-2 font-medium body-plus-2 leading-1.25">
6011      <span>Total:</span>
6012      <div class="flex items-center">
6013        <spz-currency class="color-price" container-class="plugin__bundle__cart__total-price" layout="container" value="${data.total_price}"></spz-currency>
6014        </div>
6015    </div>
6016    <button
6017  type="button"
6018  class="cart-drawer-checkout-btn mt-4 button-primary relative flex-shrink-0 w-full mt-4 body-plus-2 leading-1.2"
6019  data-track="checkout-submit,click"
6020  data-track-content="checkout"
6021  data-track-source="checkout"
6022  @tap="cart-drawer.checkout;"
6023>
6024  <span>Check out</span>
6025  <div class="loading items-center justify-center absolute inset-0 flex" role="loading"   show >
6026  <div class="loading-bounce"></div>
6027</div>
6028</button>
6029    <div class="mt-2 body-minus-2 color-body-70 text-center">Taxes and shipping calculated at checkout</div>
6030  </div>
6031</spz-sidebar>
6032
6033      <spz-script layout="logic" scope="cart-drawer-modal" type="application/javascript" hidden>
6034        const summaryStickyRender = document.querySelector('#cart-drawer-summary-sticky-render');
6035        if (summaryStickyRender) {
6036          document.body.style.setProperty('--cart-drawer-summary-sticky-height', summaryStickyRender.clientHeight + 'px');
6037        }
6038      </spz-script>
6039    </div>
6040  </template>
6041</spz-render>
6042</div>
6043    </div>
6044    
6044<script type="application/ld+json">
6045  {
6046    "@context": "http://schema.org",
6047    "@type": "WebSite",
6048    "name": "sacclife",
6049    "url": "https://www.sacclife.com"
6050  }
6051</script>
6051
6052<div class="theme-toast-wrap lg:page-container flex justify-end">
6053  <spz-toast class="theme-toast p-4 lg:py-8 lg:px-5 leading-1.2 i-spzhtml-layout-nodisplay" id="theme-toast" layout="nodisplay" hidden="" style="display: none" i-spzhtml-layout="nodisplay"></spz-toast>
6054  <spz-toast class="theme-toast p-4 lg:py-8 lg:px-5 leading-1.2 flex items-center i-spzhtml-layout-nodisplay" id="theme-toast-success" layout="nodisplay" hidden="" style="display: none" i-spzhtml-layout="nodisplay">
6055    <svg class="flex-shrink-0 mr-3" width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M3.088 8.895a.3.3 0 0 0 0 .424l3.608 3.608a.6.6 0 0 0 .848 0l7.85-7.85a.3.3 0 0 0 0-.423l-.567-.566a.3.3 0 0 0-.424 0L7.12 11.37 4.078 8.33a.3.3 0 0 0-.424 0l-.566.566z" fill="currentColor"/></svg>
6056    <span role="content"></span>
6057  </spz-toast>
6058</div>
6059    <div class="add_cart-toast-wrap lg:page-container flex justify-end">
6060  <spz-toast class="add_cart-toast p-4 lg:py-8 lg:px-5 leading-1.2 flex items-center i-spzhtml-layout-nodisplay" id="add-card-toast-success" layout="nodisplay" hidden="" style="display: none" i-spzhtml-layout="nodisplay">
6061    <span class="flex justify-between items-center w-full">
6062      <span role="content"></span>
6063      <a class="toast_view_cart inline-block font-bold text-base leading-1.1 cursor-pointer no-underline" href="/cart">View Cart</a>
6064    </span>
6065  </spz-toast>
6066</div>
6067    <style>
6068  .quick-shop .i-spzhtml-fill-content {
6069    display: flex;
6070    align-items: center;
6071    justify-content: center;
6072  }
6073
6074  .quick-shop-render {
6075    height: auto !important;
6076    width: 100%;
6077  }
6078
6079  .quick-shop-render[loading],
6080  .quick-shop-render[loading] ~ .quick-shop-close-btn {
6081    display: none;
6082  }
6083
6084  .quick-shop-content {
6085    position: relative;
6086    max-height: 86vh;
6087    overflow-y: auto;
6088    box-sizing: border-box;
6089    padding: 28px 24px 36px;
6090    width: 100%;
6091    background-color: var(--color-body-bg);
6092    overflow-y: auto;
6093    transition: all 0.2s ease-in-out;
6094  }
6095
6096  /* variants */
6097  .quick-shop__variants_content {
6098    padding: 0;
6099    border: none;
6100  }
6101
6102  .quick-shop__variants_content input[type='radio'] {
6103    position: absolute;
6104    left: 0;
6105    right: 0;
6106    opacity: 0;
6107    width: 100%;
6108    height: 100%;
6109    z-index: 10;
6110    border: 0;
6111    margin: 0;
6112    cursor: pointer;
6113  }
6114
6115  .quick-shop__variants_title {
6116    display: flex;
6117    align-items: center;
6118    flex-wrap: wrap;
6119    max-width: 100%;
6120  }
6121
6122  .quick-shop-variant-option {
6123    display: flex;
6124    align-items: center;
6125    justify-content: center;
6126    position: relative;
6127    color: var(--color-body-text-75);
6128    border: 1px solid var(--color-border);
6129    overflow: hidden;
6130  }
6131
6132  .quick-shop-variant-option[data-type='text'] {
6133    display: flex;
6134    align-items: center;
6135    justify-content: center;
6136    padding: 10px 16px;
6137  }
6138  .quick-shop-variant-option[data-type^='image'] {
6139    padding: 4px;
6140    gap: 4px;
6141  }
6142
6143  .quick-shop-variant-option[data-type^='image'] > spz-img {
6144    width: 42px;
6145    height: 42px;
6146    border-radius: 1px;
6147  }
6148
6149  .quick-shop__variants_content input[type='radio']:checked + .quick-shop-variant-option {
6150    color: var(--color-body-text);
6151    border-color: var(--color-body-text);
6152    outline: none;
6153  }
6154  .quick-shop__variants_content
6155    input[type='radio'][soldout]:not(:checked)
6156    + .quick-shop-variant-option,
6157  .quick-shop__variants_content
6158    input[type='radio'][no_exits]:not(:checked)
6159    + .quick-shop-variant-option {
6160    border-style: dashed;
6161  }
6162  .quick-shop__variants_content
6163    input[type='radio'][soldout]
6164    + .quick-shop-variant-option[data-type^='image']
6165    spz-img,
6166  .quick-shop__variants_content
6167    input[type='radio'][no_exits]
6168    + .quick-shop-variant-option[data-type^='image']
6169    spz-img {
6170    filter: opacity(0.5);
6171  }
6172
6173  .quick-shop-body[status='soldout'] .quick-shop__variant__select,
6174  .quick-shop-body[status*='unavailable'] .quick-shop__variant__select {
6175    color: var(--color-body-text-50, #888a8b);
6176    text-decoration: line-through;
6177  }
6178
6179  .quick-shop__variants_content input[type='radio'][soldout] + .quick-shop-variant-option,
6180  .quick-shop__variants_content input[type='radio'][no_exits] + .quick-shop-variant-option {
6181    color: var(--color-body-text-50, #202020);
6182    background: var(--color-border-35);
6183    text-decoration: line-through;
6184  }
6185
6186  .quick-shop__variant__select {
6187    min-height: 46px;
6188    line-height: 46px;
6189    padding-right: 46px;
6190    padding-left: 12px;
6191  }
6192
6193  .quick-shop__variant__select-icon {
6194    display: flex;
6195    flex-shrink: 0;
6196    position: absolute;
6197    top: 50%;
6198    right: 12px;
6199    transform: translateY(-50%) rotate(90deg);
6200    pointer-events: none;
6201  }
6202
6203  .quick-shop-close-btn {
6204    height: 66px;
6205    width: 66px;
6206    cursor: pointer;
6207    opacity: 0.7;
6208    z-index: 10;
6209  }
6210
6211  #quick-shop-render[loading] ~ .quick-shop-loading {
6212    display: block !important;
6213  }
6214
6215  /* qty */
6216  .quick-shop-qty {
6217    width: 116px;
6218  }
6219
6220  .quick-shop-qty > .i-spzhtml-fill-content {
6221    display: flex;
6222    align-items: center;
6223  }
6224
6225  .quick-shop-qty-btn {
6226    width: 40px;
6227    height: 100%;
6228    border: 1px solid rgba(230, 230, 230, 1);
6229  }
6230
6231  .quick-shop-qty-btn[disabled] {
6232    background-color: rgba(230, 230, 230, 1);
6233  }
6234
6235  .quick-shop-qty-input {
6236    width: 36px;
6237  }
6238
6239  /* buy button */
6240  .quick-shop_atc_btn {
6241    height: 52px;
6242    width: 100%;
6243    padding: 0;
6244    font-weight: 600;
6245    outline: 2px solid transparent;
6246    outline-offset: 2px;
6247  }
6248
6249  #quick-shop-body[status*='unavailable'] [role='addToCart'],
6250  #quick-shop-body[status='soldout'] [role='addToCart'] {
6251    cursor: default;
6252    pointer-events: none;
6253    background: #ced0d2;
6254    color: #fff;
6255  }
6256
6257  #quick-shop-body[status*='unavailable'] #quick-shop-btn-price,
6258  #quick-shop-body[status='soldout'] #quick-shop-btn-price,
6259  .quick-shop_atc_btn[loading] [role='content'],
6260  .quick-shop_atc_btn:not([loading]) .loading,
6261  .quick-shop_atc_btn[role='addToCart'][loading] #quick-shop-btn-price {
6262    display: none;
6263  }
6264
6265  .quick-shop_buy_now_btn {
6266    border: 1px solid var(--color-primary-btn-bg);
6267  }
6268
6269  /* wholesale */
6270  .quick-shop-wholesale {
6271    overflow-y: hidden;
6272    overflow-x: auto;
6273    background: #f9f9fa;
6274  }
6275
6276  .quick-shop-wholesale-item:nth-child(n + 2) {
6277    margin-left: 8px;
6278  }
6279
6280  .quick-shop-wholesale-item .money {
6281    color: var(--color-price-text);
6282  }
6283
6284  .quick-shop-wholesale-item.highlight .money {
6285    color: var(--color-save-price-text);
6286  }
6287
6288  @media (max-width: 959.98px) {
6289    #quick-shop {
6290      padding: 0 18px;
6291    }
6292
6293    #quick-shop > .quick-shop-container {
6294      width: 100%;
6295    }
6296  }
6297
6298  @media (min-width: 960px) {
6299    .quick-shop-render {
6300      width: 495px;
6301    }
6302    .quick-shop-content {
6303      padding: 32px 24px;
6304    }
6305    .quick-shop-variant-option[data-type='text'] {
6306      padding: 13px 16px;
6307    }
6308  }
6309</style>
6310<spz-lightbox class="quick-shop i-spzhtml-layout-nodisplay" id="quick-shop" layout="nodisplay" hidden="" unclose-in-focus style="display: none" i-spzhtml-layout="nodisplay">
6311    <div class="quick-shop-container">
6312      <div class="relative">
6313        <spz-render class="quick-shop-render pointer-events-auto w-full i-spzhtml-layout-container" id="quick-shop-render" items="data" layout="container" @finish="quick-shop-variants.variantsRender(product=event.data.product);quick-shop-body.setProduct(data=event.data.product);quick-shop-btn-price.rerender(data=event.data);" manual i-spzhtml-layout="container">
6314          <template>
6315            ${function(){
6316              console.log('quick-shop-render',data);
6317              const productData = data.product;
6318              let product_change_event = '',
6319                  mouse_over_event = ' ';
6320                  mouse_out_event = '';
6321              const product_options = productData.options.filter(Boolean) || [];
6322              const selectedVariant = productData.variants.find(v => v.available) || productData.variants[0];
6323              const statusLan = ((selectedVariant && !selectedVariant.available) || (!selectedVariant && !productData.available)) ?
6324                "Sold out" :
6325                "Add to cart";
6326
6327              return `
6328                <div>
6329                  <spz-product-form
6330                    id="quick-shop-body"
6331                    class="quick-shop-body"
6332                    layout="container"
6333                    show-toast
6334                    product-id="${productData.id}"
6335                    variant-id="${selectedVariant.id}"
6336                    @atcSuccess="quick-shop.close;"
6337                    @atcError="theme-toast.showToast(content=event.message);"
6338                    @productChange="quick-shop-btn-price.rerender(data=event);${product_change_event}"
6339                  >
6340                    <form>
6341                      <div class="quick-shop-content rounded-global-small">
6342                        <div class="quick-shop-inner-content">
6343                          <spz-variants
6344                            name="quick-shop-variant"
6345                            id="quick-shop-variants"
6346                            class="pointer-events-none"
6347                            layout="container"
6348                            template="quick-shop-variant-template"
6349                            spz-if="${product_options && product_options.length > 0}"
6350                            product-swatches="color"
6351                            interact="hover"
6352                            interference
6353                            select-soldout-suffix=" - Sold out"
6354                            select-no-exists-suffix=" - Unavailable"
6355                          ></spz-variants>
6356                          
6357                          <button
6358                            class="relative mt-5 lg:mt-6 button-primary flex items-center justify-center body-plus-2  type-text-font-family rounded-btn quick-shop_atc_btn"
6359                            type="button"
6360                            role="addToCart"
6361                            data-track="click"
6362                            data-track-content="add_to_cart"
6363                            data-track-source="add_to_cart"
6364                          >
6365                            <span role="content">${statusLan}</span>
6366                            
6367                              <spz-render id="quick-shop-btn-price" layout="container" template="quick-shop-button-price-template" manual></spz-render>
6368                            
6369                            
6370
6371<div class="loading items-center justify-center absolute inset-0" role="loading"   show >
6372  <div class="loading-bounce"></div>
6373</div>
6374                          </button>
6375                        </div>
6376                      </div>
6377                    </form>
6378                  </spz-product-form>
6379                </div>
6380              `
6381            }()}
6382          </template>
6383        </spz-render>
6384        <spz-loading class="quick-shop-loading i-spzhtml-layout-container" layout="container" role="mask" hidden i-spzhtml-layout="container"></spz-loading>
6385        <div class="quick-shop-close-btn absolute right-0 top-0 text-current flex items-center justify-center no-underline text-2xl" @tap="quick-shop.close;"><svg class="" width="22" height="22" xmlns="http://www.w3.org/2000/svg"><path d="M5.034 3.652a.367.367 0 0 0-.518 0l-.864.864a.367.367 0 0 0 0 .519l5.963 5.963-5.963 5.963a.367.367 0 0 0 0 .519l.864.864a.367.367 0 0 0 .518 0l5.964-5.963 5.963 5.963a.367.367 0 0 0 .519 0l.864-.864a.367.367 0 0 0 0-.519l-5.964-5.963 5.964-5.963a.367.367 0 0 0 0-.519l-.864-.864a.367.367 0 0 0-.519 0l-5.963 5.963-5.964-5.963z" fill="currentColor"/></svg></div>
6386      </div>
6387
6388      <template id="quick-shop-retail-price-template">
6389          ${function(){
6390            const currentSelectVariant = data.variant;
6391            const defaultVariant = (data.product && data.product.variants && data.product.variants[0]);
6392
6393            const variantData = currentSelectVariant || defaultVariant || data;
6394            const retail_price = variantData.retail_price || 0;
6395            return `
6396              <div>
6397                <div class="flex color-compare-price mt-3" spz-if="${retail_price>0}">
6398                  <span class="mr-1">Retail</span> <spz-currency value="${retail_price}" layout="container"></spz-currency>
6399                </div>
6400              </div>
6401            `
6402          }()}
6403      </template>
6404      <style>
6405  .product_price_before::before {
6406    content: ' - ';
6407    display: block;
6408    width: 20px;
6409  }
6410</style>
6411<template id="quick-shop-button-price-template">
6412  ${function(){
6413    const wholesale_enabled = false;
6414    const qty = data.quantity || 1;
6415    const currentSelectVariant = data.variant;
6416    const defaultVariant = (data.product && data.product.variants && data.product.variants[0]);
6417    const productVariant = null;
6418
6419    const variantData = currentSelectVariant || defaultVariant || productVariant;
6420    const wholesale_price = variantData.wholesale_price || [];
6421
6422    if(wholesale_enabled && wholesale_price.length > 0) {
6423      let wholesaleIndex = wholesale_price.findIndex(item => {
6424        return item.min_quantity > qty;
6425      });
6426      if(wholesaleIndex < 0){
6427        wholesaleIndex = wholesale_price.length - 1;
6428      }else if(wholesaleIndex > 0){
6429        wholesaleIndex = wholesaleIndex - 1;
6430      }
6431      const wholesalePrice = wholesale_price[wholesaleIndex] || '';
6432      return `
6433        <div class="flex">
6434          <span class="product_price_before"></span><spz-currency value="${wholesalePrice.price}" layout="container"></spz-currency>
6435        </div>
6436      `
6437    }else {
6438      const price = variantData && variantData.price;
6439      return price != undefined ? `<div class="flex"><span class="product_price_before"></span><spz-currency value="${price}" layout="container"></spz-currency></div>` : '<span></span>';
6440    }
6441  }()}
6442</template>
6443      </div>
6444  </spz-lightbox>
6445  <template id="quick-shop-variant-template">
6446  <div class="quick-shop-variants-container">
6447    <div spz-for="(option, index) in data.product.options">
6448      ${function(){
6449        const optionName = option.name || '';
6450        const optionId = option.id || '';
6451        let isThumbImage = !!option.showThumbImage;
6452        const thumbStyle = "image_with_text";
6453        const variantType = "button";
6454        const isSelected = (value) => {
6455          const selected = (data.selectedOptions || []).find(v => v.name === optionName);
6456          return selected && selected.value.length && selected.value[0] == value;
6457        };
6458        const getThumbImage = (value) => {
6459          const options = data.product.options || [];
6460          const option = options.find(o => o.name === optionName);
6461          if (option.thumbImages) {
6462            const thumbImage = option.thumbImages.find(t => t.value === value);
6463            if (thumbImage && thumbImage.image) {
6464              return {
6465                src: thumbImage.image.src,
6466                alt: thumbImage.image.alt
6467              };
6468            }
6469          }
6470          return {src: '', alt: ''};
6471        };
6472        return `
6473          <fieldset
6474            spz-if="${variantType=='button' || isThumbImage}"
6475            class="quick-shop__variants_content mt-6 mx-0 min-w-[0px]"
6476            name="${optionName}"
6477            @mouseout="quick-shop-selected-variant-${optionId}.rerender(data=event, redo=true);"
6478            @mouseover="quick-shop-selected-variant-${optionId}.rerender(data=event, redo=true);"
6479          >
6480            <legend class="quick-shop__variants_title">
6481              <span class="lg:body-plus-2 leading-1.3 inline-block">${optionName}:&nbsp;</span>
6482              <spz-render
6483                class="items-center opacity-60 inline-block flex-grow min-w-[0px] truncate"
6484                id="quick-shop-selected-variant-${optionId}"
6485                layout="container"
6486                template="quick-shop-selected-variant-template"
6487                manual
6488              >
6489                <span>${data.selectedOptions && data.selectedOptions.length && data.selectedOptions.find(v => v.name === optionName).value[0]}</span>
6490              </spz-render>
6491            </legend>
6492            <div class="flex flex-wrap ${isThumbImage ? 'mt-1' : 'quick-shop-variant-container'}">
6493              <div spz-for="(value, idx) in option.values" class="relative mt-3 mr-3" option="${value}">
6494                <input
6495                  checked
6496                  spz-if="isSelected(value)"
6497                  type="radio"
6498                  class="pointer-events-auto"
6499                  option="${value}"
6500                  id="quick-shop-variant-${value}-${idx}"
6501                  name="quick-shop-variant-${optionName}"
6502                  value="${value}"
6503                  form="quick-shop-body"
6504                  @input-debounced="quick-shop-selected-variant-${optionId}.rerender(data=event, redo=true);"
6505                >
6506                <input
6507                  spz-else
6508                  type="radio"
6509                  class="pointer-events-auto"
6510                  option="${value}"
6511                  id="quick-shop-variant-${value}-${idx}"
6512                  name="quick-shop-variant-${optionName}"
6513                  value="${value}"
6514                  form="quick-shop-body"
6515                  @input-debounced="quick-shop-selected-variant-${optionId}.rerender(data=event, redo=true);"
6516                >
6517                <label
6518                  class="quick-shop-variant-option break-words 
6519  rounded-[1px] 
6520"
6521                  data-type="${isThumbImage ? (thumbStyle == 'image_with_text' ? 'image-with-text' : 'image') : 'text'}"
6522                  for="quick-shop-variant-${value}-${idx}"
6523                >
6524                  <spz-img
6525                    spz-if="${!!isThumbImage}"
6526                    src="${getThumbImage(value).src}"
6527                    layout="responsive"
6528                    width="42"
6529                    height="42"
6530                    alt="${getThumbImage(value).alt}"
6531                    object-fit="cover"
6532                    auto-fit
6533                  ></spz-img>
6534                  <span spz-if="${thumbStyle == 'image_with_text' || !isThumbImage}" class="break-words"
6535                    >${value}</span>
6536                </label>
6537              </div>
6538            </div>
6539          </fieldset>
6540          <div spz-else class="mt-6">
6541            <div class="lg:body-plus-2 leading-1.3">${optionName}</div>
6542            <div class="relative mt-3">
6543              <select
6544                class="quick-shop__variant__select pointer-events-auto w-full text-text-font-size type-text-font-family 
6545  rounded-[1px] 
6546secondary-select"
6547                role="variant"
6548                name="${optionName}"
6549              >
6550                <option
6551                  spz-for="value in option.values"
6552                  spz-if="isSelected(value)"
6553                  class="quick-shop__variants_value"
6554                  value="${value}"
6555                  option="${value}"
6556                  selected
6557                >
6558                  ${value}
6559                </option>
6560                <option
6561                  spz-for="value in option.values"
6562                  spz-if="${!isSelected(value)}"
6563                  class="quick-shop__variants_value"
6564                  value="${value}"
6565                  option="${value}"
6566                >
6567                  ${value}
6568                </option>
6569              </select>
6570              <svg   class="quick-shop__variant__select-icon" width="22" height="22" xmlns="http://www.w3.org/2000/svg"><path d="M14.576 10.573a.6.6 0 0 1 0 .849L8.99 17.008a.3.3 0 0 1-.424 0l-.51-.51a.3.3 0 0 1 0-.424l5.078-5.077L8.057 5.92a.3.3 0 0 1 0-.424l.509-.509a.3.3 0 0 1 .424 0l5.586 5.586z" fill="currentColor"/></svg>
6571</div>
6572          </div>
6573        `
6574      }()}
6575    </div>
6576  </div>
6577</template>
6578<template id="quick-shop-selected-variant-template">
6579  <span class="inline-block truncate max-w-full" title="${data.value}">
6580    ${data.value}
6581  </span>
6582</template>
6583
6584<script type="text/javascript" async src="https://static.staticdj.com/seahorse/bottom_v2.335e01c1.js"></script>
vendor: 1 bytes, line 6584
6584
6585<script type="text/javascript" async src="https://static.staticdj.com/golden/bottom_v2.157d17d3.js"></script>
vendor: 1 bytes, line 6585
6585
6586<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"zebu":"zebu.e8dece57.js"});</script>
vendor: 1 bytes, line 6586
6586
6587<script type="text/javascript">
6588  (function () {
6589    if (!C_SETTINGS.payment_settings.paypal_express_enabled) return;
6590    if ((window.disabled_exts || []).indexOf("*") != -1 || (window.disabled_exts || []).indexOf("paypal_express") != -1) return;
6591    function getCookie(name) {
6592      var match = document.cookie.match(new RegExp(name + '=([^;]+)'));
6593      return (match && match[1]) || '';
6594    }
6595    var ppStamp = (getCookie('awesomeab').match(/paypal-express-([vs0-9]+)/) || ['', ''])[1];
6596    var entry = ppStamp ? 'paypal_express.' + ppStamp + '.js' : 'paypal_express.70c809e1.js';
6597    var s = document.createElement('script');
6598    s.crossOrigin = "anonymous";
6599    s.async = !0;
6600    s.src = SHOP_PARAMS.cdn_domain + entry;
6601    document.body.appendChild(s);
6602
6603  })();
6604</script>
vendor: 1 bytes, line 6604
6604
6605<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"stamped_frontend":"stamped_frontend.f67dcbe7.js"});</script>
vendor: 1 bytes, line 6605
6605
6606<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"google_form":"google_form.025d905a.js"});</script>
vendor: 1 bytes, line 6606
6606
6607<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"blog_products":"blog_products.b67b5c27.js"});</script>
vendor: 1 bytes, line 6607
6607
6608<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"discount_gifts":"discount_gifts.87837098.js"});</script>
vendor: 1 bytes, line 6608
6608
6609<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"basic":"basic.c50df513.js"});</script>
vendor: 1 bytes, line 6609
6609
6610<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"bundle":"bundle.a029e922.js"});</script>
vendor: 1 bytes, line 6610
6610
6611<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"bear":"bear.4241d627.js"});</script>
vendor: 1 bytes, line 6611
6611
6612<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"couponcode":"couponcode.0cd81091.js"});</script>
vendor: 1 bytes, line 6612
6612
6613<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"cart_pop":"cart_pop.c733db0f.js"});</script>
vendor: 1 bytes, line 6613
6613
6614<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"buy_on_others":"buy_on_others.d678fa5c.js"});</script>
vendor: 1 bytes, line 6614
6614
6615<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"translate":"translate.5c34eee2.js"});</script>
vendor: 1 bytes, line 6615
6615
6616<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"installment":"installment.e24868df.js"});</script>
vendor: 1 bytes, line 6616
6616
6617<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"sloth":"sloth.cc72648e.js"});</script>
vendor: 1 bytes, line 6617
6617
6618<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"image_video":"image_video.b713d119.js"});</script>
vendor: 1 bytes, line 6618
6618
6619<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"size_guide":"size_guide.ac4ad793.js"});</script>
vendor: 1 bytes, line 6619
6619
6620<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"common":"common.e560ab2c.js"});</script>
vendor: 1 bytes, line 6620
6620
6621<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"fb_messenger":"fb_messenger.1de139d2.js"});</script>
vendor: 1 bytes, line 6621
6621
6622<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"flashsale":"flashsale.d2ddc7ab.js"});</script>
vendor: 1 bytes, line 6622
6622
6623<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"privacy_app":"privacy_app.ade927e4.js"});</script>
vendor: 1 bytes, line 6623
6623
6624<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"jellyfish":"jellyfish.f9cc89bb.js"});</script>
vendor: 1 bytes, line 6624
6624
6625<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"buffalo":"buffalo.e0f4e5cf.js"});</script>
vendor: 1 bytes, line 6625
6625
6626<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"coupon":"coupon.07fd62a8.js"});</script>
vendor: 1 bytes, line 6626
6626
6627<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"product_detail_rebate":"product_detail_rebate.cbca7ec3.js"});</script>
vendor: 1 bytes, line 6627
6627
6628<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"vole":"vole.de34b0f2.js"});</script>
vendor: 1 bytes, line 6628
6628
6629<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"wishlist":"wishlist.0fc03a14.js"});</script>
vendor: 1 bytes, line 6629
6629
6630<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"social_login":"social_login.537a8e8f.js"});</script>
vendor: 1 bytes, line 6630
6630
6631<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"numbat":"numbat.14e8199b.js"});</script>
vendor: 1 bytes, line 6631
6631
6632<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"sales_pop":"sales_pop.0410e3b6.js"});</script>
6632
6633
6634<script>
6635~(function() {
6636  // checkout page
6637  if (window.SHOP_PARAMS.template_type === '14') {
6638    return;
6639  }
6640  function track(event, params) {
6641    if (window.sa && window.sa.track && typeof window.sa.track === 'function') {
6642      window.sa.track(event, params);
6643    };
6644  }
6645  function preload() {
6646    var script = document.createElement('script');
6647    script.async = true;
6648    script.src = '/api/preload-checkout?t=' + Date.now();
6649    var loadStart = Date.now();
6650    track('preload_checkout_start');
6651    script.addEventListener('load', function() {
6652      track('preload_checkout_loaded', { load_duration: Date.now() - loadStart });
6653    });
6654    script.addEventListener('error', function(e) {
6655      track('preload_checkout_error', { load_duration: Date.now() - loadStart });
6656    });
6657    document.body.appendChild(script);
6658  }
6659
6660  try {
6661      var ab = document.cookie.split(';').find(function (i) { return /awesomeab=/.test(i); });
6662      var version = 'default';
6663      if (ab) {
6664        var chickNext = decodeURIComponent(ab).split('=')[1].split(',').find(function (i) { return /chick-next/.test(i); });
6665        if (chickNext) version = chickNext;
6666      }
6667
6668      var loadedObj = JSON.parse(sessionStorage.getItem('preload_checkout_loaded_v1') || '{}');
6669
6670      if (loadedObj[version] && loadedObj[version]['allLoaded']) return;
6671    } catch (e) {}
6672
6673    window.addEventListener('load', preload);
6674})();
6675</script>
6675
6676
6677<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"currency":"currency.ca2b3757.js"});</script>
vendor: 1 bytes, line 6677
6677
6678<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"appparakeet":"appparakeet.537f9b5b.js"});</script>
vendor: 1 bytes, line 6678
6678
6679<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"multi_market":"multi_market.85145627.js"});</script>
vendor: 1 bytes, line 6679
6679
6680<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"recommended_product":"recommended_product.b4592e0a.js"});</script>
vendor: 1 bytes, line 6680
6680
6681<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"boowc":"boowc.15caf0e7.js"});</script>
vendor: 1 bytes, line 6681
6681
6682<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"add_to_cart":"add_to_cart.6cde2531.js"});</script>
vendor: 1 bytes, line 6682
6682
6683<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"apptrustpilot-plugin":"apptrustpilot-plugin.7edc2607.js"});</script>
vendor: 1 bytes, line 6683
6683
6684<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"variants_combination":"variants_combination.17e6b308.js"});</script>
vendor: 1 bytes, line 6684
6684
6685<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"filly":"filly.b9085eb2.js"});</script>
vendor: 1 bytes, line 6685
6685
6686<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"subscription_popups":"subscription_popups.9a18a460.js"});</script>
vendor: 1 bytes, line 6686
6686
6687<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"reviews":"reviews.77c0cadd.js"});</script>
vendor: 1 bytes, line 6687
6687
6688<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"top_products":"top_products.4da4f6f3.js"});</script>
vendor: 1 bytes, line 6688
6688
6689<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"plugin_parakeet":"plugin_parakeet.6893a874.js"});</script>
vendor: 1 bytes, line 6689
6689
6690<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"trout":"trout.47f21cf1.js"});</script>
vendor: 1 bytes, line 6690
6690
6691<script type="text/javascript">Object.assign(window.exts || (window.exts={}),{"discount_gifts_v2":"discount_gifts_v2.a34137af.js"});</script>
6691
6692</body>
6693</html>

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.