1<!doctype html> 2<html 3 4 lang="en" 5> 6 <head>
6<script data-source-attribution="shopify.event_observer.bootstrap"> 7(function(){let e=navigator,t=`prototype`,n=`sendBeacon`,r=e[n],i=fetch,a=XMLHttpRequest[t],{open:o,send:s}=a,c=`EventListener`,l=`add${c}`,u=`remove${c}`,d=EventTarget[t],f=d[l],p=d[u],m=e=>Error((e=document.currentScript)&&[e?.src,e?.id||e?.dataset?.sourceAttribution]),h=(e=[],t=0)=>(e.p=n=>e[t++%1e3]=n,[e,t=>(e.forEach(e.p=t),e.length=0)]),[g,_]=h(),[v,y]=h(),b,x=new WeakMap,S=e=>e&&g.p([e,b||[m()]]);d[l]=function(e,t,n){let r=this,i=t?.handleEvent||t,a=x.get(t),o=m();i?.call&&!a&&x.set(t,a=function(e){b=[o,e.type];try{i.call(t==i?this:t,e)}finally{b=null}}),v.p([e,o,a,r?.tagName||r+``,r?.id]),f.call(r,e,a||t,n)},d[u]=function(e,t,n){p.call(this,e,x.get(t)||t,n)},a.open=function(e,t){x.set(this,[t+``,e]),o.apply(this,arguments)},a.send=function(e){S(x.get(this)),s.call(this,e)},fetch=(e,t)=>(S([(e?.url||e)+``,t?.method]),i(e,t)),e[n]=(t,n)=>(S([t+``,``]),r.call(e,t,n)),setTimeout(()=>import("//mondido.com/cdn/shopifycloud/storefront/assets/storefront/event_observer_reporter-ed358274.js").then(e=>e.$(_,y,f,i,`110396735826`)))})(); 8//# sourceURL=event-observer-collector.js 9</script>
9 10<link 11 rel="icon" 12 type="image/png" 13 href="//mondido.com/cdn/shop/files/symbol_transparent_black_only.png?crop=center&height=32&v=1789548342&width=32" 14 > 15 16 17 18<meta charset="utf-8"> 19<meta 20 http-equiv="X-UA-Compatible" 21 content="IE=edge" 22> 23<meta 24 name="viewport" 25 content="width=device-width,initial-scale=1" 26> 27<meta 28 name="theme-color" 29 content="" 30> 31 32<meta 33 property="og:site_name" 34 content="Mondido" 35> 36<meta 37 property="og:url" 38 content="https://mondido.com/en" 39> 40<meta 41 property="og:title" 42 content="Mondido Payments - Vi har betaltjänsterna för e-handlare" 43> 44<meta 45 property="og:type" 46 content="website" 47> 48<meta 49 property="og:description" 50 content="Betaltjänsterna för dig som jobbar inom e-com; Klarna, Zaver, Swish, Kort, Mobilepay, Vipps etc." 51><meta 52 property="og:image" 53 content="http://mondido.com/cdn/shop/files/mondido_upscale_4x_d8316a31-2167-4e43-ba79-b476ca982367.png?v=1789548040" 54 > 55 <meta 56 property="og:image:secure_url" 57 content="https://mondido.com/cdn/shop/files/mondido_upscale_4x_d8316a31-2167-4e43-ba79-b476ca982367.png?v=1789548040" 58 > 59 <meta 60 property="og:image:width" 61 content="1280" 62 > 63 <meta 64 property="og:image:height" 65 content="1280" 66 ><meta 67 name="twitter:card" 68 content="summary_large_image" 69> 70<meta 71 name="twitter:title" 72 content="Mondido Payments - Vi har betaltjänsterna för e-handlare" 73> 74<meta 75 name="twitter:description" 76 content="Betaltjänsterna för dig som jobbar inom e-com; Klarna, Zaver, Swish, Kort, Mobilepay, Vipps etc." 77> 78 79<title> 80 Mondido Payments - Vi har betaltjänsterna för e-handlare 81</title> 82 83<link 84 rel="canonical" 85 href="https://mondido.com/en" 86> 87 88 89 <meta 90 name="description" 91 content="Betaltjänsterna för dig som jobbar inom e-com; Klarna, Zaver, Swish, Kort, Mobilepay, Vipps etc." 92 > 93 94<link href="//mondido.com/cdn/shop/t/1/assets/overflow-list.css?v=16727044177065489451787819631" as="style" rel="preload"> 95<link href="//mondido.com/cdn/shop/t/1/assets/base.css?v=132492467252896707531787819631" rel="stylesheet" type="text/css" media="all" /> 96 97 98 99 100 101<link href="//mondido.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload"> 102<link href="//mondido.com/cdn/fonts/inter/inter_n5.d7101d5e168594dd06f56f290dd759fba5431d97.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload"> 103<link href="//mondido.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload"> 104<link href="//mondido.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin="anonymous" rel="preload"> 105 106
107<script async crossorigin fetchpriority="high" src="/cdn/shopifycloud/importmap-polyfill/es-modules-shim.2.4.0.js"></script>
vendor: 1 bytes, line 107
107
108<script type="importmap"> 109 { 110 "imports": { 111 "@theme/overflow-list": "//mondido.com/cdn/shop/t/1/assets/overflow-list.js?v=46858356770684902511787819631", 112 "@theme/component": "//mondido.com/cdn/shop/t/1/assets/component.js?v=175690430936884589731787819631", 113 "@theme/dialog": "//mondido.com/cdn/shop/t/1/assets/dialog.js?v=144816527575655702281787819631", 114 "@theme/events": "//mondido.com/cdn/shop/t/1/assets/events.js?v=99399773727497444581787819631", 115 "@shopify/events": "https://cdn.shopify.com/storefront/standard-events.js", 116 "@theme/view-event-elements": "//mondido.com/cdn/shop/t/1/assets/view-event-elements.js?v=34258756885466567141787819631", 117 "@theme/focus": "//mondido.com/cdn/shop/t/1/assets/focus.js?v=60436577539430446401787819631", 118 "@theme/morph": "//mondido.com/cdn/shop/t/1/assets/morph.js?v=182601902166245204061787819631", 119 "@theme/paginated-list": "//mondido.com/cdn/shop/t/1/assets/paginated-list.js?v=71290058904108491691787819631", 120 "@theme/performance": "//mondido.com/cdn/shop/t/1/assets/performance.js?v=171015751390534793081787819631", 121 "@theme/product-form": "//mondido.com/cdn/shop/t/1/assets/product-form.js?v=156247955454460663281787819631", 122 "@theme/recently-viewed-products": "//mondido.com/cdn/shop/t/1/assets/recently-viewed-products.js?v=94729125001750262651787819631", 123 "@theme/scrolling": "//mondido.com/cdn/shop/t/1/assets/scrolling.js?v=162288454571026455011787819631", 124 "@theme/section-renderer": "//mondido.com/cdn/shop/t/1/assets/section-renderer.js?v=44511745960026958271787819631", 125 "@theme/section-hydration": "//mondido.com/cdn/shop/t/1/assets/section-hydration.js?v=108434990705342316311787819631", 126 "@theme/money-formatting": "//mondido.com/cdn/shop/t/1/assets/money-formatting.js?v=160151249720534550011787819631", 127 "@theme/utilities": "//mondido.com/cdn/shop/t/1/assets/utilities.js?v=46961525399390006791787819631", 128 "@theme/variant-picker": "//mondido.com/cdn/shop/t/1/assets/variant-picker.js?v=76692244208061220611787819631", 129 "@theme/variant-resolution": "//mondido.com/cdn/shop/t/1/assets/variant-resolution.js?v=69293302205961280521787819631", 130 "@theme/media-gallery": "//mondido.com/cdn/shop/t/1/assets/media-gallery.js?v=154207211298275592001787819631", 131 "@theme/quick-add": "//mondido.com/cdn/shop/t/1/assets/quick-add.js?v=160295260742220749141787819631", 132 "@theme/paginated-list-aspect-ratio": "//mondido.com/cdn/shop/t/1/assets/paginated-list-aspect-ratio.js?v=25254270272143792451787819631", 133 "@theme/popover-polyfill": "//mondido.com/cdn/shop/t/1/assets/popover-polyfill.js?v=119029313658895111201787819631", 134 "@theme/component-quantity-selector": "//mondido.com/cdn/shop/t/1/assets/component-quantity-selector.js?v=67906657287482036641787819631", 135 "@theme/comparison-slider": "//mondido.com/cdn/shop/t/1/assets/comparison-slider.js?v=106705562947035711941787819631", 136 "@theme/sticky-add-to-cart": "//mondido.com/cdn/shop/t/1/assets/sticky-add-to-cart.js?v=130489688094345781431787819631", 137 "@theme/fly-to-cart": "//mondido.com/cdn/shop/t/1/assets/fly-to-cart.js?v=48483246440248933081787819631", 138 "@theme/scroll-container": "//mondido.com/cdn/shop/t/1/assets/scroll-container.js?v=127018149358875384221787819631", 139 "@theme/theme-drawer": "//mondido.com/cdn/shop/t/1/assets/theme-drawer.js?v=155110645205299884131787819631" 140 } 141 } 142</script>
142<script 143 src="//mondido.com/cdn/shop/t/1/assets/standard-actions-override.js?v=171683365447094389611787819631" 144 type="module" 145></script>
145 146
147<script 148 src="//mondido.com/cdn/shop/t/1/assets/page-view-event.js?v=12823247316348680231787819631" 149 type="module" 150 defer 151></script>
151 152
153<script 154 src="//mondido.com/cdn/shop/t/1/assets/view-transitions.js?v=116552130480572511441787819631" 155 async 156 157></script>
157 158 159<link 160 rel="modulepreload" 161 href="//mondido.com/cdn/shop/t/1/assets/utilities.js?v=46961525399390006791787819631" 162 fetchpriority="low" 163> 164<link 165 rel="modulepreload" 166 href="//mondido.com/cdn/shop/t/1/assets/component.js?v=175690430936884589731787819631" 167 fetchpriority="low" 168> 169<link 170 rel="modulepreload" 171 href="//mondido.com/cdn/shop/t/1/assets/section-renderer.js?v=44511745960026958271787819631" 172 fetchpriority="low" 173> 174<link 175 rel="modulepreload" 176 href="//mondido.com/cdn/shop/t/1/assets/section-hydration.js?v=108434990705342316311787819631" 177 fetchpriority="low" 178> 179<link 180 rel="modulepreload" 181 href="//mondido.com/cdn/shop/t/1/assets/morph.js?v=182601902166245204061787819631" 182 fetchpriority="low" 183> 184 185 186 187<link 188 rel="modulepreload" 189 href="//mondido.com/cdn/shop/t/1/assets/focus.js?v=60436577539430446401787819631" 190 fetchpriority="low" 191> 192<link 193 rel="modulepreload" 194 href="//mondido.com/cdn/shop/t/1/assets/recently-viewed-products.js?v=94729125001750262651787819631" 195 fetchpriority="low" 196> 197<link 198 rel="modulepreload" 199 href="//mondido.com/cdn/shop/t/1/assets/scrolling.js?v=162288454571026455011787819631" 200 fetchpriority="low" 201> 202<link 203 rel="modulepreload" 204 href="//mondido.com/cdn/shop/t/1/assets/events.js?v=99399773727497444581787819631" 205 fetchpriority="low" 206>
207<script 208 src="//mondido.com/cdn/shop/t/1/assets/popover-polyfill.js?v=119029313658895111201787819631" 209 type="module" 210 fetchpriority="low" 211></script>
vendor: 1 bytes, line 211
211
212<script 213 src="//mondido.com/cdn/shop/t/1/assets/overflow-list.js?v=46858356770684902511787819631" 214 type="module" 215 fetchpriority="low" 216></script>
vendor: 1 bytes, line 216
216
217<script 218 src="//mondido.com/cdn/shop/t/1/assets/quick-add.js?v=160295260742220749141787819631" 219 type="module" 220 fetchpriority="low" 221></script>
221 222 223
223<script 224 src="//mondido.com/cdn/shop/t/1/assets/cart-discount.js?v=138990160074728809221787819631" 225 type="module" 226 fetchpriority="low" 227 ></script>
227 228 229
230<script 231 src="//mondido.com/cdn/shop/t/1/assets/dialog.js?v=144816527575655702281787819631" 232 type="module" 233 fetchpriority="low" 234></script>
vendor: 1 bytes, line 234
234
235<script 236 src="//mondido.com/cdn/shop/t/1/assets/variant-picker.js?v=76692244208061220611787819631" 237 type="module" 238 fetchpriority="low" 239></script>
vendor: 1 bytes, line 239
239
240<script 241 src="//mondido.com/cdn/shop/t/1/assets/product-card.js?v=80689566448612614681787819631" 242 type="module" 243 fetchpriority="low" 244></script>
vendor: 1 bytes, line 244
244
245<script 246 src="//mondido.com/cdn/shop/t/1/assets/product-form.js?v=156247955454460663281787819631" 247 type="module" 248 fetchpriority="low" 249></script>
vendor: 1 bytes, line 249
249
250<script 251 src="//mondido.com/cdn/shop/t/1/assets/fly-to-cart.js?v=48483246440248933081787819631" 252 type="module" 253 fetchpriority="low" 254></script>
vendor: 1 bytes, line 254
254
255<script 256 src="//mondido.com/cdn/shop/t/1/assets/accordion-custom.js?v=105323356731531709191787819631" 257 type="module" 258 fetchpriority="low" 259></script>
vendor: 1 bytes, line 259
259
260<script 261 src="//mondido.com/cdn/shop/t/1/assets/media.js?v=37825095869491791421787819631" 262 type="module" 263 fetchpriority="low" 264></script>
vendor: 1 bytes, line 264
264
265<script 266 src="//mondido.com/cdn/shop/t/1/assets/product-price.js?v=179333985604099329921787819631" 267 type="module" 268 fetchpriority="low" 269></script>
vendor: 1 bytes, line 269
269
270<script 271 src="//mondido.com/cdn/shop/t/1/assets/product-sku.js?v=28741104639155857071787819631" 272 type="module" 273 fetchpriority="low" 274></script>
vendor: 1 bytes, line 274
274
275<script 276 src="//mondido.com/cdn/shop/t/1/assets/product-inventory.js?v=7173209571153411411787819631" 277 type="module" 278 fetchpriority="low" 279></script>
vendor: 1 bytes, line 279
279
280<script 281 src="//mondido.com/cdn/shop/t/1/assets/show-more.js?v=94563802205717136101787819631" 282 type="module" 283 fetchpriority="low" 284></script>
vendor: 1 bytes, line 284
284
285<script 286 src="//mondido.com/cdn/shop/t/1/assets/slideshow.js?v=28306258147874261831787819631" 287 type="module" 288 fetchpriority="low" 289></script>
vendor: 1 bytes, line 289
289
290<script 291 src="//mondido.com/cdn/shop/t/1/assets/layered-slideshow.js?v=30135417790894624731787819631" 292 type="module" 293 fetchpriority="low" 294></script>
vendor: 1 bytes, line 294
294
295<script 296 src="//mondido.com/cdn/shop/t/1/assets/anchored-popover.js?v=143987075196095667371787819631" 297 type="module" 298 fetchpriority="low" 299></script>
vendor: 1 bytes, line 299
299
300<script 301 src="//mondido.com/cdn/shop/t/1/assets/floating-panel.js?v=151277338116891310371787819631" 302 type="module" 303 fetchpriority="low" 304></script>
vendor: 1 bytes, line 304
304
305<script 306 src="//mondido.com/cdn/shop/t/1/assets/video-background.js?v=25237992823806706551787819631" 307 type="module" 308 fetchpriority="low" 309></script>
vendor: 1 bytes, line 309
309
310<script 311 src="//mondido.com/cdn/shop/t/1/assets/component-quantity-selector.js?v=67906657287482036641787819631" 312 type="module" 313 fetchpriority="low" 314></script>
vendor: 1 bytes, line 314
314
315<script 316 src="//mondido.com/cdn/shop/t/1/assets/media-gallery.js?v=154207211298275592001787819631" 317 type="module" 318 fetchpriority="low" 319></script>
vendor: 1 bytes, line 319
319
320<script 321 src="//mondido.com/cdn/shop/t/1/assets/rte-formatter.js?v=40306132146590816021787819631" 322 type="module" 323 fetchpriority="low" 324></script>
vendor: 1 bytes, line 324
324
325<script 326 src="//mondido.com/cdn/shop/t/1/assets/volume-pricing.js?v=15442793518842484731787819631" 327 type="module" 328 fetchpriority="low" 329></script>
vendor: 1 bytes, line 329
329
330<script 331 src="//mondido.com/cdn/shop/t/1/assets/price-per-item.js?v=115937180292451397851787819631" 332 type="module" 333 fetchpriority="low" 334></script>
vendor: 1 bytes, line 334
334
335<script 336 src="//mondido.com/cdn/shop/t/1/assets/volume-pricing-info.js?v=94479640769665442661787819631" 337 type="module" 338 fetchpriority="low" 339></script>
339 340 341 342
342<script 343 src="//mondido.com/cdn/shop/t/1/assets/localization.js?v=15585934801240115691787819631" 344 type="module" 345 fetchpriority="low" 346 ></script>
346 347 348 349 350
351<script 352 src="//mondido.com/cdn/shop/t/1/assets/auto-close-details.js?v=58350291535404441581787819631" 353 defer="defer" 354></script>
354 355
356<script> 357 const Theme = { 358 translations: { 359 placeholder_image: `Placeholder image`, 360 added: `Added`, 361 recipient_form_fields_visible: `Recipient form fields are now visible`, 362 recipient_form_fields_hidden: `Recipient form fields are now hidden`, 363 recipient_form_error: `There was an error with the form submission`, 364 items_added_to_cart_one: `1 item added to cart`, 365 items_added_to_cart_other: `{{ count }} items added to cart`, 366 cart_count: `Total items in cart`, 367 }, 368 routes: { 369 cart_add_url: '/en/cart/add.js', 370 cart_change_url: '/en/cart/change', 371 cart_update_url: '/en/cart/update', 372 cart_url: '/en/cart', 373 predictive_search_url: '/en/search/suggest', 374 search_url: '/en/search', 375 }, 376 template: { 377 name: 'index', 378 }, 379 }; 380</script>
380 381<style data-shopify> 382@font-face { 383 font-family: Inter; 384 font-weight: 400; 385 font-style: normal; 386 font-display: swap; 387 src: url("//mondido.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2") format("woff2"), 388 url("//mondido.com/cdn/fonts/inter/inter_n4.af8052d517e0c9ffac7b814872cecc27ae1fa132.woff") format("woff"); 389} 390@font-face { 391 font-family: Inter; 392 font-weight: 700; 393 font-style: normal; 394 font-display: swap; 395 src: url("//mondido.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"), 396 url("//mondido.com/cdn/fonts/inter/inter_n7.6dab87426f6b8813070abd79972ceaf2f8d3b012.woff") format("woff"); 397} 398@font-face { 399 font-family: Inter; 400 font-weight: 400; 401 font-style: italic; 402 font-display: swap; 403 src: url("//mondido.com/cdn/fonts/inter/inter_i4.feae1981dda792ab80d117249d9c7e0f1017e5b3.woff2") format("woff2"), 404 url("//mondido.com/cdn/fonts/inter/inter_i4.62773b7113d5e5f02c71486623cf828884c85c6e.woff") format("woff"); 405} 406@font-face { 407 font-family: Inter; 408 font-weight: 700; 409 font-style: italic; 410 font-display: swap; 411 src: url("//mondido.com/cdn/fonts/inter/inter_i7.b377bcd4cc0f160622a22d638ae7e2cd9b86ea4c.woff2") format("woff2"), 412 url("//mondido.com/cdn/fonts/inter/inter_i7.7c69a6a34e3bb44fcf6f975857e13b9a9b25beb4.woff") format("woff"); 413} 414@font-face { 415 font-family: Inter; 416 font-weight: 500; 417 font-style: normal; 418 font-display: swap; 419 src: url("//mondido.com/cdn/fonts/inter/inter_n5.d7101d5e168594dd06f56f290dd759fba5431d97.woff2") format("woff2"), 420 url("//mondido.com/cdn/fonts/inter/inter_n5.5332a76bbd27da00474c136abb1ca3cbbf259068.woff") format("woff"); 421} 422@font-face { 423 font-family: Inter; 424 font-weight: 500; 425 font-style: italic; 426 font-display: swap; 427 src: url("//mondido.com/cdn/fonts/inter/inter_i5.4474f48e6ab2b1e01aa2b6d942dd27fa24f2d99f.woff2") format("woff2"), 428 url("//mondido.com/cdn/fonts/inter/inter_i5.493dbd6ee8e49f4ad722ebb68d92f201af2c2f56.woff") format("woff"); 429} 430 431 432 :root { 433 /* Page Layout */ 434 --sidebar-width: 25rem; 435 --theme-drawer-width: 30rem; 436 --narrow-content-width: 36rem; 437 --normal-content-width: 42rem; 438 --narrow-page-width: 90rem; 439 --normal-page-width: 120rem; 440 --wide-page-width: 150rem; 441 442 /* Section Heights */ 443 --section-height-small: 15rem; 444 --section-height-medium: 25rem; 445 --section-height-large: 35rem; 446 447 @media screen and (min-width: 40em) { 448 --section-height-small: 40svh; 449 --section-height-medium: 55svh; 450 --section-height-large: 70svh; 451 } 452 453 @media screen and (min-width: 60em) { 454 --section-height-small: 50svh; 455 --section-height-medium: 65svh; 456 --section-height-large: 80svh; 457 } 458 459 /* Letter spacing */ 460 --letter-spacing-sm: 0.06em; 461 462 /* Font families */ 463 --font-body--family: Inter, sans-serif; 464 --font-body--style: normal; 465 --font-body--weight: 400; 466 --font-subheading--family: Inter, sans-serif; 467 --font-subheading--style: normal; 468 --font-subheading--weight: 500; 469 --font-heading--family: Inter, sans-serif; 470 --font-heading--style: normal; 471 --font-heading--weight: 700; 472 --font-accent--family: Inter, sans-serif; 473 --font-accent--style: normal; 474 --font-accent--weight: 700; 475 476 /* Margin sizes */ 477 --font-heading--spacing: 0.25em; 478 --font-h1--spacing: var(--font-heading--spacing); 479 --font-h2--spacing: var(--font-heading--spacing); 480 --font-h3--spacing: var(--font-heading--spacing); 481 --font-h4--spacing: var(--font-heading--spacing); 482 --font-h5--spacing: var(--font-heading--spacing); 483 --font-h6--spacing: var(--font-heading--spacing); 484 --font-paragraph--spacing: 0.5em; 485 486 /** Z-Index / Layering */ 487 --layer-section-background: -2; 488 --layer-lowest: -1; 489 --layer-base: 0; 490 --layer-flat: 1; 491 --layer-raised: 2; 492 --layer-heightened: 4; 493 --layer-sticky: 8; 494 --layer-window-overlay: 10; 495 --layer-header-menu: 12; 496 --layer-overlay: 16; 497 --layer-menu-drawer: 18; 498 --layer-temporary: 20; 499 500 /* Max-width / Measure */ 501 --max-width--body-normal: 32.5em; 502 --max-width--body-narrow: 22.75em; 503 504 --max-width--heading-normal: 32.5em; 505 --max-width--heading-narrow: 19.5em; 506 507 --max-width--display-normal: 13em; 508 --max-width--display-narrow: 9.75em; 509 --max-width--display-tight: 3.25em; 510 511 /* Letter-spacing / Tracking */ 512 --letter-spacing--display-tight: -0.03em; 513 --letter-spacing--display-normal: 0em; 514 --letter-spacing--display-loose: 0.03em; 515 516 --letter-spacing--heading-tight: -0.03em; 517 --letter-spacing--heading-normal: 0em; 518 --letter-spacing--heading-loose: 0.03em; 519 520 --letter-spacing--body-tight: -0.03em; 521 --letter-spacing--body-normal: 0em; 522 --letter-spacing--body-loose: 0.03em; 523 524 /* Line height / Leading */ 525 --line-height: 1; 526 527 --line-height--display-tight: 1; 528 --line-height--display-normal: 1.1; 529 --line-height--display-loose: 1.2; 530 531 --line-height--heading-tight: 1.15; 532 --line-height--heading-normal: 1.25; 533 --line-height--heading-loose: 1.35; 534 535 --line-height--body-tight: 1.2; 536 --line-height--body-normal: 1.4; 537 --line-height--body-loose: 1.6; 538 539 /* Typography presets */ 540 --font-size--paragraph: 0.875rem;--font-size--h1: clamp(3.0rem, 5.6vw, 3.5rem);--font-size--h2: clamp(2.25rem, 4.8vw, 3.0rem);--font-size--h3: 2.0rem;--font-size--h4: 1.5rem;--font-size--h5: 0.875rem;--font-size--h6: 0.75rem;--font-paragraph--weight: 400;--font-paragraph--size: var(--font-size--paragraph);--font-paragraph--family: var(--font-body--family);--font-paragraph--style: var(--font-body--style);--font-paragraph--case: ;--font-paragraph--line-height: var(--line-height--body-loose);--font-h1--weight: var(--font-heading--weight);--font-h1--letter-spacing: var(--letter-spacing--heading-normal);--font-h1--size: var(--font-size--h1);--font-h1--family: var(--font-heading--family);--font-h1--style: var(--font-heading--style);--font-h1--case: none;--font-h1--line-height: var(--line-height--display-tight);--font-h2--weight: var(--font-heading--weight);--font-h2--letter-spacing: var(--letter-spacing--heading-normal);--font-h2--size: var(--font-size--h2);--font-h2--family: var(--font-heading--family);--font-h2--style: var(--font-heading--style);--font-h2--case: none;--font-h2--line-height: var(--line-height--display-tight);--font-h3--weight: var(--font-heading--weight);--font-h3--letter-spacing: var(--letter-spacing--heading-normal);--font-h3--size: var(--font-size--h3);--font-h3--family: var(--font-heading--family);--font-h3--style: var(--font-heading--style);--font-h3--case: none;--font-h3--line-height: var(--line-height--display-normal);--font-h4--weight: var(--font-heading--weight);--font-h4--letter-spacing: var(--letter-spacing--heading-normal);--font-h4--size: var(--font-size--h4);--font-h4--family: var(--font-heading--family);--font-h4--style: var(--font-heading--style);--font-h4--case: none;--font-h4--line-height: var(--line-height--display-tight);--font-h5--weight: var(--font-subheading--weight);--font-h5--letter-spacing: var(--letter-spacing--heading-normal);--font-h5--size: var(--font-size--h5);--font-h5--family: var(--font-subheading--family);--font-h5--style: var(--font-subheading--style);--font-h5--case: none;--font-h5--line-height: var(--line-height--display-loose);--font-h6--weight: var(--font-subheading--weight);--font-h6--letter-spacing: var(--letter-spacing--heading-normal);--font-h6--size: var(--font-size--h6);--font-h6--family: var(--font-subheading--family);--font-h6--style: var(--font-subheading--style);--font-h6--case: none;--font-h6--line-height: var(--line-height--display-loose); 541 542 /* Hardcoded font sizes */ 543 --font-size--3xs: 0.625rem; 544 --font-size--2xs: 0.75rem; 545 --font-size--xs: 0.8125rem; 546 --font-size--sm: 0.875rem; 547 --font-size--md: 1rem; 548 --font-size--lg: 1.125rem; 549 --font-size--xl: 1.25rem; 550 --font-size--2xl: 1.5rem; 551 --font-size--3xl: 2rem; 552 --font-size--4xl: 2.5rem; 553 --font-size--5xl: 3rem; 554 --font-size--6xl: 3.5rem; 555 556 /* Menu font sizes */ 557 --menu-font-sm--size: 0.875rem; 558 --menu-font-sm--line-height: calc(1.1 + 0.5 * min(16 / 14)); 559 --menu-font-md--size: 1rem; 560 --menu-font-md--line-height: calc(1.1 + 0.5 * min(16 / 16)); 561 --menu-font-xl--size: 1.25rem; 562 --menu-font-xl--line-height: calc(1.1 + 0.5 * min(16 / 20)); 563 --menu-font-2xl--size: 1.75rem; 564 --menu-font-2xl--line-height: calc(1.1 + 0.5 * min(16 / 28)); 565 566 /* Colors */ 567 --color-error: #8B0000; 568 --color-success: #006400; 569 --color-white: #FFFFFF; 570 --color-white-rgb: 255 255 255; 571 --color-instock: #3ED660; 572 --color-lowstock: #EE9441; 573 --color-outofstock: #C8C8C8; 574 575 /* Opacity */ 576 --opacity-5: 0.05; 577 --opacity-8: 0.08; 578 --opacity-10: 0.1; 579 --opacity-15: 0.15; 580 --opacity-20: 0.2;
581 --opacity-25: 0.25; 582 --opacity-30: 0.3; 583 --opacity-40: 0.4; 584 --opacity-50: 0.5; 585 --opacity-60: 0.6; 586 --opacity-70: 0.7; 587 --opacity-80: 0.8; 588 --opacity-85: 0.85; 589 --opacity-90: 0.9; 590 --opacity-subdued-text: 0.8; 591 --opacity-muted-text: 0.6; 592 593 --shadow-button: 0 2px 3px rgb(0 0 0 / 20%); 594 --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent); 595 596 /* Spacing */ 597 --margin-3xs: 0.125rem; 598 --margin-2xs: 0.3rem; 599 --margin-xs: 0.5rem; 600 --margin-sm: 0.7rem; 601 --margin-md: 0.8rem; 602 --margin-lg: 1rem; 603 --margin-xl: 1.25rem; 604 --margin-2xl: 1.5rem; 605 --margin-4xl: 2rem; 606 --margin-6xl: 5rem; 607 608 609 --padding-3xs: 0.125rem; 610 --padding-2xs: 0.25rem; 611 --padding-xs: 0.5rem; 612 --padding-sm: 0.7rem; 613 --padding-md: 0.8rem; 614 --padding-lg: 1rem; 615 --padding-xl: 1.25rem; 616 --padding-2xl: 1.5rem; 617 --padding-3xl: 1.75rem; 618 --padding-4xl: 2rem; 619 --padding-5xl: 3rem; 620 --padding-6xl: 4rem; 621 622 --gap-3xs: 0.125rem; 623 --gap-2xs: 0.3rem; 624 --gap-xs: 0.5rem; 625 --gap-sm: 0.7rem; 626 --gap-md: 0.9rem; 627 --gap-lg: 1rem; 628 --gap-xl: 1.25rem; 629 --gap-2xl: 2rem; 630 --gap-3xl: 3rem; 631 632 --spacing-scale-md: 0.7; 633 --spacing-scale-default: 1.0; 634 635 /* Checkout buttons gap */ 636 --checkout-button-gap: 10px; 637 638 /* Borders */ 639 --style-border-width: 1px; 640 --style-border-radius-xs: 0.2rem; 641 --style-border-radius-sm: 0.6rem; 642 --style-border-radius-md: 0.8rem; 643 --style-border-radius-50: 50%; 644 --style-border-radius-lg: 1rem; 645 --style-border-radius-pills: 40px; 646 --style-border-radius-inputs: 4px; 647 --style-border-radius-buttons-primary: 14px; 648 --style-border-radius-buttons-secondary: 14px; 649 --style-border-width-primary: 0px; 650 --style-border-width-secondary: 1px; 651 --style-border-width-inputs: 1px; 652 --style-border-radius-popover: 14px; 653 --style-border-popover: 1px solid #DFDFDF; 654 --style-border-drawer: 1px solid #DFDFDF; 655 --style-border-swatch-opacity: 10%; 656 --style-border-swatch-width: 1px; 657 --style-border-swatch-style: solid; 658 659 /* Animation */ 660 --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); 661 --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1); 662 --animation-speed-fast: 0.0625s; 663 --animation-speed: 0.125s; 664 --animation-speed-slow: 0.2s; 665 --animation-speed-medium: 0.15s; 666 --animation-easing: ease-in-out; 667 --drawer-animation-speed: 0.2s; 668 --animation-values: var(--animation-speed) var(--animation-easing); 669 --animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94); 670 --animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0); 671 --animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); 672 --animation-timing-default: cubic-bezier(0, 0, 0.2, 1); 673 --animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1); 674 --animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1); 675 /* Spring definitions suffixed with perceptual duration (d<ms>) and bounce (b<%>)*/ 676 --spring-d300-b0-easing: linear(0, 0.0033 0.81%, 0.027 2.42%, 0.0916 4.84%, 0.4745 15.32%, 0.6422 20.97%, 0.7175, 0.7789, 0.8283 30.64%, 0.876, 0.9111 38.71%, 0.941, 0.9611 48.39%, 0.9707, 0.978 54.84%, 0.9885 62.1%, 0.9949 70.97%, 0.9982 82.26%, 0.9997 100%); 677 --spring-d300-b0-duration: 0.4980s; 678 --spring-d280-b0-easing: linear(0, 0.0044, 0.0164 1.85%, 0.085 4.63%, 0.4571 14.81%, 0.575 18.52%, 0.6505, 0.7148 24.07%, 0.7849, 0.8393, 0.8809 35.18%, 0.9189, 0.9453 44.44%, 0.9662, 0.9793 55.55%, 0.9894 62.95%, 0.995 71.28%, 0.9982 82.39%, 0.9997 99.98%); 679 --spring-d280-b0-duration: 0.4648s; 680 --spring-d220-b0-easing: linear( 681 0, 682 0.0093 1.37%, 683 0.0696 4.12%, 684 0.4667 15.09%, 685 0.6322 20.58%, 686 0.6986 23.32%, 687 0.7793 27.44%, 688 0.8219 30.18%, 689 0.8721, 690 0.9089 38.42%, 691 0.9427, 692 0.9644, 693 0.978 54.88%, 694 0.9881 61.74%, 695 0.9944 69.97%, 696 0.998 80.95%, 697 0.9996 98.78% 698 ); 699 --spring-d220-b0-duration: 0.3818s; 700 --spring-d180-b0-easing: linear(0, 0.0234, 0.0805 4.48%, 0.4865 15.68%, 0.6211 20.16%, 0.7696 26.88%, 0.8064 29.12%, 0.8646, 0.9063, 0.9358, 0.9563 47.04%, 0.9757, 0.9867 60.48%, 0.9941 69.44%, 0.9979 80.64%, 0.9996 98.56%); 701 --spring-d180-b0-duration: 0.2988s; 702 703 /* View transitions */ 704 /* View transition old */ 705 --view-transition-old-main-content: var(--animation-speed) var(--animation-easing) both fadeOut; 706 707 /* View transition new */ 708 --view-transition-new-main-content: var(--animation-speed) var(--animation-easing) both fadeIn, var(--animation-speed) var(--animation-easing) both slideInTopViewTransition; 709 710 /* Focus */ 711 --focus-outline-width: 0.09375rem; 712 --focus-outline-offset: 0.2em; 713 714 /* Badges */ 715 --badge-rectangle-padding-block: 1px; 716 --badge-rectangle-padding-inline: 6px; 717 @media screen and (min-width: 750px) { 718 --badge-rectangle-padding-block: 4px; 719 --badge-rectangle-padding-inline: 10px; 720 } 721 722 /* Icons */ 723 --icon-size-2xs: 0.6rem; 724 --icon-size-xs: 0.85rem; 725 --icon-size-sm: 1.25rem; 726 --icon-size-md: 1.375rem; 727 --icon-size-lg: 1.5rem; 728 --icon-stroke-width: 1.5px; 729 730 /* Input */ 731 --input-padding-y: 0.8rem; 732 --input-padding-x: 0.8rem; 733 --input-padding: var(--input-padding-y) var(--input-padding-x); 734 --input-box-shadow-width: var(--style-border-width-inputs); 735 --input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border); 736 --input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border); 737 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 738 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5)); 739 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
740 --input-textarea-min-height: 55px; 741 742 /* Checkbox */ 743 --checkbox-size: 22px; 744 --checkbox-border-radius: 7px; 745 --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55)); 746 --checkbox-label-padding: 8px; 747 748 @media screen and (min-width: 750px) { 749 --checkbox-size: 16px; 750 --checkbox-border-radius: 5px; 751 --checkbox-label-padding: 6px; 752 } 753 754 /* Button size */ 755 --button-size-md: 36px; 756 --button-size: var(--minimum-touch-target); 757 --button-padding-inline: 24px; 758 --button-padding-block: 16px; 759 760 /* Button font-family */ 761 --button-font-family-primary: var(--font-body--family); 762 --button-font-family-secondary: var(--font-body--family); 763 764 /* Button text case */ 765 --button-text-case-primary: default; 766 --button-text-case-secondary: default; 767 768 /* Borders */ 769 --border-color: rgb(var(--color-border-rgb) / var(--opacity-50)); 770 --border-width-sm: 1px; 771 --border-radius-sm: 0.25rem; 772 773 /* Drawers */ 774 --drawer-header-desktop-top: 0rem; 775 --drawer-padding: calc(var(--padding-sm) + 7px); 776 --drawer-height: 100dvh; 777 --drawer-width: 95vw; 778 --drawer-max-width: 500px; 779 780 /* Variant Picker Swatches */ 781 --variant-picker-swatch-width-unitless: 34; 782 --variant-picker-swatch-height-unitless: 34; 783 --variant-picker-swatch-width: 34px; 784 --variant-picker-swatch-height: 34px; 785 --variant-picker-swatch-radius: 32px; 786 --variant-picker-border-width: 1px; 787 --variant-picker-border-style: solid; 788 --variant-picker-border-opacity: 10%; 789 790 /* Variant Picker Buttons */ 791 --variant-picker-button-radius: 14px; 792 --variant-picker-button-border-width: 1px; 793 --variant-option-label-color: var(--color, var(--color-foreground)); 794 795 /* Slideshow */ 796 --slideshow-controls-icon: 2rem; 797 --peek-next-slide-size: 3rem; 798 799 /* Utilities */ 800 --backdrop-opacity: 0.15; 801 --backdrop-color-rgb: var(--color-shadow-rgb); 802 --minimum-touch-target: 44px; 803 --disabled-opacity: 0.5; 804 --skeleton-opacity: 0.025; 805 806 /* Shapes */ 807 808 /* Buy buttons */ 809 --height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm)); 810 811 /* Card image width and height variables */ 812 --card-width-small: 10rem; 813 814 --height-small: 10rem; 815 816 @media screen and (min-width: 750px) { 817 --height-small: 17.5rem; 818 } 819 820 /* Modal */ 821 --modal-max-height: 65dvh; 822 --quick-add-modal-height: min(38.5rem, 96vh); 823 --quick-add-modal-width: min(54rem, 96vw); 824 --quick-add-modal-gallery-width: 24rem; 825 826 /* Card styles for search */ 827 --card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5)); 828 --card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30)); 829 --card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 830 831 /* Cart */ 832 --cart-primary-font-family: var(--font-body--family); 833 --cart-primary-font-style: var(--font-body--style); 834 --cart-primary-font-weight: var(--font-body--weight); 835 --cart-secondary-font-family: var(--font-subheading--family); 836 --cart-secondary-font-style: var(--font-subheading--style); 837 --cart-secondary-font-weight: var(--font-subheading--weight); 838 } 839 840 .custom-color-quick-add { 841 --quick-add-background: #ffffff; 842 --quick-add-foreground: #000000; 843 } 844</style> 845 846 847 848 849 850 851 <style data-shopify> 852 .color-custom-popover, 853 .color-custom-popover .text-block { 854 /* Background */ 855 --color-background: #ffffff; 856 --color-background-rgb: 255 255 255; 857 858 /* Opacity values adjusted for background brightness */ 859 860--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 8610.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 862 863 864 865 /* Foreground / text â explicit or smart-contrasted */ 866 --color: #000000; 867 --color-rgb: 0 0 0; 868 --color-foreground: #000000; 869 --color-foreground-rgb: 0 0 0; 870 --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text)); 871 --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text)); 872 --color-border: #DFDFDF; 873 --color-border-rgb: 223 223 223; 874 875 } 876 877 878 .color-custom-popover { 879 /* Form-related tokens stay on .color-custom only â .text-block is a prose 880 container (text/announcement/inline-text/blog-post-description/ 881 collection-link/price/sku) and never holds form inputs. */ 882 --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10)); 883 --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5)); 884 --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50)); 885 --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55)); 886 } 887 888 889 .color-custom-popover { 890 color: var(--color, var(--color-foreground)); 891 background-color: var(--color-background); 892 } 893 </style> 894 895 896 897 898 899 900 901 902 <style data-shopify> 903 .color-custom-drawer, 904 .color-custom-drawer .text-block {
905 /* Background */ 906 --color-background: #ffffff; 907 --color-background-rgb: 255 255 255; 908 909 /* Opacity values adjusted for background brightness */ 910 911--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 9120.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 913 914 915 916 /* Foreground / text â explicit or smart-contrasted */ 917 --color: #000000; 918 --color-rgb: 0 0 0; 919 --color-foreground: #000000; 920 --color-foreground-rgb: 0 0 0; 921 --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text)); 922 --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text)); 923 --color-border: #DFDFDF; 924 --color-border-rgb: 223 223 223; 925 926 } 927 928 929 .color-custom-drawer { 930 /* Form-related tokens stay on .color-custom only â .text-block is a prose 931 container (text/announcement/inline-text/blog-post-description/ 932 collection-link/price/sku) and never holds form inputs. */ 933 --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10)); 934 --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5)); 935 --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50)); 936 --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55)); 937 } 938 939 940 .color-custom-drawer { 941 color: var(--color, var(--color-foreground)); 942 background-color: var(--color-background); 943 } 944 </style> 945 946 947 948 949 950 951 952 953 <style data-shopify> 954 .color-custom-badge-sale, 955 .color-custom-badge-sale .text-block { 956 /* Background */ 957 --color-background: #ffffff; 958 --color-background-rgb: 255 255 255; 959 960 /* Opacity values adjusted for background brightness */ 961 962--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 9630.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 964 965 966 967 /* Foreground / text â explicit or smart-contrasted */ 968 --color: #000000; 969 --color-rgb: 0 0 0; 970 --color-foreground: #000000; 971 --color-foreground-rgb: 0 0 0; 972 --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text)); 973 --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text)); 974 --color-border: #000000; 975 --color-border-rgb: 0 0 0; 976 977 } 978 979 980 .color-custom-badge-sale { 981 /* Form-related tokens stay on .color-custom only â .text-block is a prose 982 container (text/announcement/inline-text/blog-post-description/ 983 collection-link/price/sku) and never holds form inputs. */ 984 --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10)); 985 --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5)); 986 --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50)); 987 --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55)); 988 } 989 990 991 .color-custom-badge-sale { 992 color: var(--color, var(--color-foreground)); 993 background-color: var(--color-background); 994 } 995 </style> 996 997 998 999 1000 1001 1002 1003 1004 <style data-shopify> 1005 .color-custom-badge-sold-out, 1006 .color-custom-badge-sold-out .text-block { 1007 /* Background */ 1008 --color-background: #eef1ea; 1009 --color-background-rgb: 238 241 234; 1010 1011 /* Opacity values adjusted for background brightness */ 1012 1013--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 10140.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 1015 1016 1017 1018 /* Foreground / text â explicit or smart-contrasted */ 1019 --color: #000000; 1020 --color-rgb: 0 0 0; 1021 --color-foreground: #000000; 1022 --color-foreground-rgb: 0 0 0; 1023 --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text)); 1024 --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text)); 1025 --color-border: #000000; 1026 --color-border-rgb: 0 0 0; 1027 1028 } 1029 1030 1031 .color-custom-badge-sold-out { 1032 /* Form-related tokens stay on .color-custom only â .text-block is a prose 1033 container (text/announcement/inline-text/blog-post-description/ 1034 collection-link/price/sku) and never holds form inputs. */ 1035 --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10)); 1036 --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5)); 1037 --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50)); 1038 --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55)); 1039 } 1040 1041 1042 .color-custom-badge-sold-out { 1043 color: var(--color, var(--color-foreground)); 1044 background-color: var(--color-background); 1045 } 1046 </style> 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065<style data-shopify> 1066 /* Palette colors */ 1067 :root { 1068 --color-background: #ffffff; 1069 --color-background-rgb: 255 255 255; 1070 --color-foreground: #000000; 1071 --color-foreground-rgb: 0 0 0; 1072 --color-border: #000000; 1073 --color-border-rgb: 0 0 0; 1074 --palette-lightest: #ffffff; 1075 --palette-lightest-rgb: 255 255 255; 1076 --palette-darkest: #000000; 1077 --palette-darkest-rgb: 0 0 0; 1078 1079--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 10800.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 1081 1082 1083 --color-primary-button-text: rgb(255 255 255 / 1.0); 1084 --color-primary-button-background: rgb(0 0 0 / 1.0); 1085 --color-primary-button-border: rgb(0 0 0 / 1.0); 1086 --color-primary-button-focus-outline: rgb(0 0 0); 1087 --color-primary-button-hover-text: rgb(255 255 255 / 1.0); 1088 --color-primary-button-hover-background: #262626;
1089 --color-primary-button-hover-border: #262626; 1090 1091 --color-secondary-button-text: rgb(0 0 0 / 1.0); 1092 --color-secondary-button-background: rgb(0 0 0 / 0.0); 1093 --color-secondary-button-border: rgb(0 0 0 / 1.0); 1094 --color-secondary-button-hover-text: rgb(0 0 0 / 1.0); 1095 --color-secondary-button-hover-background: rgba(0, 0, 0, 0.15); 1096 --color-secondary-button-hover-border: #262626; 1097 1098 --color-input-background: rgb(255 255 255 / 1.0); 1099 --color-input-text: rgb(51 51 51 / 1.0); 1100 --color-input-text-rgb: 51 51 51; 1101 --color-input-border: rgb(223 223 223 / 1.0); 1102 1103 --color-variant-background: rgb(255 255 255 / 1.0); 1104 --color-variant-border: rgb(223 223 223 / 1.0); 1105 --color-variant-text: rgb(0 0 0 / 1.0); 1106 --color-variant-text-rgb: 0 0 0; 1107 --color-variant-hover-background: #f2f2f2; 1108 --color-variant-hover-text: rgb(0 0 0 / 1.0); 1109 --color-variant-hover-border: #d2d2d2; 1110 1111 --color-selected-variant-background: rgb(0 0 0 / 1.0); 1112 --color-selected-variant-border: rgb(0 0 0 / 1.0); 1113 --color-selected-variant-text: rgb(255 255 255 / 1.0); 1114 --color-selected-variant-text-rgb: 255 255 255; 1115 --color-selected-variant-hover-background: #262626; 1116 --color-selected-variant-hover-text: rgb(255 255 255 / 1.0); 1117 --color-selected-variant-hover-border: #262626; 1118 1119 --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10)); 1120 --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15)); 1121 --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50)); 1122 --color-foreground-muted: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text)); 1123 --color-foreground-subdued: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text)); 1124 --color-drawer-shadow-rgb: ; 1125 --color-popover-shadow-rgb: 0 0 0; 1126 1127 /* Shadows */ 1128 1129 1130 --shadow-blur: 20px; 1131 --shadow-popover: 0px 4px 20px rgb(var(--color-popover-shadow-rgb) / var(--opacity-15)); 1132 1133 } 1134 1135 body { 1136 color: var(--color-foreground); 1137 background-color: var(--color-background); 1138 } 1139</style> 1140 1141 1142
1142<script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script>
1142<meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/110396735826/digital_wallets/dialog"> 1143<meta id="in-context-paypal-metadata" data-shop-id="110396735826" data-venmo-supported="false" data-environment="production" data-locale="en_US" data-paypal-v4="true" data-currency="SEK"> 1144<link rel="ucp" href="/.well-known/ucp" version="2026-08-25"><link rel="alternate" hreflang="x-default" href="https://mondido.com/"> 1145<link rel="alternate" hreflang="sv" href="https://mondido.com/"> 1146<link rel="alternate" hreflang="en" href="https://mondido.com/en">
1147<script async="async" src="/checkouts/internal/preloads.js?locale=en-SE"></script>
1147 1148<link rel="preconnect" href="https://shop.app" crossorigin="anonymous">
1149<script async="async" src="https://shop.app/checkouts/internal/preloads.js?locale=en-SE&shop_id=110396735826" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1149
1149
1150<script id="apple-pay-shop-capabilities" type="application/json">{"shopId":110396735826,"countryCode":"SE","currencyCode":"SEK","merchantCapabilities":["supports3DS"],"merchantId":"gid:\/\/shopify\/Shop\/110396735826","merchantName":"Mondido","requiredBillingContactFields":["postalAddress","email"],"requiredShippingContactFields":["postalAddress","email"],"shippingType":"shipping","supportedNetworks":["maestro"],"total":{"type":"pending","label":"Mondido","amount":"1.00"},"shopifyPaymentsEnabled":true,"supportsSubscriptions":false}</script>
vendor: 1 bytes, line 1150
1150
1151<script id="shopify-features" type="application/json">{"accessToken":"ca39b56d41163240076506facda7201a","betas":["rich-media-storefront-analytics"],"domain":"mondido.com","predictiveSearch":true,"shopId":110396735826,"locale":"en"}</script>
vendor: 1 bytes, line 1151
1151
1152<script>var Shopify = Shopify || {}; 1153Shopify.shop = "d0tkvs-qa.myshopify.com"; 1154Shopify.locale = "en"; 1155Shopify.currency = {"active":"SEK","rate":"1.0"}; 1156Shopify.country = "SE"; 1157Shopify.theme = {"name":"Horizon","id":206176223570,"schema_name":"Horizon","schema_version":"4.1.4","theme_store_id":2481,"role":"main"}; 1158Shopify.theme.handle = "null"; 1159Shopify.theme.style = {"id":null,"handle":null}; 1160Shopify.cdnHost = "mondido.com/cdn"; 1161Shopify.routes = Shopify.routes || {}; 1162Shopify.routes.root = "/en/"; 1163Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js"; 1164Shopify.SignInWithShop = Shopify.SignInWithShop || {}; 1165Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {}; 1166Shopify.SignInWithShop.User.recognized = false;</script>
vendor: 1 bytes, line 1166
1166
1167<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
vendor: 1 bytes, line 1167
1167
1168<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
vendor: 1 bytes, line 1168
1168
1169<script> 1170 window.ShopifyPay = window.ShopifyPay || {}; 1171 window.ShopifyPay.apiHost = "shop.app\/pay"; 1172 window.ShopifyPay.redirectState = null; 1173</script>
vendor: 1 bytes, line 1173
1173
1174<script> 1175 window.Shopify = window.Shopify || {}; 1176 window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {}; 1177 window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 }; 1178 window.Shopify.SignInWithShop.eligible = true; 1179</script>
vendor: 1 bytes, line 1179
1179
1180<script id="shop-js-analytics" type="application/json">{"pageType":"index"}</script>
vendor: 1 bytes, line 1180
1180
1181<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"></script>
vendor: 1 bytes, line 1181
1181
1182<script type="module"> 1183 await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"); 1184 1185 window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true}); 1186 1187</script>
vendor: 1 bytes, line 1187
1187
1188<script> 1189 window.Shopify = window.Shopify || {}; 1190 if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {}; 1191 window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.en.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.en.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.en.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.en.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.en.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.en.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.en.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.en.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.en.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.en.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.en.esm.js"],"listener":["modules/v2/loader.listener.en.esm.js"],"pay-button":["modules/v2/loader.pay-button.en.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.en.esm.js"],"shop-button":["modules/v2/loader.shop-button.en.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.en.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.en.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.en.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.en.esm.js"],"shop-login":["modules/v2/loader.shop-login.en.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.en.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.en.esm.js"]}; 1192</script>
vendor: 1 bytes, line 1192
1192
1193<script id="__st">var __st={"a":110396735826,"offset":7200,"reqid":"0b381547-bf61-4ca7-aec0-69114b2e61d0-1790863081","pageurl":"mondido.com\/en","u":"42902907d607","p":"home"};</script>
vendor: 1 bytes, line 1193
1193
1194<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
vendor: 1 bytes, line 1194
1194
1195<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protected by hCaptcha',privacyText:'Privacy',termsText:'Terms'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!0)}();</script>
vendor: 1 bytes, line 1195
1195
1196<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="//mondido.com/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1196
1196
1197<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "//mondido.com/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script>
1197<script crossorigin="anonymous" defer="defer" src="//mondido.com/cdn/shopifycloud/storefront/assets/shopify_pay/storefront-616277c7.js?v=20250812"></script>
vendor: 1 bytes, line 1197
1197
1198<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
vendor: 1 bytes, line 1198
1198
1199<script> 1200 window.Shopify = window.Shopify || {}; 1201 window.Shopify.MCP = window.Shopify.MCP || {}; 1202 window.Shopify.MCP.enabled = true; 1203 window.Shopify.MCP.shop = "d0tkvs-qa.myshopify.com"; 1204 window.Shopify.MCP.mcpEndpoint = "https:\/\/mondido.com\/api\/mcp"; 1205 window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n - What is your return policy?\n - What is your shipping policy?\n - What is your phone number?\n - What are your hours of operation?\"\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."}},"required":["query"]}}]; 1206</script>
vendor: 1 bytes, line 1206
1206
1207<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/mondido.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-c6b62ece.js","sha256-ke4DDuBjdvea3vxLWxHc9E9nq8zihuG4IfYEGbb77ys=");})(); 1208</script>
vendor: 1 bytes, line 1208
1208
1209<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="https://mondido.com/cdn/shopifycloud/portable-wallets/latest/portable-wallets.en.js",t.type="module",document.head.appendChild(t)}}; 1210</script>
vendor: 1 bytes, line 1210
1210
1211<script data-source-attribution="shopify.dynamic_checkout.buyer_consent"> 1212 function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent); 1213</script>
vendor: 1 bytes, line 1213
1213
1214<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}})); 1215</script>
vendor: 1 bytes, line 1215
1215
1216<script id='scb4127' type='text/javascript' async='' src='https://mondido.com/cdn/shopifycloud/privacy-banner/storefront-banner.js'></script>
1216<link id="shopify-accelerated-checkout-styles" rel="stylesheet" media="screen" href="https://mondido.com/cdn/shopifycloud/portable-wallets/latest/accelerated-checkout-backwards-compat.css" crossorigin="anonymous"> 1217<style id="shopify-accelerated-checkout-cart"> 1218 #shopify-buyer-consent { 1219 margin-top: 1em; 1220 display: inline-block; 1221 width: 100%; 1222} 1223 1224#shopify-buyer-consent.hidden { 1225 display: none; 1226} 1227 1228#shopify-subscription-policy-button { 1229 background: none; 1230 border: none; 1231 padding: 0; 1232 text-decoration: underline; 1233 font-size: inherit; 1234 cursor: pointer; 1235} 1236 1237#shopify-subscription-policy-button::before { 1238 box-shadow: none; 1239} 1240 1241 </style> 1242<link rel="compression-dictionary" href="//mondido.com/cdn/shop/t/1/compiled_assets/styles.css?v=111559472213182477911790164665" crossorigin="anonymous"> 1243<link rel="stylesheet" media="screen" href="//mondido.com/cdn/shop/t/1/compiled_assets/styles.css?v=111559472213182477911790164665&subset=AAAAAGAAAAAAAAAAAAYAAAAAAAAAAIDcAAEAAQQwChiEYAKAmA" crossorigin="anonymous">
1244<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
1244 1245 <link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
1246<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 110396735826,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "index"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
vendor: 1 bytes, line 1246
1246
1247<script> 1248 window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || []; 1249</script>
vendor: 1 bytes, line 1249
1249
1250<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}
1250).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 110396735826,storefrontBaseUrl: "https://mondido.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://mondido.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["4c64608a","16072cab","8450a54b","7ee89bf1"],webPixelsConfigList: [{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"Mondido","paymentSettings":{"currencyCode":"SEK"},"myshopifyDomain":"d0tkvs-qa.myshopify.com","countryCode":"SE","storefrontUrl":"https:\/\/mondido.com\/en"},"customer":null,"cart":null,"checkout":null,"productVariants":[],"products":[{"id":"
125011150167212370","handle":"test-checkout","isCollective":null,"title":null,"type":null,"untranslatedTitle":null,"url":null,"vendor":null,"remoteShopId":null,"variants":[{"id":"54742863479122","image":null,"price":null,"sku":null,"title":null,"untranslatedTitle":null}]}],"purchasingCompany":null},},"https://mondido.com/cdn","5982071ew7ea472e3p69b68784m2150dfea",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"false","themeId":"206176223570","themeStoreId":"2481","themePublished":"true","eventMetadataId":"c410ed44-9a3f-4485-bd92-51609f9cb953","pageType":"home","shopId":"110396735826","storefrontBaseUrl":"https:\/\/mondido.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"4c64608a\", \"16072cab\", \"8450a54b\", \"7ee89bf1\"]","isMerchantRequest":"false","hashVersion":"5982071ew7ea472e3p69b68784m2150dfea","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script>
1250<script> 1251 window.ShopifyAnalytics = window.ShopifyAnalytics || {}; 1252 window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {}; 1253 window.ShopifyAnalytics.meta.currency = 'SEK'; 1254 var meta = {"page":{"pageType":"home","requestId":"0b381547-bf61-4ca7-aec0-69114b2e61d0-1790863081"}}; 1255 for (var attr in meta) { 1256 window.ShopifyAnalytics.meta[attr] = meta[attr]; 1257 } 1258</script>
vendor: 1 bytes, line 1258
1258
1259<script class="analytics"> 1260 (function () { 1261 var customDocumentWrite = function(content) { 1262 var jquery = null; 1263 1264 if (window.jQuery) { 1265 jquery = window.jQuery; 1266 } else if (window.Checkout && window.Checkout.$) { 1267 jquery = window.Checkout.$; 1268 } 1269 1270 if (jquery) { 1271 jquery('body').append(content); 1272 } 1273 }; 1274 1275 var hasLoggedConversion = function(token) { 1276 if (token) { 1277 return document.cookie.indexOf('loggedConversion=' + token) !== -1; 1278 } 1279 return false; 1280 } 1281 1282 var setCookieIfConversion = function(token) { 1283 if (token) { 1284 var twoMonthsFromNow = new Date(Date.now()); 1285 twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2); 1286 1287 document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow; 1288 } 1289 } 1290 1291 var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || []; 1292 window.ShopifyAnalytics.lib.trekkie = window.trekkie; 1293 if (trekkie.integrations) { 1294 return; 1295 } 1296 trekkie.methods = [ 1297 'identify', 1298 'page', 1299 'ready', 1300 'track', 1301 'trackForm', 1302 'trackLink' 1303 ]; 1304 trekkie.factory = function(method) { 1305 return function() { 1306 var args = Array.prototype.slice.call(arguments); 1307 args.unshift(method); 1308 trekkie.push(args); 1309 if (method == 'track' || method == 'page') { 1310 var pageUrl; 1311 try { 1312 pageUrl = window.location.href; 1313 } catch (e) {} 1314 var pageReferrer; 1315 try { 1316 pageReferrer = document.referrer; 1317 } catch (e) {} 1318 try { 1319 if (window.__TREKKIE_SHIM_QUEUE == null) { 1320 window.__TREKKIE_SHIM_QUEUE = []; 1321 } 1322 window.__TREKKIE_SHIM_QUEUE.push({ 1323 from: 'trekkie-stub', 1324 method: method, 1325 args: args.slice(1), 1326 pageContext: { 1327 url: pageUrl, 1328 referrer: pageReferrer 1329 } 1330 }); 1331 } catch (e) { 1332 // no-op 1333 } 1334 } 1335 return trekkie; 1336 }; 1337 }; 1338 for (var i = 0; i < trekkie.methods.length; i++) { 1339 var key = trekkie.methods[i]; 1340 trekkie[key] = trekkie.factory(key); 1341 } 1342 trekkie.load = function(config) { 1343 trekkie.config = config || {}; 1344 trekkie.config.initialDocumentCookie = document.cookie; 1345 var first = document.getElementsByTagName('script')[0]; 1346var script = document.createElement('script'); 1347script.type = 'text/javascript'; 1348script.onerror = function(e) { 1349 var scriptFallback = document.createElement('script'); 1350 scriptFallback.type = 'text/javascript'; 1351 scriptFallback.onerror = function(error) { 1352 var Monorail = { 1353 produce: function produce(monorailDomain, schemaId, payload) { 1354 var currentMs = new Date().getTime(); 1355 var event = { 1356 schema_id: schemaId, 1357 payload: payload, 1358 metadata: { 1359 event_created_at_ms: currentMs, 1360 event_sent_at_ms: currentMs 1361 } 1362 }; 1363 return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event)); 1364 }, 1365 sendRequest: function sendRequest(endpointUrl, payload) { 1366 // Try the sendBeacon API 1367 if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) { 1368 var blobData = new window.Blob([payload], { 1369 type: 'text/plain' 1370 }); 1371 1372 if (window.navigator.sendBeacon(endpointUrl, blobData)) { 1373 return true; 1374 } // sendBeacon was not successful 1375 1376 } // XHR beacon 1377 1378 var xhr = new XMLHttpRequest(); 1379 1380 try { 1381 xhr.open('POST', endpointUrl); 1382 xhr.setRequestHeader('Content-Type', 'text/plain'); 1383 xhr.send(payload); 1384 } catch (e) { 1385 console.log(e); 1386 } 1387 1388 return false; 1389 }, 1390 isIos12: function isIos12() { 1391 return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1; 1392 } 1393 }; 1394 Monorail.produce('monorail-edge.shopifysvc.com', 1395 'trekkie_storefront_load_errors/1.1', 1396 {shop_id: 110396735826, 1397 theme_id: 206176223570, 1398 app_name: "storefront", 1399 context_url: window.location.href, 1400 source_url: "//mondido.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js"}); 1401 1402 }; 1403 scriptFallback.async = true; 1404 scriptFallback.src = '//mondido.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js'; 1405 first.parentNode.insertBefore(scriptFallback, first); 1406}; 1407script.async = true; 1408script.src = '//mondido.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js'; 1409first.parentNode.insertBefore(script, first); 1410 1411 }; 1412 trekkie.load( 1413 {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":110396735826,"isMerchantRequest":null,"themeId":206176223570,"themeCityHash":"10178656072687389511","contentLanguage":"en","currency":"SEK","eventMetadataId":"c410ed44-9a3f-4485-bd92-51609f9cb953"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b","7ee89bf1","4c64608a"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":false,"source":"trekkie-storefront-renderer","apiClientId":580111}} 1414 ); 1415 1416 var loaded = false;
1417 trekkie.ready(function() { 1418 if (loaded) return; 1419 loaded = true; 1420 1421 window.ShopifyAnalytics.lib = window.trekkie; 1422 1423 var originalDocumentWrite = document.write; 1424 document.write = customDocumentWrite; 1425 try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {}; 1426 document.write = originalDocumentWrite; 1427 1428 var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/) 1429 var token = match? match[1]: undefined; 1430 if (!hasLoggedConversion(token)) { 1431 setCookieIfConversion(token); 1432 1433 } 1434 }); 1435 1436 window.ShopifyAnalytics.lib.page(null,{"pageType":"home","requestId":"0b381547-bf61-4ca7-aec0-69114b2e61d0-1790863081","shopifyEmitted":true}); 1437 1438 var eventsListenerScript = document.createElement('script'); 1439 eventsListenerScript.async = true; 1440 eventsListenerScript.src = "//mondido.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js"; 1441 document.getElementsByTagName('head')[0].appendChild(eventsListenerScript); 1442})();</script>
vendor: 1 bytes, line 1442
1442
1443<script 1444 defer 1445 src="https://mondido.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.4.min.js" 1446 data-application="storefront-renderer" 1447 data-shop-id="110396735826" 1448 data-render-region="gcp-europe-west1" 1449 data-page-type="index" 1450 data-theme-instance-id="206176223570" 1451 data-theme-name="Horizon" 1452 data-theme-version="4.1.4" 1453 data-monorail-region="shop_domain" 1454 data-resource-timing-sampling-rate="10" 1455 data-shs="true" 1456 data-shs-beacon="true" 1457 data-shs-export-with-fetch="true" 1458 data-shs-logs-sample-rate="1" 1459 data-shs-beacon-endpoint="https://mondido.com/api/collect" 1460></script>
1460 1461<meta name="shopify-y" content="db85cfea-9c56-4cf5-a392-1081acec71bc" data-expiration="1822420681000"><meta name="shopify-s" content="1c7e3bf3-8fe4-450d-b176-f323f5b19870" data-expiration="1790864881000"><meta name="new-cookie-storage-activated" content="t"> 1462</head> 1463 1464 <body class="page-width-narrow card-hover-effect-none"> 1465 <a 1466 class="skip-to-content-link button-secondary" 1467 href="#MainContent" 1468> 1469 Skip to content 1470</a> 1471 1472 1473 1474 1475 1476 1477<theme-drawer id="chat-drawer"> 1478 <dialog 1479 ref="panel" 1480 class="theme-drawer__dialog chat-drawer" 1481 > 1482 <shopify-chat 1483 mode="standalone" 1484 mode-switch 1485 ></shopify-chat> 1486 </dialog> 1487</theme-drawer> 1488
1489<script type="module"> 1490 const chatDrawer = document.querySelector('#chat-drawer'); 1491 const shopifyChat = document.querySelector('shopify-chat'); 1492 1493 document.addEventListener('theme-drawer:open', (event) => { 1494 if (/** @type {Element} */ (event.target).id !== 'chat-drawer') return; 1495 shopifyChat?.setAttribute('mode', 'managed'); 1496 }); 1497 1498 document.addEventListener('theme-drawer:close', (event) => { 1499 if (/** @type {Element} */ (event.target).id !== 'chat-drawer') return; 1500 // If mode is still managed, this is a theme-initiated close (backdrop / 1501 // Escape) â close the chat so the FAB appears. If mode is already 1502 // standalone, the close was triggered by an undock (enter-standalone sets 1503 // mode before closing the drawer) â leave the chat open as a floating panel. 1504 if (shopifyChat?.getAttribute('mode') === 'managed') { 1505 shopifyChat?.removeAttribute('open'); 1506 } 1507 shopifyChat?.setAttribute('mode', 'standalone'); 1508 }); 1509 1510 document.addEventListener('shopify-chat:enter-managed', () => { 1511 // Captured at event-fire time â the dock-transition animation hint below 1512 // depends on state as it was when the event was dispatched. 1513 const isStandaloneAndOpen = shopifyChat?.hasAttribute('open') && shopifyChat?.getAttribute('mode') === 'standalone'; 1514 1515 // The activator-click path (FAB click on desktop with stored 1516 // preferredMode=managed) dispatches enter-managed *before* calling show(), 1517 // so the chat's `open` attribute at event time understates the imminent 1518 // outcome. Defer to a microtask: by then show() (if any) has run, and we 1519 // can distinguish the viewport-driven mobileâdesktop transition that left 1520 // a minimized FAB (chat stays closed â don't open an empty drawer) from 1521 // an activator click (chat just opened â open the drawer). 1522 queueMicrotask(() => { 1523 if (!shopifyChat?.hasAttribute('open') && !chatDrawer?.hasAttribute('open')) { 1524 return; 1525 } 1526 chatDrawer?.open?.(isStandaloneAndOpen ? { enter: 'inline-start' } : undefined); 1527 }); 1528 }); 1529 1530 document.addEventListener('shopify-chat:enter-standalone', () => { 1531 shopifyChat?.setAttribute('mode', 'standalone'); 1532 chatDrawer?.close?.(); 1533 }); 1534 1535 document.addEventListener('shopify-chat:close', () => { 1536 if (shopifyChat?.getAttribute('mode') === 'managed') { 1537 chatDrawer?.close?.(); 1538 } 1539 }); 1540 1541 document.addEventListener('megaMenu:hover', () => { 1542 if (shopifyChat?.hasAttribute('open') && shopifyChat?.getAttribute('mode') === 'standalone') { 1543 shopifyChat?.removeAttribute('open'); 1544 } 1545 }); 1546 1547 // After the chat upgrades it self-restores its preferred mode from 1548 // sessionStorage. Reconcile any mismatch with the theme-drawer's state 1549 // â the drawer is the source of truth for which mode the chat should 1550 // be in (open â managed, closed â standalone). 1551 customElements.whenDefined('shopify-chat').then(() => { 1552 const mode = chatDrawer?.hasAttribute('open') ? 'managed' : 'standalone'; 1553 if (shopifyChat?.getAttribute('mode') !== mode) { 1554 // When switching managed â standalone (e.g. narrow viewport skipped 1555 // drawer restore), also close the chat so it renders as the FAB 1556 // rather than an open standalone panel. 1557 if (mode === 'standalone' && shopifyChat?.hasAttribute('open')) { 1558 shopifyChat?.removeAttribute('open'); 1559 } 1560 shopifyChat?.setAttribute('mode', mode); 1561 } 1562 }); 1563</script>
1563 1564 1565 1566 1567 1568 <div class="page-wrapper"> 1569 <div id="header-group"> 1570 <!-- BEGIN sections: header-group --> 1571<div id="shopify-section-sections--31746160001362__header_announcements_9jGBFp" class="shopify-section shopify-section-group-header-group"> 1572 1573 1574 1575 1576 1577 1578 1579 1580 <style data-shopify> 1581 .color-custom-sections--31746160001362__header_announcements_9jGBFp, 1582 .color-custom-sections--31746160001362__header_announcements_9jGBFp .text-block { 1583 /* Background */ 1584 --color-background: #ffece1; 1585 --color-background-rgb: 255 236 225; 1586 1587 /* Opacity values adjusted for background brightness */ 1588 1589--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 15900.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 1591 1592 1593 1594 /* Foreground / text â explicit or smart-contrasted */ 1595 --color: #000000; 1596 --color-rgb: 0 0 0; 1597 --color-foreground: #000000; 1598 --color-foreground-rgb: 0 0 0; 1599 --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text)); 1600 --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text)); 1601 --color-border: var(--palette-darkest); 1602 --color-border-rgb: var(--palette-darkest-rgb); 1603 1604 } 1605 1606 1607 .color-custom-sections--31746160001362__header_announcements_9jGBFp { 1608 /* Form-related tokens stay on .color-custom only â .text-block is a prose 1609 container (text/announcement/inline-text/blog-post-description/ 1610 collection-link/price/sku) and never holds form inputs. */ 1611 --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10)); 1612 --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5)); 1613 --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50)); 1614 --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55)); 1615 } 1616 1617 1618 .color-custom-sections--31746160001362__header_announcements_9jGBFp { 1619 color: var(--color, var(--color-foreground)); 1620 background-color: var(--color-background); 1621 } 1622 </style> 1623 1624 1625 1626<div class="section-background color-custom-sections--31746160001362__header_announcements_9jGBFp"></div> 1627<aside 1628 class="announcement-bar spacing-style section section--page-width color-custom-sections--31746160001362__header_announcements_9jGBFp" 1629 style="--padding-block-start: 15px; --padding-block-end:15px; --padding-inline-start:0px; --padding-inline-end:0px; 1630; --border-bottom-width: 1px; --color-border: #16181c;" 1631> 1632 1633 1634 <announcement-bar-component 1635 class="announcement-bar__slider" 1636 1637 > 1638 1639 1640 <div class="announcement-bar__slides"> 1641 1642 1643 1644 1645<slideshow-slide 1646 ref="slides[]" 1647 class=" 1648 announcement-bar__slide 1649 text-block 1650 text-block--AQlFtL0V2OVJYWkEwY__announcement_BxgCk9 1651 text-block--align-center 1652 text-block--full-width 1653 custom-typography 1654 custom-font-size 1655 1656 " 1657 style=" 1658 1659--font-size: 0.75rem; --font-weight: var(--font-body--weight);--font-family: var(--font-body--family); --text-transform: none; --text-wrap: pretty; --line-height: var(--line-height--body-); --letter-spacing: var(--letter-spacing--body-normal); 1660 1661 --width: 100%; 1662 --text-align: center; 1663 --line-height: 1; 1664 " 1665 1666 aria-hidden="false" 1667 > 1668 <p class="announcement-bar__text"> 1669 Creating the best payment experience 1670 </p> 1671 1672 1673 </slideshow-slide> 1674 1675 </div> 1676 </announcement-bar-component> 1677</aside> 1678 1679 1680 1681 1682</div><header id="shopify-section-sections--31746160001362__header_section" class="shopify-section shopify-section-group-header-group header-section"> 1683 1684 1685 1686 1687
1688<script type="application/ld+json"> 1689 { 1690 "@context": "http://schema.org", 1691 "@type": "Organization", 1692 "name": "Mondido", 1693 1694 "logo": "https:\/\/mondido.com\/cdn\/shop\/files\/mondido_transparent.png?v=1787910584\u0026width=500", 1695 1696 "url": "https:\/\/mondido.com" 1697 } 1698</script>
1698 1699 1700<header-component 1701 id="header-component" 1702 class="header" 1703 data-theme-color="rgb(26 26 26)" 1704 data-bubble-style="default" 1705 1706 1707 sticky="always" 1708 1709 data-skip-node-update 1710 data-scroll-direction="none" 1711 1712 1713 data-transparent-background="bottom" 1714 1715 style=" 1716 --color-background-top-row: rgba(26 26 26 / 1.0); 1717 --color-background-bottom-row: rgba(255 255 255 / 1.0); 1718 1719 1720 --cart-bubble-background: var(--palette-lightest); 1721 --cart-bubble-text: #1a1a1a; 1722 1723 1724 " 1725> 1726 <div class="header__underlay header__underlay-closed"></div> 1727 <div 1728 class="header__underlay header__underlay-open" 1729 ></div><h1 class="visually-hidden">Mondido</h1> 1730 1731 1732 1733 1734 1735 1736 <div 1737 class="header__row header__row--top color-#1a1a1a section section--full-width-margin section--page-width color-custom-top-sections--31746160001362__header_section" 1738 ref="headerRowTop"style="--border-bottom-width: 0px; --border-bottom-width-mobile: 0px; --border-bottom-color-mobile: var(--color-border);"> 1739 <div class="header__columns spacing-style"> 1740 <style data-shopify> 1741 .color-custom-top-sections--31746160001362__header_section, 1742 .color-custom-top-sections--31746160001362__header_section .text-block { 1743 /* Background */ 1744 --color-background: #1a1a1a; 1745 --color-background-rgb: 26 26 26; 1746 1747 /* Opacity values adjusted for background brightness */ 1748 1749--opacity-5-15: 0.15; --opacity-10-25: 0.25; --opacity-35-55: 0.55; --opacity-40-60: 17500.6; --opacity-30-60: 0.6; --opacity-60: 0.6; 1751 1752 1753 1754 /* Foreground / text â explicit or smart-contrasted */ 1755 --color: var(--palette-lightest); 1756 --color-rgb: var(--palette-lightest-rgb); 1757 --color-foreground: var(--palette-lightest); 1758 --color-foreground-rgb: var(--palette-lightest-rgb); 1759 --color-foreground-muted: rgb(var(--palette-lightest-rgb) / var(--opacity-muted-text)); 1760 --color-foreground-subdued: rgb(var(--palette-lightest-rgb) / var(--opacity-subdued-text)); 1761 --color-border: var(--palette-lightest); 1762 --color-border-rgb: var(--palette-lightest-rgb); 1763 1764 } 1765 1766 1767 .color-custom-top-sections--31746160001362__header_section { 1768 /* Form-related tokens stay on .color-custom only â .text-block is a prose 1769 container (text/announcement/inline-text/blog-post-description/ 1770 collection-link/price/sku) and never holds form inputs. */ 1771 --input-disabled-background-color: rgb(var(--palette-lightest-rgb) / var(--opacity-10)); 1772 --input-disabled-border-color: rgb(var(--palette-lightest-rgb) / var(--opacity-5)); 1773 --input-disabled-text-color: rgb(var(--palette-lightest-rgb) / var(--opacity-50)); 1774 --checkbox-border: 1px solid rgb(var(--palette-lightest-rgb) / var(--opacity-35-55)); 1775 } 1776 1777 1778 .color-custom-top-sections--31746160001362__header_section { 1779 color: var(--color, var(--color-foreground)); 1780 background-color: var(--color-background); 1781 } 1782 </style> 1783 1784 1785 1786 1787<div 1788 class="header__column header__column--left" 1789 data-testid="header-top-left" 1790 > 1791 1792 1793 1794 1795 1796 1797 1798 <div 1799 class="header__drawer" 1800 ref="headerDrawerContainer" 1801 data-hydration-key="header-drawer-mobile" 1802 1803 > 1804 1805 1806 1807 1808 1809 1810 1811 1812 <style data-shopify> 1813 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu-1, 1814 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu-1 .text-block { 1815 /* Background */ 1816 --color-background: #ffffff; 1817 --color-background-rgb: 255 255 255; 1818 1819 /* Opacity values adjusted for background brightness */ 1820 1821--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 18220.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 1823 1824 1825 1826 /* Foreground / text â explicit or smart-contrasted */ 1827 --color: #000000; 1828 --color-rgb: 0 0 0; 1829 --color-foreground: #000000; 1830 --color-foreground-rgb: 0 0 0; 1831 --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text)); 1832 --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text)); 1833 --color-border: var(--palette-darkest); 1834 --color-border-rgb: var(--palette-darkest-rgb); 1835 1836 } 1837 1838 1839 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu-1 { 1840 /* Form-related tokens stay on .color-custom only â .text-block is a prose 1841 container (text/announcement/inline-text/blog-post-description/ 1842 collection-link/price/sku) and never holds form inputs. */ 1843 --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10)); 1844 --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5)); 1845 --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50)); 1846 --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55)); 1847 } 1848 1849 1850 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu-1 { 1851 color: var(--color, var(--color-foreground)); 1852 background-color: var(--color-background); 1853 } 1854 </style> 1855 1856 1857
1858<script 1859 src="//mondido.com/cdn/shop/t/1/assets/header-drawer.js?v=121243031541024704371787819631" 1860 type="module" 1861 fetchpriority="low" 1862></script>
1862 1863 1864<header-drawer 1865 class="header-drawer " 1866 style="--menu-image-border-radius: 0px; --resource-card-corner-radius: 0px;" 1867> 1868 <details 1869 id="Details-menu-drawer-container" 1870 data-skip-node-update="true" 1871 class="menu-drawer-container" 1872 ref="details" 1873 scroll-lock 1874 > 1875 <summary 1876 class="header__icon header__icon--menu header__icon--summary" 1877 aria-label="Menu" 1878 on:click="/toggle" 1879 > 1880 <span class="svg-wrapper header-drawer-icon header-drawer-icon--open"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1881 <path d="M1 3.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/> 1882 <path d="M1 10.5H13" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round"/> 1883</svg> 1884</span> 1885 <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1886 <path d="M3.75 3.75L10.25 10.25M10.25 3.75L3.75 10.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 1887</svg> 1888</span> 1889 </summary> 1890 <div 1891 ref="menuDrawer" 1892 class=" 1893 menu-drawer 1894 1895 color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu-1 1896 1897 " 1898 > 1899 <button 1900 class="button close-button menu-drawer__close-button focus-inset" 1901 type="button" 1902 aria-label="Close" 1903 on:click="/close" 1904 > 1905 <span class="svg-wrapper header-drawer-icon header-drawer-icon--close"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1906 <path d="M3.75 3.75L10.25 10.25M10.25 3.75L3.75 10.25" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 1907</svg> 1908</span> 1909 </button> 1910 <nav 1911 class="menu-drawer__navigation" 1912 style="--menu-top-level-font-family: var(--font-body--family); 1913--menu-top-level-font-size-desktop: 0.875rem; --menu-top-level-font-style: var(--font-body--style); --menu-top-level-font-weight: var(--font-body--weight); --menu-top-level-font-case:none; 1914 1915 --menu-top-level-font-size: var(--menu-font-2xl--size); --menu-top-level-font-line-height: 1916 var(--menu-font-2xl--line-height); 1917 1918--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb); 1919 1920--menu-parent-font-family: var(--font-body--family); --menu-parent-font-style: 1921var(--font-body--style); --menu-parent-font-weight: var(--font-body--weight); --menu-parent-font-case: 1922none; 1923 1924 --menu-parent-font-size: var(--menu-font-sm--size); --menu-parent-font-line-height: 1925 var(--menu-font-sm--line-height); --menu-parent-font-color: var(--color-foreground-subdued); 1926 --menu-parent-active-font-color: var(--color-foreground); 1927 1928--menu-child-font-family: var(--font-body--family); --menu-child-font-style:var(--font-body--style); --menu-child-font-weight: var(--font-body--weight); --menu-child-font-case: 1929none; 1930 1931 --menu-child-font-size: var(--menu-font-md--size); --menu-child-font-line-height: var(--menu-font-md--line-height); 1932 --menu-child-font-color: var(--color-foreground); --menu-child-active-font-color: var(--color-foreground-subdued); 1933 1934 1935 " 1936 aria-label="Primary" 1937 > 1938 <ul 1939 class="menu-drawer__menu has-submenu" 1940 role="list" 1941 > 1942 1943 1944 1945 <li 1946 style="--menu-drawer-animation-index: 1;" 1947 class="menu-drawer__list-item--flat" 1948 > 1949 1950<a 1951 id="HeaderDrawer-payment-methods" 1952 href="/en/pages/products" 1953 class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element" 1954 1955 > 1956 <span class="menu-drawer__menu-item-text wrap-text">Payment methods</span> 1957 </a> 1958 1959 </li> 1960 <li 1961 style="--menu-drawer-animation-index: 2;" 1962 class="menu-drawer__list-item--flat" 1963 > 1964 1965<a 1966 id="HeaderDrawer-price-calculator" 1967 href="/en/pages/kalkylator" 1968 class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element" 1969 1970 >
1971 <span class="menu-drawer__menu-item-text wrap-text">Price calculator</span> 1972 </a> 1973 1974 </li> 1975 <li 1976 style="--menu-drawer-animation-index: 3;" 1977 class="menu-drawer__list-item--flat" 1978 > 1979 1980<a 1981 id="HeaderDrawer-shopify" 1982 href="/en/pages/shopify" 1983 class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element" 1984 1985 > 1986 <span class="menu-drawer__menu-item-text wrap-text">Shopify</span> 1987 </a> 1988 1989 </li> 1990 <li 1991 style="--menu-drawer-animation-index: 4;" 1992 class="menu-drawer__list-item--flat" 1993 > 1994 1995<a 1996 id="HeaderDrawer-about-us" 1997 href="/en/pages/about-us" 1998 class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element" 1999 2000 > 2001 <span class="menu-drawer__menu-item-text wrap-text">About us</span> 2002 </a> 2003 2004 <ul 2005 class="menu-drawer__menu menu-drawer__menu--childlist" 2006 role="list" 2007 tabindex="-1" 2008 ><li 2009 class="menu-drawer__list-item" 2010 style="--menu-drawer-animation-index: 4;" 2011 > 2012 <a 2013 href="/en/pages/about-us" 2014 class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element" 2015 2016 > 2017 2018 <span class="menu-drawer__menu-item-text wrap-text">About us</span> 2019 </a> 2020 </li><li 2021 class="menu-drawer__list-item" 2022 style="--menu-drawer-animation-index: 4;" 2023 > 2024 <a 2025 href="/en/pages/blog" 2026 class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element" 2027 2028 > 2029 2030 <span class="menu-drawer__menu-item-text wrap-text">Blog</span> 2031 </a> 2032 </li><li 2033 class="menu-drawer__list-item" 2034 style="--menu-drawer-animation-index: 4;" 2035 > 2036 <a 2037 href="/en/pages/newsroom" 2038 class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element" 2039 2040 > 2041 2042 <span class="menu-drawer__menu-item-text wrap-text">Newsroom</span> 2043 </a> 2044 </li><li 2045 class="menu-drawer__list-item" 2046 style="--menu-drawer-animation-index: 4;" 2047 > 2048 <a 2049 href="https://doc.mondido.com/" 2050 class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element" 2051 2052 > 2053 2054 <span class="menu-drawer__menu-item-text wrap-text">API documentation</span> 2055 </a> 2056 </li><li 2057 class="menu-drawer__list-item" 2058 style="--menu-drawer-animation-index: 4;" 2059 > 2060 <a 2061 href="https://mondido.statuspage.io/" 2062 class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element" 2063 2064 > 2065
2066 <span class="menu-drawer__menu-item-text wrap-text">System status</span> 2067 </a> 2068 </li><li 2069 class="menu-drawer__list-item" 2070 style="--menu-drawer-animation-index: 4;" 2071 > 2072 <a 2073 href="/en/pages/guide" 2074 class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element" 2075 2076 > 2077 2078 <span class="menu-drawer__menu-item-text wrap-text">Guide</span> 2079 </a> 2080 </li><li 2081 class="menu-drawer__list-item" 2082 style="--menu-drawer-animation-index: 4;" 2083 > 2084 <a 2085 href="/en/pages/prislista" 2086 class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element" 2087 2088 > 2089 2090 <span class="menu-drawer__menu-item-text wrap-text">Price list</span> 2091 </a> 2092 </li></ul> 2093 2094 </li> 2095 <li 2096 style="--menu-drawer-animation-index: 5;" 2097 class="menu-drawer__list-item--flat" 2098 > 2099 2100<a 2101 id="HeaderDrawer-demo-checkout" 2102 href="/en/pages/test-checkout" 2103 class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element" 2104 2105 > 2106 <span class="menu-drawer__menu-item-text wrap-text">Demo checkout</span> 2107 </a> 2108 2109 </li> 2110 <li 2111 style="--menu-drawer-animation-index: 6;" 2112 class="menu-drawer__list-item--flat" 2113 > 2114 2115<a 2116 id="HeaderDrawer-sign-in" 2117 href="https://admin.mondido.com/" 2118 class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element" 2119 2120 > 2121 <span class="menu-drawer__menu-item-text wrap-text">Sign in</span> 2122 </a> 2123 2124 </li> 2125 </ul> 2126 </nav> 2127 <div 2128 class="menu-drawer__utility-links menu-drawer__animated-element" 2129 style="--menu-drawer-animation-index: 6;" 2130 > 2131 2132 2133 2134 2135 <div class="menu-drawer__localization color-custom-popover"> 2136 2137<localization-form-component 2138 ref="localizationForm" 2139 data-label-results-count="[count] results" 2140 data-show-filter="false" 2141 style="--menu-localization-font: var(--font-heading--family); --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));" 2142> 2143 2144<form method="post" action="/en/localization" id="LocalizationForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data" ref="form" aria-label="Region and language"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="â" /><input type="hidden" name="_method" value="put" /> 2145 2146 2147 <div class="language-selector language-selector--collapse-space h5"> 2148 <h2 2149 class="visually-hidden" 2150 id="drawer-LanguageLabel" 2151 > 2152 Language 2153 </h2> 2154 2155 <select 2156 id="drawerSelect" 2157 class="localization-form__select" 2158 name="language_code" 2159 aria-label="Language" 2160 ref="languageInput" 2161 on:change="/changeLanguage" 2162 ><option 2163 value="sv" 2164 lang="sv" 2165 2166 > 2167 Svenska 2168 </option><option 2169 value="en" 2170 lang="en" 2171 2172 selected 2173 2174 > 2175 English 2176 </option></select>
2177 <span class="svg-wrapper icon-caret"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 2178 <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2179</svg> 2180</span> 2181 </div> 2182 2183</form></localization-form-component> 2184 2185 2186 2187 </div> 2188 2189</div> 2190 2191 2192 </div> 2193 <div 2194 class="menu-drawer__backdrop" 2195 on:click="header-drawer/close" 2196 ></div> 2197 </details> 2198</header-drawer> 2199 2200 2201 2202 </div> 2203 2204 2205 2206<style data-shopify> 2207 .header__underlay { 2208 --color-submenu: rgb(255 255 255); 2209 } 2210</style> 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 <style data-shopify> 2236 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu, 2237 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu .text-block { 2238 /* Background */ 2239 --color-background: #ffffff; 2240 --color-background-rgb: 255 255 255; 2241 2242 /* Opacity values adjusted for background brightness */ 2243 2244--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60: 22450.4; --opacity-30-60: 0.3; --opacity-60: 0.6; 2246 2247 2248 2249 /* Foreground / text â explicit or smart-contrasted */ 2250 --color: #000000; 2251 --color-rgb: 0 0 0; 2252 --color-foreground: #000000; 2253 --color-foreground-rgb: 0 0 0; 2254 --color-foreground-muted: rgb(0 0 0 / var(--opacity-muted-text)); 2255 --color-foreground-subdued: rgb(0 0 0 / var(--opacity-subdued-text)); 2256 --color-border: var(--palette-darkest); 2257 --color-border-rgb: var(--palette-darkest-rgb); 2258 2259 } 2260 2261 2262 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu { 2263 /* Form-related tokens stay on .color-custom only â .text-block is a prose 2264 container (text/announcement/inline-text/blog-post-description/ 2265 collection-link/price/sku) and never holds form inputs. */ 2266 --input-disabled-background-color: rgb(0 0 0 / var(--opacity-10)); 2267 --input-disabled-border-color: rgb(0 0 0 / var(--opacity-5)); 2268 --input-disabled-text-color: rgb(0 0 0 / var(--opacity-50)); 2269 --checkbox-border: 1px solid rgb(0 0 0 / var(--opacity-35-55)); 2270 } 2271 2272 2273 .color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu { 2274 color: var(--color, var(--color-foreground)); 2275 background-color: var(--color-background); 2276 } 2277 </style> 2278 2279 2280 2281 2282 2283 <header-menu 2284 ref="headerMenu" 2285 class="header-menu" 2286 2287 data-hydration-key="header-menu" 2288 > 2289 <div class="header-menu__inner"> 2290 <nav 2291 class="menu-list" 2292 aria-label="Primary" 2293 style="--menu-top-level-font-family: var(--font-body--family); 2294--menu-top-level-font-size-desktop: 0.875rem; --menu-top-level-font-style: var(--font-body--style); --menu-top-level-font-weight: var(--font-body--weight); --menu-top-level-font-case:none; 2295 2296 --menu-top-level-font-size: var(--menu-font-sm--size); --menu-top-level-font-line-height: 2297 var(--menu-font-sm--line-height); 2298 2299--menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb); 2300" 2301 > 2302 2303 <overflow-list 2304 2305 ref="overflowMenu" 2306 2307 2308 class="overflow-menu color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu" 2309 2310 2311 minimum-items="2" 2312 2313 2314 data-testid="header-menu-overflow-list" 2315 2316 2317 data-skip-node-update 2318 2319> 2320 <template shadowrootmode="open"> 2321 <link href="//mondido.com/cdn/shop/t/1/assets/overflow-list.css?v=16727044177065489451787819631" rel="stylesheet" type="text/css" media="all" /> 2322 2323 <ul part="list"> 2324 <slot></slot> 2325 <slot 2326 name="more" 2327 part="more" 2328 hidden 2329 2330 > 2331 <li 2332 part="more" 2333 > 2334 <button 2335 class="button" 2336 type="button" 2337 tabindex="0" 2338 2339 > 2340 More 2341 </button> 2342 </li> 2343 </slot> 2344 <li 2345 part="placeholder" 2346 hidden 2347 ></li> 2348 </ul> 2349 2350 <div part="overflow"> 2351 <ul part="overflow-list"> 2352 <slot name="overflow"></slot> 2353 </ul> 2354 </div> 2355 </template> 2356 2357 2358 2359 <li 2360 class="menu-list__list-item" 2361 on:blur="/deactivate"
2362 on:pointerenter="/activate" 2363 on:pointerleave="/deactivate" 2364 ><a 2365 href="/en/pages/products" 2366 data-skip-node-update="true" 2367 class="menu-list__link" 2368 2369 ref="menuitem" 2370 > 2371 <span class="menu-list__link-title">Payment methods</span> 2372 </a></li> 2373 2374 <li 2375 class="menu-list__list-item" 2376 on:blur="/deactivate" 2377 on:pointerenter="/activate" 2378 on:pointerleave="/deactivate" 2379 ><a 2380 href="/en/pages/kalkylator" 2381 data-skip-node-update="true" 2382 class="menu-list__link" 2383 2384 ref="menuitem" 2385 > 2386 <span class="menu-list__link-title">Price calculator</span> 2387 </a></li> 2388 2389 <li 2390 class="menu-list__list-item" 2391 on:blur="/deactivate" 2392 on:pointerenter="/activate" 2393 on:pointerleave="/deactivate" 2394 ><a 2395 href="/en/pages/shopify" 2396 data-skip-node-update="true" 2397 class="menu-list__link" 2398 2399 ref="menuitem" 2400 > 2401 <span class="menu-list__link-title">Shopify</span> 2402 </a></li> 2403 2404 <li 2405 class="menu-list__list-item" 2406 on:blur="/deactivate" 2407 on:pointerenter="/activate" 2408 on:pointerleave="/deactivate" 2409 ><span class="menu-list__trigger"><a 2410 href="/en/pages/about-us" 2411 data-skip-node-update="true" 2412 class="menu-list__link" 2413 2414 ref="menuitem" 2415 > 2416 <span class="menu-list__link-title">About us</span> 2417 </a><button 2418 type="button" 2419 class="menu-list__disclosure button-unstyled" 2420 aria-controls="submenu-4" 2421 aria-expanded="false" 2422 ref="disclosure[]" 2423 on:click="/toggle" 2424 > 2425 <span class="visually-hidden">Show About us submenu</span> 2426 <svg 2427 class="menu-list__disclosure-icon" 2428 aria-hidden="true" 2429 focusable="false"
2430 viewBox="0 0 10 6" 2431 > 2432 2433 2434<path 2435 fill-rule="evenodd" 2436 clip-rule="evenodd" 2437 d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" 2438 fill="currentColor" 2439 ></path></svg> 2440 </button> 2441 </span><div class="menu-list__submenu color-custom-AZ1dmUHNDQTFkd1ZHS__header-menu" ref="submenu[]" inert> 2442 <div 2443 id="submenu-4" 2444 class="menu-list__submenu-inner" 2445 style="--menu-parent-font-family: var(--font-body--family); --menu-parent-font-style: 2446var(--font-body--style); --menu-parent-font-weight: var(--font-body--weight); --menu-parent-font-case: 2447none; 2448 2449 --menu-parent-font-size: var(--menu-font-sm--size); --menu-parent-font-line-height: 2450 var(--menu-font-sm--line-height); --menu-parent-font-color: var(--color-foreground-subdued); 2451 --menu-parent-active-font-color: var(--color-foreground); 2452 2453--menu-child-font-family: var(--font-body--family); --menu-child-font-style:var(--font-body--style); --menu-child-font-weight: var(--font-body--weight); --menu-child-font-case: 2454none; 2455 2456 --menu-child-font-size: var(--menu-font-md--size); --menu-child-font-line-height: var(--menu-font-md--line-height); 2457 --menu-child-font-color: var(--color-foreground); --menu-child-active-font-color: var(--color-foreground-subdued); 2458 2459" 2460 > 2461 2462 <div class="mega-menu section section--full-width-margin section--page-width"> 2463 <div 2464 class="mega-menu__grid" 2465 data-menu-grid-id="MegaMenuList-4" 2466 > 2467 2468<ul 2469 data-menu-list-id="MegaMenuList-4" 2470 class="mega-menu__list list-unstyled" 2471 style="--menu-image-border-radius: 0px;" 2472> 2473 2474 <li class="mega-menu__column mega-menu__column--span-1"> 2475 <div> 2476 <a 2477 href="/en/pages/about-us" 2478 class="mega-menu__link " 2479 > 2480 2481 <span class="wrap-text">About us</span> 2482 </a> 2483 2484 </div> 2485 2486 2487 2488 2489 <div> 2490 <a 2491 href="/en/pages/blog" 2492 class="mega-menu__link " 2493 > 2494 2495 <span class="wrap-text">Blog</span> 2496 </a> 2497 2498 </div> 2499 2500 2501 2502 2503 <div> 2504 <a 2505 href="/en/pages/newsroom" 2506 class="mega-menu__link " 2507 > 2508 2509 <span class="wrap-text">Newsroom</span> 2510 </a> 2511 2512 </div> 2513 2514 2515 2516 2517 <div> 2518 <a 2519 href="https://doc.mondido.com/" 2520 class="mega-menu__link " 2521 > 2522 2523 <span class="wrap-text">API documentation</span> 2524 </a> 2525 2526 </div> 2527 2528 2529 2530 2531 <div> 2532 <a 2533 href="https://mondido.statuspage.io/" 2534 class="mega-menu__link " 2535 > 2536 2537 <span class="wrap-text">System status</span> 2538 </a> 2539 2540 </div> 2541 2542 2543 2544 2545 <div> 2546 <a 2547 href="/en/pages/guide" 2548 class="mega-menu__link " 2549 > 2550 2551 <span class="wrap-text">Guide</span> 2552 </a> 2553 2554 </div> 2555 2556 2557 2558 2559 <div> 2560 <a 2561 href="/en/pages/prislista" 2562 class="mega-menu__link " 2563 > 2564 2565 <span class="wrap-text">Price list</span> 2566 </a> 2567 2568 </div> 2569 2570 </li> 2571 2572</ul> 2573 2574 2575 2576<style data-shopify> 2577 [data-menu-grid-id="MegaMenuList-4"] { 2578 2579 --menu-columns-desktop: 6; 2580 --menu-columns-tablet: 4; 2581 2582 } 2583 2584 [data-menu-list-id="MegaMenuList-4"] { 2585 2586 --menu-columns-desktop: 6; 2587 --menu-columns-tablet: 4; 2588 2589 } 2590</style> 2591 2592 2593 2594 </div> 2595 </div> 2596 </div> 2597 </div></li> 2598 2599 <li 2600 class="menu-list__list-item" 2601 on:blur="/deactivate" 2602 on:pointerenter="/activate" 2603 on:pointerleave="/deactivate" 2604 ><a 2605 href="/en/pages/test-checkout" 2606 data-skip-node-update="true" 2607 class="menu-list__link" 2608 2609 ref="menuitem" 2610 > 2611 <span class="menu-list__link-title">Demo checkout</span> 2612 </a></li> 2613 2614 <li 2615 class="menu-list__list-item" 2616 on:blur="/deactivate"
2617 on:pointerenter="/activate" 2618 on:pointerleave="/deactivate" 2619 ><a 2620 href="https://admin.mondido.com/" 2621 data-skip-node-update="true" 2622 class="menu-list__link" 2623 2624 ref="menuitem" 2625 > 2626 <span class="menu-list__link-title">Sign in</span> 2627 </a></li> 2628 2629 <li 2630 class="menu-list__list-item" 2631 slot="more" 2632 on:blur="/deactivate" 2633 on:pointerenter="/activate" 2634 on:pointerleave="/deactivate" 2635 > 2636 <button 2637 class="menu-list__link button-unstyled" 2638 aria-haspopup="true" 2639 aria-expanded="false" 2640 ref="menuitem" 2641 on:click="/toggle" 2642 data-testid="header-menu-more-button" 2643 > 2644 <span class="menu-list__link-title">More</span> 2645 </button> 2646 </li> 2647 2648</overflow-list> 2649 2650 </nav> 2651 </div> 2652 2653
2653<script 2654 src="//mondido.com/cdn/shop/t/1/assets/header-menu.js?v=1177411761452820701787819631" 2655 type="module" 2656 fetchpriority="low" 2657 ></script>
2657 2658 </header-menu> 2659 2660 2661<style data-shopify> 2662 .header__underlay { 2663 --color-submenu: rgb(255 255 255); 2664 } 2665</style> 2666 2667 2668 2669 2670 2671 2672 2673 </div><div 2674 class="header__column header__column--center" 2675 data-testid="header-top-center" 2676 > 2677 2678 2679 2680 2681 2682 2683 2684 2685<a 2686 2687 href="/en" 2688 class="size-style spacing-style header-logo" 2689 style=" 2690 --size-style-width: ;--size-style-height: ; 2691 --padding-block-start: 0px;--padding-block-end: 0px; 2692 --font-family: var(--font-body--family); 2693 --font-style: var(--font-body--style); 2694 --font-weight: 600; 2695 " 2696 2697> 2698 2699 2700 <span 2701 class="header-logo__image-container header-logo__image-container--original" 2702 data-testid="header-logo" 2703 > 2704 2705 2706 2707 2708 2709 2710 2711 2712 2713 2714 2715 2716 <img src="//mondido.com/cdn/shop/files/mondido_transparent.png?height=36&v=1787910584" alt="Mondido - Home" width="168" height="36" class="header-logo__image" srcset="//mondido.com/cdn/shop/files/mondido_transparent.png?height=36&v=1787910584 1x, //mondido.com/cdn/shop/files/mondido_transparent.png?height=72&v=1787910584 2x, //mondido.com/cdn/shop/files/mondido_transparent.png?height=108&v=1787910584 3x" style="--header-logo-image-width: 168px;--header-logo-image-width-mobile: 131px; --header-logo-image-height: 36px; --header-logo-image-height-mobile: 28px;"> 2717 2718 2719 </span> 2720 2721 2722</a> 2723 2724 2725 2726 2727 2728 2729 2730 2731 </div><div 2732 class="header__column header__column--right" 2733 data-testid="header-top-right" 2734 > 2735 2736 2737 2738 2739 2740 2741 <div class="dropdown-localization mobile:hidden"> 2742 2743<localization-form-component 2744 ref="localizationForm" 2745 data-label-results-count="[count] results" 2746 data-show-filter="false" 2747 style="--menu-localization-font: var(--font-heading--family); --menu-localization-font-size: 0.875rem; --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));" 2748> 2749 2750<form method="post" action="/en/localization" id="LocalizationForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data" ref="form" aria-label="Region and language"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="â" /><input type="hidden" name="_method" value="put" /> 2751 2752 2753 <div class="language-selector language-selector--collapse-space"> 2754 <h2 2755 class="visually-hidden" 2756 id="dropdown-LanguageLabel" 2757 > 2758 Language 2759 </h2> 2760 2761 <select 2762 id="dropdownSelect" 2763 class="localization-form__select" 2764 name="language_code" 2765 aria-label="Language" 2766 ref="languageInput" 2767 on:change="/changeLanguage" 2768 ><option 2769 value="sv" 2770 lang="sv" 2771 2772 > 2773 Svenska 2774 </option><option 2775 value="en" 2776 lang="en" 2777 2778 selected 2779 2780 > 2781 English 2782 </option></select> 2783 <span class="svg-wrapper icon-caret"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 2784 <path d="M11 5.5L7 9.5L3 5.5" stroke="currentColor" stroke-width="var(--icon-stroke-width)" stroke-linecap="round" stroke-linejoin="round"/> 2785</svg> 2786</span> 2787 </div> 2788 2789</form></localization-form-component> 2790 2791 2792 2793 </div> 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 </div> 2815 </div> 2816 </div> 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 <div class="header__row header__navigation-bar-row"> 2829 2830 2831 2832 2833 2834 2835 2836<style data-shopify> 2837 .header__underlay { 2838 --color-submenu: rgb(255 255 255); 2839 } 2840</style> 2841 2842 2843 2844 2845 </div> 2846 2847</header-component> 2848
2849<script 2850 src="//mondido.com/cdn/shop/t/1/assets/header.js?v=183210491532312943441787819631" 2851 type="module" 2852></script>
2852 2853 2854 2855 2856 2857
2857<script type="module"> 2858 import { hydrate } from '@theme/section-hydration'; 2859 const url = new URL(window.location.href); 2860 url.searchParams.delete('page'); 2861 hydrate('sections--31746160001362__header_section', url); 2862 </script>
2862 2863 2864 2865 2866</header> 2867<!-- END sections: header-group --> 2868 </div> 2869 2870
2870<script> 2871 /** 2872 * Sets `--header-height` and `--header-group-height` to measured values before first paint. 2873 * 2874 * A few CSS rules position content relative to the header at first paint â a hero sized to 2875 * the remaining viewport, a transparent header's negative margin. Without a measured value 2876 * those rules use the `60px` fallback from `sections/header.liquid`, and the content visibly 2877 * jumps once `header.js` corrects the values after load. 2878 * 2879 * Measuring forces layout mid-parse, so it only runs where a consuming rule exists. 2880 * Callers opt in: the transparent-header branch below, or `snippets/measure-header-heights.liquid`, 2881 * which any new first-paint consumer must render too. 2882 * 2883 * Measures once per page; after load, header.js's ResizeObservers keep the values fresh. 2884 * The group-height walk mimics calculateHeaderGroupHeight() in utilities.js â keep them 2885 * in sync. 2886 */ 2887 window.measureHeaderHeights = (function () { 2888 let measured = false; 2889 2890 return function measureHeaderHeights() { 2891 if (measured) return; 2892 2893 const header = document.querySelector('#header-component'); 2894 const headerGroup = document.querySelector('#header-group'); 2895 2896 if (!header || !headerGroup) return; 2897 measured = true; 2898 2899 const headerHeight = header.offsetHeight; 2900 2901 let headerGroupHeight = 0; 2902 for (const element of headerGroup.children) { 2903 if (element instanceof HTMLElement) headerGroupHeight += element.offsetHeight; 2904 } 2905 2906 /** 2907 * A transparent header is absolutely positioned, so the loop above counts its section 2908 * wrapper as 0px. When a section follows it in the group, header.liquid pushes that 2909 * section down by the header's height using a margin, which offsetHeight also 2910 * excludes â so the header's height has to be added back manually. 2911 */ 2912 if (header.hasAttribute('transparent') && header.parentElement?.nextElementSibling) { 2913 headerGroupHeight += headerHeight; 2914 } 2915 2916 document.body.style.setProperty('--header-height', `${headerHeight}px`); 2917 document.body.style.setProperty('--header-group-height', `${headerGroupHeight}px`); 2918 }; 2919 })(); 2920 2921 /** 2922 * Transparent-header rules consume the measured heights at first paint on every 2923 * template, so the transparent case opts in globally here instead of per-section. 2924 */ 2925 if (document.querySelector('#header-component')?.hasAttribute('transparent')) { 2926 measureHeaderHeights(); 2927 } 2928 2929 /** 2930 * Sets `--top-row-height`, consumed by the header underlays and submenus. Deferred to a 2931 * rAF so the `offsetHeight` read doesn't force layout mid-parse, and scoped to the 2932 * header, where all consumers live, so the write only invalidates the header subtree. 2933 * Mimics the `--top-row-height` write in updateHeaderHeights() in utilities.js 2934 */ 2935 (function setTopRowHeight() { 2936 const header = document.querySelector('#header-component'); 2937 const headerTopRow = header?.querySelector('.header__row--top'); 2938 if (!headerTopRow) return; 2939 2940 window.requestAnimationFrame(function () { 2941 header.style.setProperty('--top-row-height', `${headerTopRow.offsetHeight}px`); 2942 }); 2943 })(); 2944 2945 /** 2946 * Sets `--transparent-header-offset-boolean` when the first section must offset itself 2947 * under a transparent header. The non-offset case relies on the `0` default declared in 2948 * sections/header.liquid â unlike updateTransparentHeaderOffset() in utilities.js, which 2949 * re-runs on editor changes and must write '0' to reset a previously written '1'. 2950 */ 2951 (function updateTransparentHeaderOffset() { 2952 const header = document.querySelector('#header-component'); 2953 const headerSection = document.querySelector('#header-group .header-section'); 2954 if (!headerSection || !header?.hasAttribute('transparent')) return; 2955 2956 const hasImmediateSection = headerSection.nextElementSibling?.classList.contains('shopify-section'); 2957 if (!hasImmediateSection) { 2958 document.body.style.setProperty('--transparent-header-offset-boolean', '1'); 2959 } 2960 })(); 2961 2962 /** 2963 * Sets the initial menu style (inline menu vs. drawer) on the header component. 2964 * Mimics setHeaderMenuStyle() in utilities.js 2965 */ 2966 (function setHeaderMenuStyle() { 2967 const headerComponent = document.querySelector('#header-component'); 2968 if (headerComponent) { 2969 const isTouchDevice = 'ontouchstart' in window && navigator.maxTouchPoints > 0; 2970 const overflowList = headerComponent.querySelector('overflow-list'); 2971 const hasReachedMinimum = overflowList && overflowList.hasAttribute('minimum-reached'); 2972 headerComponent.dataset.menuStyle = isTouchDevice || hasReachedMinimum ? 'drawer' : 'menu'; 2973 } 2974 })(); 2975 </script>
2975 2976 2977 <main 2978 id="MainContent" 2979 class="content-for-layout" 2980 role="main" 2981 data-page-transition-enabled="false" 2982 data-product-transition="false" 2983 data-template="index" 2984 > 2985 <div id="shopify-section-template--31746159903058__ustom_mondido_hero_djLKCy" class="shopify-section"> 2986 2987<style> 2988 .custom-hero-template--31746159903058__ustom_mondido_hero_djLKCy { 2989 position: relative; 2990 width: 100%; 2991 min-height: 80vh; 2992 display: flex; 2993 align-items: center; 2994 background-color: #1a1a1a; 2995 overflow: hidden; 2996 padding: 6rem 0; 2997 } 2998 2999 @media (min-width: 990px) { 3000 .custom-hero-template--31746159903058__ustom_mondido_hero_djLKCy { 3001 min-height: 750px; 3002 } 3003 } 3004 3005 /* Bakgrundsbild */ 3006 .hero-bg-template--31746159903058__ustom_mondido_hero_djLKCy { 3007 position: absolute; 3008 top: 0; 3009 left: 0; 3010 width: 100%; 3011 height: 100%; 3012 object-fit: cover; 3013 z-index: 1; 3014 } 3015 3016 /* Mörk toning (Exakt #1a1a1a / rgb(26,26,26) för att matcha sektionen nedanför perfekt) */ 3017 .hero-overlay-template--31746159903058__ustom_mondido_hero_djLKCy { 3018 position: absolute; 3019 top: 0; 3020 left: 0; 3021 width: 100%; 3022 height: 100%; 3023 z-index: 2; 3024 background: linear-gradient(to right, #1a1a1a 0%, rgba(26, 26, 26, 0.85) 45%, transparent 100%); 3025 } 3026 3027 @media (max-width: 767px) { 3028 .hero-overlay-template--31746159903058__ustom_mondido_hero_djLKCy { 3029 background: linear-gradient(to bottom, rgba(26, 26, 26, 0.2) 0%, #1a1a1a 100%); 3030 } 3031 } 3032 3033 /* Det globala rutnätet (utan trianglar) */ 3034 .grid-overlay-dark-template--31746159903058__ustom_mondido_hero_djLKCy { 3035 position: absolute; 3036 top: 0; 3037 left: 50%; 3038 width: 100vw; 3039 height: 100%; 3040 pointer-events: none; 3041 z-index: 3; 3042 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 3043 background-size: 25vw 100%; 3044 background-position: left top; 3045 transform: translateX(-50%); 3046 } 3047 3048 /* Innehållscontainer med standardplacering (inte intryckt 25vw) */ 3049 .hero-content-template--31746159903058__ustom_mondido_hero_djLKCy { 3050 position: relative; 3051 z-index: 5; 3052 width: 100%; 3053 max-width: 1400px; 3054 margin: 0 auto; 3055 padding: 0 2rem; 3056 } 3057 3058 @media (min-width: 990px) { 3059 .hero-content-template--31746159903058__ustom_mondido_hero_djLKCy { 3060 padding: 0 5vw; 3061 } 3062 } 3063 3064 .hero-text-block-template--31746159903058__ustom_mondido_hero_djLKCy { 3065 max-width: 540px; 3066 } 3067 3068 .hero-text-block-template--31746159903058__ustom_mondido_hero_djLKCy h1 { 3069 font-size: 2.8rem; 3070 color: #ffffff; 3071 line-height: 1.15; 3072 margin-bottom: 1.5rem; 3073 font-weight: 400; 3074 } 3075 3076 @media (min-width: 990px) { 3077 .hero-text-block-template--31746159903058__ustom_mondido_hero_djLKCy h1 { 3078 font-size: 3.6rem; 3079 } 3080 } 3081 3082 .hero-text-block-template--31746159903058__ustom_mondido_hero_djLKCy h1 em { 3083 color: #f7e8a4; 3084 font-style: italic; 3085 font-family: Georgia, serif; 3086 } 3087 3088 .hero-text-block-template--31746159903058__ustom_mondido_hero_djLKCy p { 3089 font-size: 1.05rem; 3090 color: #c4c4c4; 3091 line-height: 1.6; 3092 margin-bottom: 2.5rem; 3093 } 3094 3095 /* Knappar */ 3096 .hero-buttons-template--31746159903058__ustom_mondido_hero_djLKCy { 3097 display: flex; 3098 flex-wrap: wrap; 3099 gap: 1rem; 3100 } 3101 3102 .hero-btn-primary-template--31746159903058__ustom_mondido_hero_djLKCy, 3103 .hero-btn-secondary-template--31746159903058__ustom_mondido_hero_djLKCy { 3104 display: inline-block; 3105 padding: 0.9rem 2rem; 3106 border-radius: 4px; 3107 text-decoration: none; 3108 font-weight: 600; 3109 font-size: 0.95rem; 3110 transition: all 0.3s ease; 3111 } 3112 3113 .hero-btn-primary-template--31746159903058__ustom_mondido_hero_djLKCy { 3114 background-color: #f7e8a4; 3115 color: #1a1a1a; 3116 border: 1px solid #f7e8a4; 3117 } 3118 3119 .hero-btn-primary-template--31746159903058__ustom_mondido_hero_djLKCy:hover { 3120 background-color: #e6d793; 3121 border-color: #e6d793; 3122 } 3123 3124 .hero-btn-secondary-template--31746159903058__ustom_mondido_hero_djLKCy { 3125 background-color: transparent; 3126 color: #ffffff; 3127 border: 1px solid rgba(255,255,255,0.3); 3128 } 3129 3130 .hero-btn-secondary-template--31746159903058__ustom_mondido_hero_djLKCy:hover { 3131 border-color: #ffffff; 3132 background-color: rgba(255,255,255,0.05); 3133 } 3134</style> 3135 3136<div class="custom-hero-template--31746159903058__ustom_mondido_hero_djLKCy"> 3137 3138 <!-- Bakgrund och overlays --> 3139 3140 <img src="//mondido.com/cdn/shop/files/nighttime_street_portrait.jpg?v=1787916149&width=2000" alt="Hero Backgroun
3140d" class="hero-bg-template--31746159903058__ustom_mondido_hero_djLKCy" loading="eager"> 3141 3142 3143 <div class="hero-overlay-template--31746159903058__ustom_mondido_hero_djLKCy"></div> 3144 3145 <!-- Grid UTAN trianglar --> 3146 <div class="grid-overlay-dark-template--31746159903058__ustom_mondido_hero_djLKCy"></div> 3147 3148 <!-- Text & Knappar --> 3149 <div class="hero-content-template--31746159903058__ustom_mondido_hero_djLKCy"> 3150 <div class="hero-text-block-template--31746159903058__ustom_mondido_hero_djLKCy"> 3151 3152 <h1>Your Conversion is<br><em>Our Conversion</em></h1> 3153 <p>Mondido is a payment partner specialising in local payments tailored to your market needs for maximised conversion.</p> 3154 3155 <div class="hero-buttons-template--31746159903058__ustom_mondido_hero_djLKCy"> 3156 3157 <a href="/en/pages/products" class="hero-btn-primary-template--31746159903058__ustom_mondido_hero_djLKCy">See how</a> 3158 3159 3160 3161 <a href="https://access.mondido.com/en/register" class="hero-btn-secondary-template--31746159903058__ustom_mondido_hero_djLKCy">Create account</a> 3162 3163 </div> 3164 3165 </div> 3166 </div> 3167</div></div><section id="shopify-section-template--31746159903058__logo_marquee_NApFpQ" class="shopify-section section"><style data-shopify>.marquee-wrapper-template--31746159903058__logo_marquee_NApFpQ { 3168 background-color: #faeee3; 3169 padding-top: 24px; 3170 padding-bottom: 24px; 3171 overflow: hidden; 3172 display: flex; 3173 gap: 25px; 3174 width: 100vw; 3175 position: relative; 3176 left: 50%; 3177 right: 50%; 3178 margin-left: -50vw; 3179 margin-right: -50vw; 3180 } 3181 3182 .marquee-content-template--31746159903058__logo_marquee_NApFpQ { 3183 display: flex; 3184 gap: 25px; 3185 flex-shrink: 0; 3186 min-width: 100%; 3187 align-items: center; 3188 /* Hastigheten styrs av reglaget i tema-redigeraren */ 3189 animation: marquee-scroll-template--31746159903058__logo_marquee_NApFpQ 30s linear infinite; 3190 } 3191 3192 @keyframes marquee-scroll-template--31746159903058__logo_marquee_NApFpQ { 3193 0% { transform: translateX(0); } 3194 100% { transform: translateX(calc(-100% - 25px)); } 3195 } 3196 3197 .logo-box-template--31746159903058__logo_marquee_NApFpQ { 3198 /* Separata inställningar för bredd och höjd för att tillåta rektanglar */ 3199 width: 130px; 3200 height: 80px; 3201 border-radius: 16px; 3202 background-color: #0e1014; 3203 display: flex; 3204 align-items: center; 3205 justify-content: center; 3206 flex-shrink: 0; 3207 overflow: hidden; 3208 /* En subtil kantlinje för att ge en lyxig inramning, stäng av om du vill */ 3209 border: 1px solid rgba(255, 255, 255, 0.05); 3210 } 3211 3212 @media screen and (max-width: 749px) { 3213 .logo-box-template--31746159903058__logo_marquee_NApFpQ { 3214 width: 80px; 3215 height: 50px; 3216 } 3217 } 3218 3219 .logo-box-template--31746159903058__logo_marquee_NApFpQ img, 3220 .logo-box-template--31746159903058__logo_marquee_NApFpQ svg { 3221 /* Bilden inuti ramen tar upp 75% av ytan så den får lite andrum (padding) */ 3222 width: 75%; 3223 height: 75%; 3224 object-fit: contain; 3225 } 3226 3227 .logo-box-template--31746159903058__logo_marquee_NApFpQ svg { 3228 fill: currentColor; 3229 opacity: 0.3; 3230 }</style><div class="marquee-wrapper-template--31746159903058__logo_marquee_NApFpQ"> 3231 <div class="marquee-content-template--31746159903058__logo_marquee_NApFpQ" > 3232 3233 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3234 3235 <img 3236 src="//mondido.com/cdn/shop/files/Klarna_Payment_Badge_svg_0f37752e-a9bf-4ea2-a50d-afbba883dcca.webp?v=1789559583&width=400" 3237 alt="" 3238 loading="lazy" 3239 > 3240 3241 </div> 3242 3243 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3244 3245 <img 3246 src="//mondido.com/cdn/shop/files/PDF-logo_1.png?v=1789558426&width=400" 3247 alt="" 3248 loading="lazy" 3249 > 3250 3251 </div> 3252 3253 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3254 3255 <img 3256 src="//mondido.com/cdn/shop/files/Google_Pay_Acceptance_Mark_1.svg?v=1789558411&width=400" 3257 alt="" 3258 loading="lazy" 3259 > 3260 3261 </div> 3262 3263 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3264 3265 <img 3266 src="//mondido.com/cdn/shop/files/Firefly_10.png?v=1789558708&width=400" 3267 alt="" 3268 loading="lazy" 3269 > 3270 3271 </div> 3272 3273 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3274 3275 <img 3276 src="//mondido.com/cdn/shop/files/trustly_regular_logotype_horizontal_white_rgb-e1733165364656_1.png?v=1789558386&width=400" 3277 alt="" 3278 loading="lazy" 3279 > 3280 3281 </div> 3282 3283 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3284 3285 <img 3286 src="//mondido.com/cdn/shop/files/paypal-logo-png_seeklogo-249214.png?v=1789558558&width=400" 3287 alt="" 3288 loading="lazy" 3289 > 3290 3291 </div> 3292 3293 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3294 3295 <img 3296 src="//mondido.com/cdn/shop/files/two-logo-white_1.png?v=1789557948&width=400" 3297 alt="" 3298 loading="lazy" 3299 > 3300 3301 </div> 3302 3303 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3304 3305 <img 3306 src="//mondido.com/cdn/shop/files/Zaver_Logotype_Circle_White_1.png?v=1789557929&width=400" 3307 alt="" 3308 loading="lazy" 3309 > 3310 3311 </div> 3312 3313 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3314 3315 <img 3316 src="//mondido.com/cdn/shop/files/MP_RGB_NoTM_LogoType-Horisontal-White-e1733164834915-1536x509_1.png?v=1789557918&width=400" 3317 alt="" 3318 loading="lazy" 3319 > 3320 3321 </div> 3322 3323 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3324 3325 <img 3326 src="//mondido.com/cdn/shop/files/visa_1.svg?v=1789557822&width=400" 3327 alt="" 3328 loading="lazy" 3329 > 3330 3331 </div> 3332 3333 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3334 3335 <img 3336 src="//mondido.com/cdn/shop/files/Swish-Logo-Secondary-Dark-BG--1536x468_1.png?v=1789557877&width=400" 3337 alt="" 3338 loading="lazy" 3339 > 3340 3341 </div> 3342 3343 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3344 3345 <img 3346 src="//mondido.com/cdn/shop/files/Vipps_Logo_RGB_White-e1733165134859_1.png?v=1789557887&width=400" 3347 alt="" 3348 loading="lazy" 3349 > 3350 3351 </div> 3352 3353 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3354 3355 <img 3356 src="//mondido.com/cdn/shop/files/ma_symbol_opt_73_3x_d0356396-890d-4a67-ac27-654db62dc6d7.png?v=1789557837&width=400" 3357 alt="" 3358 loading="lazy" 3359 > 3360 3361 </div> 3362 3363 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3364 3365 <img 3366 src="//mondido.com/cdn/shop/files/American-Express-Square-Logo_1.png?v=1789557848&width=400" 3367 alt="" 3368 loading="lazy" 3369 > 3370 3371 </div> 3372 3373 3374 3375 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3376 3377 <img 3378 src="//mondido.com/cdn/shop/files/Klarna_Payment_Badge_svg_0f37752e-a9bf-4ea2-a50d-afbba883dcca.webp?v=1789559583&width=400" 3379 alt="" 3380 loading="lazy" 3381 > 3382 3383 </div> 3384 3385 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3386 3387 <img 3388 src="//mondido.com/cdn/shop/files/PDF-logo_1.png?v=1789558426&width=400" 3389 alt="" 3390 loading="lazy" 3391 > 3392 3393 </div> 3394 3395 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3396 3397 <img 3398 src="//mondido.com/cdn/shop/files/Google_Pay_Acceptance_Mark_1.svg?v=1789558411&width=400" 3399 alt="" 3400 loading="lazy" 3401 > 3402 3403 </div> 3404 3405 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3406 3407 <img 3408 src="//mondido.com/cdn/shop/files/Firefly_10.png?v=1789558708&width=400" 3409 alt="" 3410 loading="lazy" 3411 > 3412 3413 </div> 3414 3415 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3416 3417 <img 3418 src="//mondido.com/cdn/shop/files/trustly_regular_logotype_horizontal_white_rgb-e1733165364656_1.png?v=1789558386&width=400" 3419 alt="" 3420 loading="lazy" 3421 > 3422 3423 </div> 3424 3425 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3426 3427 <img 3428 src="//mondido.com/cdn/shop/files/paypal-logo-png_seeklogo-249214.png?v=1789558558&width=400" 3429 alt="" 3430 loading="lazy" 3431 > 3432 3433 </div> 3434 3435 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3436 3437 <img 3438 src="//mondido.com/cdn/shop/files/two-logo-white_1.png?v=1789557948&width=400" 3439 alt="" 3440 loading="lazy" 3441 > 3442 3443 </div> 3444 3445 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3446 3447 <img 3448 src="//mondido.com/cdn/shop/files/Zaver_Logotype_Circle_White_1.png?v=1789557929&width=400" 3449 alt="" 3450 loading="lazy" 3451 > 3452 3453 </div> 3454 3455 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3456 3457 <img 3458 src="//mondido.com/cdn/shop/files/MP_RGB_NoTM_LogoType-Horisontal-White-e1733164834915-1536x509_1.png?v=1789557918&width=400" 3459 alt="" 3460 loading="lazy" 3461 > 3462 3463 </div> 3464 3465 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3466 3467 <img 3468 src="//mondido.com/cdn/shop/files/visa_1.svg?v=1789557822&width=400" 3469 alt="" 3470 loading="lazy" 3471 > 3472 3473 </div> 3474 3475 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3476 3477 <img 3478 src="//mondido.com/cdn/shop/files/Swish-Logo-Secondary-Dark-BG--1536x468_1.png?v=1789557877&width=400" 3479 alt="" 3480 loading="lazy" 3481 > 3482 3483 </div> 3484 3485 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3486 3487 <img 3488 src="//mondido.com/cdn/shop/files/Vipps_Logo_RGB_White-e1733165134859_1.png?v=1789557887&width=400" 3489 alt="" 3490 loading="lazy" 3491 > 3492 3493 </div> 3494 3495 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3496 3497 <img 3498 src="//mondido.com/cdn/shop/files/ma_symbol_opt_73_3x_d0356396-890d-4a67-ac27-654db62dc6d7.png?v=1789557837&width=400" 3499 alt="" 3500 loading="lazy" 3501 > 3502 3503 </div> 3504 3505 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3506 3507 <img 3508 src="//mondido.com/cdn/shop/files/American-Express-Square-Logo_1.png?v=1789557848&width=400" 3509 alt="" 3510 loading="lazy" 3511 > 3512 3513 </div> 3514 3515 3516 3517 </div> 3518 3519 <div class="marquee-content-template--31746159903058__logo_marquee_NApFpQ" aria-hidden="true"> 3520 3521 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3522 3523 <img 3524 src="//mondido.com/cdn/shop/files/Klarna_Payment_Badge_svg_0f37752e-a9bf-4ea2-a50d-afbba883dcca.webp?v=1789559583&width=400" 3525 alt="" 3526 loading="lazy" 3527 > 3528 3529 </div> 3530 3531 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3532 3533 <img 3534 src="//mondido.com/cdn/shop/files/PDF-logo_1.png?v=1789558426&width=400" 3535 alt="" 3536 loading="lazy" 3537 > 3538 3539 </div> 3540 3541 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3542 3543 <img 3544 src="//mondido.com/cdn/shop/files/Google_Pay_Acceptance_Mark_1.svg?v=1789558411&width=400" 3545 alt="" 3546 loading="lazy" 3547 > 3548 3549 </div> 3550 3551 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3552 3553 <img 3554 src="//mondido.com/cdn/shop/files/Firefly_10.png?v=1789558708&width=400" 3555 alt="" 3556 loading="lazy" 3557 > 3558 3559 </div> 3560 3561 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3562 3563 <img 3564 src="//mondido.com/cdn/shop/files/trustly_regular_logotype_horizontal_white_rgb-e1733165364656_1.png?v=1789558386&width=400" 3565 alt="" 3566 loading="lazy" 3567 > 3568 3569 </div> 3570 3571 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3572 3573 <img 3574 src="//mondido.com/cdn/shop/files/paypal-logo-png_seeklogo-249214.png?v=1789558558&width=400" 3575 alt="" 3576 loading="lazy" 3577 > 3578 3579 </div> 3580 3581 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3582 3583 <img 3584 src="//mondido.com/cdn/shop/files/two-logo-white_1.png?v=1789557948&width=400" 3585 alt="" 3586 loading="lazy" 3587 > 3588 3589 </div> 3590 3591 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3592 3593 <img 3594 src="//mondido.com/cdn/shop/files/Zaver_Logotype_Circle_White_1.png?v=1789557929&width=400" 3595 alt="" 3596 loading="lazy" 3597 > 3598 3599 </div> 3600 3601 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3602 3603 <img 3604 src="//mondido.com/cdn/shop/files/MP_RGB_NoTM_LogoType-Horisontal-White-e1733164834915-1536x509_1.png?v=1789557918&width=400" 3605 alt="" 3606 loading="lazy" 3607 > 3608 3609 </div> 3610 3611 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3612 3613 <img 3614 src="//mondido.com/cdn/shop/files/visa_1.svg?v=1789557822&width=400" 3615 alt="" 3616 loading="lazy" 3617 > 3618 3619 </div> 3620 3621 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3622 3623 <img 3624
3624 src="//mondido.com/cdn/shop/files/Swish-Logo-Secondary-Dark-BG--1536x468_1.png?v=1789557877&width=400" 3625 alt="" 3626 loading="lazy" 3627 > 3628 3629 </div> 3630 3631 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3632 3633 <img 3634 src="//mondido.com/cdn/shop/files/Vipps_Logo_RGB_White-e1733165134859_1.png?v=1789557887&width=400" 3635 alt="" 3636 loading="lazy" 3637 > 3638 3639 </div> 3640 3641 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3642 3643 <img 3644 src="//mondido.com/cdn/shop/files/ma_symbol_opt_73_3x_d0356396-890d-4a67-ac27-654db62dc6d7.png?v=1789557837&width=400" 3645 alt="" 3646 loading="lazy" 3647 > 3648 3649 </div> 3650 3651 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3652 3653 <img 3654 src="//mondido.com/cdn/shop/files/American-Express-Square-Logo_1.png?v=1789557848&width=400" 3655 alt="" 3656 loading="lazy" 3657 > 3658 3659 </div> 3660 3661 3662 3663 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3664 3665 <img 3666 src="//mondido.com/cdn/shop/files/Klarna_Payment_Badge_svg_0f37752e-a9bf-4ea2-a50d-afbba883dcca.webp?v=1789559583&width=400" 3667 alt="" 3668 loading="lazy" 3669 > 3670 3671 </div> 3672 3673 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3674 3675 <img 3676 src="//mondido.com/cdn/shop/files/PDF-logo_1.png?v=1789558426&width=400" 3677 alt="" 3678 loading="lazy" 3679 > 3680 3681 </div> 3682 3683 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3684 3685 <img 3686 src="//mondido.com/cdn/shop/files/Google_Pay_Acceptance_Mark_1.svg?v=1789558411&width=400" 3687 alt="" 3688 loading="lazy" 3689 > 3690 3691 </div> 3692 3693 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3694 3695 <img 3696 src="//mondido.com/cdn/shop/files/Firefly_10.png?v=1789558708&width=400" 3697 alt="" 3698 loading="lazy" 3699 > 3700 3701 </div> 3702 3703 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3704 3705 <img 3706 src="//mondido.com/cdn/shop/files/trustly_regular_logotype_horizontal_white_rgb-e1733165364656_1.png?v=1789558386&width=400" 3707 alt="" 3708 loading="lazy" 3709 > 3710 3711 </div> 3712 3713 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3714 3715 <img 3716 src="//mondido.com/cdn/shop/files/paypal-logo-png_seeklogo-249214.png?v=1789558558&width=400" 3717 alt="" 3718 loading="lazy" 3719 > 3720 3721 </div> 3722 3723 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3724 3725 <img 3726 src="//mondido.com/cdn/shop/files/two-logo-white_1.png?v=1789557948&width=400" 3727 alt="" 3728 loading="lazy" 3729 > 3730 3731 </div> 3732 3733 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3734 3735 <img 3736 src="//mondido.com/cdn/shop/files/Zaver_Logotype_Circle_White_1.png?v=1789557929&width=400" 3737 alt="" 3738 loading="lazy" 3739 > 3740 3741 </div> 3742 3743 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3744 3745 <img 3746 src="//mondido.com/cdn/shop/files/MP_RGB_NoTM_LogoType-Horisontal-White-e1733164834915-1536x509_1.png?v=1789557918&width=400" 3747 alt="" 3748 loading="lazy" 3749 > 3750 3751 </div> 3752 3753 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3754 3755 <img 3756 src="//mondido.com/cdn/shop/files/visa_1.svg?v=1789557822&width=400" 3757 alt="" 3758 loading="lazy" 3759 > 3760 3761 </div> 3762 3763 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3764 3765 <img 3766 src="//mondido.com/cdn/shop/files/Swish-Logo-Secondary-Dark-BG--1536x468_1.png?v=1789557877&width=400" 3767 alt="" 3768 loading="lazy" 3769 > 3770 3771 </div> 3772 3773 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3774 3775 <img 3776 src="//mondido.com/cdn/shop/files/Vipps_Logo_RGB_White-e1733165134859_1.png?v=1789557887&width=400" 3777 alt="" 3778 loading="lazy" 3779 > 3780 3781 </div> 3782 3783 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3784 3785 <img 3786 src="//mondido.com/cdn/shop/files/ma_symbol_opt_73_3x_d0356396-890d-4a67-ac27-654db62dc6d7.png?v=1789557837&width=400" 3787 alt="" 3788 loading="lazy" 3789 > 3790 3791 </div> 3792 3793 <div class="logo-box-template--31746159903058__logo_marquee_NApFpQ" > 3794 3795 <img 3796 src="//mondido.com/cdn/shop/files/American-Express-Square-Logo_1.png?v=1789557848&width=400" 3797 alt="" 3798 loading="lazy" 3799 > 3800 3801 </div> 3802 3803 3804 3805 </div> 3806 3807 3808</div> 3809 3810</section><section id="shopify-section-template--31746159903058__mondido_demo_checkout_r4Ype6" class="shopify-section custom-promo-fullwidth-section"> 3811 3812<div class="mondido-promo-wrapper mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6"> 3813 3814 <!-- Det globala rutnätet (vertikala streck) --> 3815 <div class="grid-overlay-dark-template--31746159903058__mondido_demo_checkout_r4Ype6"></div> 3816 3817 <div class="mondido-promo-container"><!-- Vänster kolumn: Säljande text --> 3818 <div class="mondido-promo-text"><h2>
3818See how our checkout works in real time with our live demo checkout.</h2><div class="rte"><p>Click Go to Checkout below and experience what a high-converting checkout should look like.</p></div></div> 3819 3820 <!-- Höger kolumn: Demo Checkout Widget --> 3821 <div class="mondido-promo-widget"> 3822 <!-- Produktbild --><img src="//mondido.com/cdn/shop/files/cap_transparent.png?v=1789550527&width=600" alt="Demo checkout" srcset="//mondido.com/cdn/shop/files/cap_transparent.png?v=1789550527&width=352 352w, //mondido.com/cdn/shop/files/cap_transparent.png?v=1789550527&width=600 600w" width="600" height="600" loading="lazy" class="demo-product-image"> 3823<!-- Widget Innehåll --> 3824 <div class="demo-widget-info"><h3>Demo checkout</h3><div class="rte widget-desc"><p>Click Go to Checkout to see how effortless our e-commerce checkout really is.</p></div><span class="demo-price">1 EUR</span><!-- Knapp med logik för direktutcheckning --><a href="/cart/54742863479122:1?checkout" class="demo-checkout-btn"> 3825 Go to Checkout 3826 </a></div> 3827 </div> 3828 3829 </div> 3830</div> 3831 3832<style> 3833 /* Tvinga sektionen till full bredd */ 3834 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 { 3835 background-color: #1a1a1a !important; 3836 color: #ffffff; 3837 padding: 80px 24px 80px 24px; 3838 width: 100vw; 3839 position: relative; 3840 left: 50%; 3841 right: 50%; 3842 margin-left: -50vw; 3843 margin-right: -50vw; 3844 box-sizing: border-box; 3845 font-family: inherit; 3846 overflow: hidden; /* Gömmer rutnätet som hamnar utanför skärmen */ 3847 } 3848 3849 /* Det globala rutnätet (vertikala streck) inhämtat från Hero-sektionen */ 3850 .grid-overlay-dark-template--31746159903058__mondido_demo_checkout_r4Ype6 { 3851 position: absolute; 3852 top: 0; 3853 left: 50%; 3854 width: 100vw; 3855 height: 100%; 3856 pointer-events: none; /* Ser till att man fortfarande kan klicka på knappen genom rutnätet */ 3857 z-index: 3; 3858 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 3859 background-size: 25vw 100%; 3860 background-position: left top; 3861 transform: translateX(-50%); 3862 } 3863 3864 /* Containern för innehållet */ 3865 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-container { 3866 max-width: 1200px; 3867 margin: 0 auto; 3868 display: flex; 3869 flex-direction: column; 3870 gap: 60px; 3871 align-items: center; 3872 position: relative; 3873 z-index: 5; /* Håller innehållet ovanför rutnätet */ 3874 } 3875 3876 /* Typografi för vänstra texten */ 3877 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-text h2 { 3878 font-size: 2.5rem; 3879 line-height: 1.2; 3880 margin-bottom: 20px; 3881 font-weight: 500; 3882 color: #ffffff; 3883 } 3884 3885 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-text .rte { 3886 font-size: 1.1rem; 3887 color: #a0a0a0; 3888 line-height: 1.5; 3889 } 3890 3891 /* Stilar för Demo-widgeten (Höger sida) */ 3892 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-widget { 3893 display: flex; 3894 flex-direction: column; 3895 align-items: flex-start; 3896 text-align: left; 3897 width: 100%; 3898 max-width: 450px; 3899 } 3900 3901 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .demo-product-image { 3902 width: 100%; 3903 max-width: 280px; 3904 height: auto; 3905 margin-bottom: 30px; 3906 object-fit: contain; 3907 align-self: center; 3908 } 3909 3910 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .placeholder-svg { 3911 background-color: #2a2d34; 3912 border-radius: 8px; 3913 padding: 20px; 3914 width: 100%; 3915 max-width: 280px; 3916 align-self: center; 3917 margin-bottom: 30px; 3918 } 3919 3920 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .demo-widget-info { 3921 width: 100%; 3922 } 3923 3924 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .demo-widget-info h3 { 3925 font-size: 1.8rem; 3926 margin-top: 0; 3927 margin-bottom: 15px; 3928 color: #ffffff; 3929 font-weight: 500; 3930 } 3931 3932 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .widget-desc { 3933 font-size: 0.95rem; 3934 color: #a0a0a0; 3935 margin-bottom: 25px; 3936 line-height: 1.5; 3937 } 3938 3939 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .widget-desc p { 3940 margin: 0; 3941 } 3942 3943 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .demo-price { 3944 display: block; 3945 font-size: 1.5rem; 3946 font-weight: 600; 3947 margin-bottom: 20px; 3948 color: #ffffff; 3949 } 3950 3951 /* Knapp */ 3952 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .demo-checkout-btn { 3953 display: inline-flex; 3954 align-items: center; 3955 justify-content: center; 3956 background-color: #f7e8a4 !important; 3957 color: #000000 !important; 3958 font-weight: 600; 3959 font-size: 0.95rem; 3960 padding: 14px 28px; 3961 border-radius: 6px; 3962 text-decoration: none; 3963 transition: opacity 0.2s ease; 3964 border: none; 3965 cursor: pointer; 3966 } 3967 3968 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .demo-checkout-btn:hover { 3969 opacity: 0.85; 3970 } 3971
3972 /* Desktop Layout */ 3973 @media screen and (min-width: 750px) { 3974 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-container { 3975 flex-direction: row; 3976 justify-content: space-between; 3977 align-items: center; 3978 } 3979 3980 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-text { 3981 flex: 1; 3982 padding-right: 40px; 3983 } 3984 3985 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-text h2 { 3986 font-size: 3.5rem; 3987 } 3988 3989 .mondido-promo-wrapper-template--31746159903058__mondido_demo_checkout_r4Ype6 .mondido-promo-widget { 3990 flex: 1; 3991 } 3992 } 3993</style> 3994 3995</section><div id="shopify-section-template--31746159903058__custom_feature_split_mrWCM4" class="shopify-section"> 3996 3997<style> 3998 .custom-split-template--31746159903058__custom_feature_split_mrWCM4 { 3999 display: flex; 4000 flex-direction: column; 4001 width: 100%; 4002 background-color: #1a1a1a; 4003 position: relative; 4004 overflow: hidden; 4005 } 4006 4007 @media (min-width: 768px) { 4008 .custom-split-template--31746159903058__custom_feature_split_mrWCM4 { 4009 flex-direction: row; 4010 } 4011 } 4012 4013 /* Det nya, globalt synkade rutnätet */ 4014 .grid-overlay-template--31746159903058__custom_feature_split_mrWCM4 { 4015 position: absolute; 4016 top: 0; 4017 left: 50%; 4018 width: 100vw; 4019 height: 100%; 4020 pointer-events: none; 4021 z-index: 1; 4022 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 4023 background-size: 25vw 100%; 4024 background-position: left top; 4025 transform: translateX(-50%); 4026 } 4027 4028 .split-left-template--31746159903058__custom_feature_split_mrWCM4 { 4029 flex: 1; 4030 padding: 4rem 2rem; 4031 position: relative; 4032 z-index: 4; /* Ligger över bilden för att visa pilen */ 4033 display: flex; 4034 flex-direction: column; 4035 justify-content: center; 4036 color: #ffffff; 4037 } 4038 4039 @media (min-width: 768px) { 4040 .split-left-template--31746159903058__custom_feature_split_mrWCM4 { 4041 padding: 6rem 5vw 6rem 10vw; 4042 } 4043 4044 /* Pilen som pekar in i bilden */ 4045 .split-left-template--31746159903058__custom_feature_split_mrWCM4::after { 4046 content: ''; 4047 position: absolute; 4048 right: -40px; 4049 top: 50%; 4050 transform: translateY(-50%); 4051 width: 0; 4052 height: 0; 4053 border-top: 50px solid transparent; 4054 border-bottom: 50px solid transparent; 4055 border-left: 40px solid #1a1a1a; 4056 z-index: 10; 4057 } 4058 } 4059 4060 .split-content-inner-template--31746159903058__custom_feature_split_mrWCM4 { 4061 max-width: 500px; 4062 position: relative; 4063 z-index: 5; 4064 } 4065 4066 .split-logo-template--31746159903058__custom_feature_split_mrWCM4 { 4067 max-width: 120px; 4068 margin-bottom: 1.5rem; 4069 display: block; 4070 } 4071 4072 .split-left-template--31746159903058__custom_feature_split_mrWCM4 h2 { 4073 font-size: 2.2rem; 4074 color: #fff; 4075 line-height: 1.2; 4076 margin-bottom: 1.5rem; 4077 font-weight: 400; 4078 } 4079 4080 @media (min-width: 768px) { 4081 .split-left-template--31746159903058__custom_feature_split_mrWCM4 h2 { 4082 font-size: 2.8rem; 4083 } 4084 } 4085 4086 .split-left-template--31746159903058__custom_feature_split_mrWCM4 h2 em { 4087 color: #f7e8a4; 4088 font-style: italic; 4089 font-family: Georgia, serif; 4090 } 4091 4092 .split-left-template--31746159903058__custom_feature_split_mrWCM4 p { 4093 font-size: 1rem; 4094 color: #a3a3a3; 4095 margin-bottom: 2.5rem; 4096 line-height: 1.6; 4097 } 4098 4099 .split-buttons-template--31746159903058__custom_feature_split_mrWCM4 { 4100 display: flex; 4101 gap: 1.5rem; 4102 align-items: center; 4103 flex-wrap: wrap; 4104 } 4105 4106 .split-btn-primary-template--31746159903058__custom_feature_split_mrWCM4 { 4107 background-color: #f7e8a4; 4108 color: #1a1a1a; 4109 padding: 0.8rem 1.6rem; 4110 border-radius: 4px; 4111 text-decoration: none; 4112 font-weight: 600; 4113 font-size: 0.9rem; 4114 transition: background-color 0.3s; 4115 } 4116 4117 .split-btn-primary-template--31746159903058__custom_feature_split_mrWCM4:hover { 4118 background-color: #e6d793; 4119 } 4120 4121 .split-btn-secondary-template--31746159903058__custom_feature_split_mrWCM4 { 4122 color: #fff; 4123 text-decoration: none; 4124 font-weight: 500; 4125 font-size: 0.9rem; 4126 display: flex; 4127 align-items: center; 4128 gap: 0.5rem; 4129 transition: opacity 0.3s; 4130 } 4131 4132 .split-btn-secondary-template--31746159903058__custom_feature_split_mrWCM4:hover { 4133 opacity: 0.7; 4134 } 4135 4136 .split-right-template--31746159903058__custom_feature_split_mrWCM4 { 4137 flex: 1; 4138 min-height: 400px; 4139 position: relative; 4140 z-index: 3; /* Döljer rutnätet under bilden men lÃ¥ter pilen synas ovanpÃ¥ */ 4141 } 4142 4143 .split-right-template--31746159903058__custom_feature_split_mrWCM4 img { 4144 position: absolute; 4145 top: 0; 4146 left: 0; 4147 width: 100%; 4148 height: 100%; 4149 object-fit: cover; 4150 } 4151</style> 4152 4153<div class="custom-split-template--31746159903058__custom_feature_split_mrWCM4"> 4154 <div class="grid-overlay-template--31746159903058__custom_feature_split_mrWCM4"></div> 4155 4156 <div class="split-left-template--31746159903058__custom_feature_split_mrWCM4"> 4157 <div class="split-content-inner-template--31746159903058__custom_feature_split_mrWCM4"> 4158 4159 <img src="//mondido.com/cdn/shop/files/shopify-logo.svg?v=1787915546&width=300" alt="Logo" class="split-logo-template--31746159903058__custom_feature_split_mrWCM4" loading="lazy"> 4160 4161 4162 <h2>Accept local payment<br>methods on <em>Shopify</em></h2> 4163 <p>Mondido offers an integrated solution with Shopify where you simply install our app from the Shopify App Store to access Swish, Vipps, card and many other payment methods.</p> 4164 4165 <div class="split-buttons-template--31746159903058__custom_feature_split_mrWCM4"> 4166 4167 <a href="/en/pages/shopify" class="split-btn-primary-template--31746159903058__custom_feature_split_mrWCM4">Learn more</a> 4168 4169 4170 4171 <a href="/en/pages/swish-sverige" class="split-btn-secondary-template--31746159903058__custom_feature_split_mrWCM4"> 4172 Get Swish for Shopify <span>â</span> 4173 </a> 4174 4175 </div> 4176 </div> 4177 </div> 4178 4179 <div class="split-right-template--31746159903058__custom_feature_split_mrWCM4"> 4180 4181 <img src="//mondido.com/cdn/shop/files/person-with-smartphone-min.jpg?v=1787915530&width=1200" alt="Feature" loading="lazy"> 4182 4183 </div> 4184</div></div><section id="shopify-section-template--31746159903058__iframe_embed_YLzcYQ" class="shopify-section section-full-width-iframe"><style> 4185 /* LÃ¥ter dig styra sektionens yttre avstÃ¥nd i bÃ¥de toppen och botten via temaredigeraren */ 4186 #shopify-section-template--31746159903058__iframe_embed_YLzcYQ { 4187 margin-top: 0px !important; 4188 margin-bottom: 0px !important; 4189 padding-top: 0 !important; 4190 padding-bottom: 0 !important; /* Säkerställer att temats egna padding inte spökar */ 4191 } 4192 4193 /* Styling för länken sÃ¥ den ärver butikens typsnitt och slipper understrykning */ 4194 .pricelist-custom-link { 4195 text-decoration: none !important; 4196 font-family: inherit; /* Gör att den använder samma font som resten av sidan */ 4197 color: #ffffff; 4198 } 4199</style> 4200 4201<div class="full-width-iframe-wrapper" style="width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;"><div style="background-color: #0e1014; padding-top: 0px; padding-bottom: 0px;"> 4202 4203 </div><div class="iframe-container" style="width: 100%;
4203 height: 1400px; overflow: hidden; background-color: #121212; display: flex;"> 4204 <iframe 4205 src="https://priskalkylator-pro.lovable.app/" 4206 style="width: 100%; height: 100%; border: none; display: block;" 4207 loading="lazy" 4208 scrolling="no" 4209 title="" 4210 ></iframe> 4211 </div><div style="background-color: #0e1014; padding-bottom: 0px;"></div><div style="background-color: #16181C; padding: 15px 0; text-align: center;"> 4212 <a href="/en/pages/prislista" class="pricelist-custom-link"> 4213 Explore our pricing 4214 </a> 4215 </div></div> 4216 4217</section><div id="shopify-section-template--31746159903058__custom_articles_gThqAD" class="shopify-section"> 4218 4219<style> 4220 /* Nollställer eventuella inbyggda marginaler från temat på själva containern */ 4221 #shopify-section-template--31746159903058__custom_articles_gThqAD { 4222 margin-top: 0px !important; 4223 } 4224 4225 .custom-articles-template--31746159903058__custom_articles_gThqAD { 4226 background-color: #faeee3; 4227 position: relative; 4228 width: 100%; 4229 overflow: hidden; 4230 /* Här används nu dina reglage istället för hårdkodade 6rem */ 4231 padding-top: 30px; 4232 padding-bottom: 0px; 4233 box-sizing: border-box !important; 4234 } 4235 4236 /* Globalt synkat rutnät med lite svagare linjer för den ljusa bakgrunden */ 4237 .grid-overlay-articles-template--31746159903058__custom_articles_gThqAD { 4238 position: absolute; 4239 top: 0; 4240 left: 50%; 4241 width: 100%; 4242 height: 100%; 4243 pointer-events: none; 4244 z-index: 1; 4245 background-image: linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); 4246 background-size: 25% 100%; 4247 background-position: left top; 4248 transform: translateX(-50%); 4249 } 4250 4251 /* Header (Rubrik & Pilar) */ 4252 .articles-header-template--31746159903058__custom_articles_gThqAD { 4253 position: relative; 4254 z-index: 2; 4255 display: flex; 4256 justify-content: space-between; 4257 align-items: flex-end; 4258 padding: 0 2rem 3rem 2rem !important; 4259 max-width: 100%; 4260 box-sizing: border-box !important; 4261 } 4262 4263 @media (min-width: 990px) { 4264 .articles-header-template--31746159903058__custom_articles_gThqAD { 4265 padding: 0 5% 3rem 5% !important; 4266 } 4267 } 4268 4269 .articles-header-template--31746159903058__custom_articles_gThqAD h2 { 4270 font-size: 2.5rem; 4271 color: #1a1a1a; 4272 font-weight: 500; 4273 margin: 0; 4274 } 4275 4276 .articles-nav-template--31746159903058__custom_articles_gThqAD { 4277 display: flex; 4278 gap: 1rem; 4279 } 4280 4281 .nav-btn-template--31746159903058__custom_articles_gThqAD { 4282 background: transparent; 4283 border: none; 4284 cursor: pointer; 4285 display: flex; 4286 align-items: center; 4287 justify-content: center; 4288 width: 40px; 4289 height: 40px; 4290 border-radius: 50%; 4291 transition: background-color 0.2s ease; 4292 color: #1a1a1a; 4293 } 4294 4295 .nav-btn-template--31746159903058__custom_articles_gThqAD:hover { 4296 background-color: rgba(0,0,0,0.05); 4297 } 4298 4299 .nav-btn-template--31746159903058__custom_articles_gThqAD svg { 4300 width: 20px; 4301 height: 20px; 4302 } 4303 4304 /* Listan med artiklar */ 4305 .articles-track-template--31746159903058__custom_articles_gThqAD { 4306 display: flex; 4307 gap: 2rem; 4308 overflow-x: auto; 4309 position: relative; 4310 z-index: 2; 4311 padding: 0 2rem 2rem 2rem !important; 4312 scroll-snap-type: x mandatory; 4313 scroll-behavior: smooth; 4314 -webkit-overflow-scrolling: touch; 4315 -ms-overflow-style: none; 4316 scrollbar-width: none; 4317 box-sizing: border-box !important; 4318 } 4319 4320 .articles-track-template--31746159903058__custom_articles_gThqAD::-webkit-scrollbar {
4321 display: none; 4322 } 4323 4324 @media (min-width: 990px) { 4325 .articles-track-template--31746159903058__custom_articles_gThqAD { 4326 padding-left: 5% !important; 4327 padding-right: 5% !important; 4328 gap: 2%; 4329 justify-content: center; 4330 } 4331 } 4332 4333 /* Artikel-kortet */ 4334 .article-card-template--31746159903058__custom_articles_gThqAD { 4335 flex: 0 0 80vw; 4336 display: flex; 4337 flex-direction: column; 4338 scroll-snap-align: start; 4339 } 4340 4341 @media (min-width: 768px) { 4342 .article-card-template--31746159903058__custom_articles_gThqAD { 4343 flex: 0 0 300px; 4344 } 4345 } 4346 4347 @media (min-width: 990px) { 4348 .article-card-template--31746159903058__custom_articles_gThqAD { 4349 flex: 0 0 21%; 4350 } 4351 } 4352 4353 .article-image-wrapper { 4354 position: relative; 4355 width: 100%; 4356 aspect-ratio: 4 / 5; 4357 border-radius: 8px; 4358 overflow: hidden; 4359 background-color: #fff; 4360 margin-bottom: 1.5rem; 4361 } 4362 4363 .article-image-wrapper img { 4364 width: 100%; 4365 height: 100%; 4366 object-fit: cover; 4367 transition: transform 0.5s ease; 4368 } 4369 4370 .article-card-template--31746159903058__custom_articles_gThqAD:hover .article-image-wrapper img { 4371 transform: scale(1.03); 4372 } 4373 4374 .article-tag { 4375 position: absolute; 4376 top: 1rem; 4377 left: 1rem; 4378 background-color: #f7e8a4; 4379 color: #1a1a1a; 4380 font-size: 0.8rem; 4381 font-weight: 600; 4382 padding: 0.3rem 0.8rem; 4383 border-radius: 20px; 4384 z-index: 2; 4385 } 4386 4387 .article-title { 4388 font-size: 1.3rem; 4389 font-weight: 500; 4390 color: #1a1a1a; 4391 line-height: 1.3; 4392 margin: 0 0 1rem 0; 4393 } 4394 4395 .article-excerpt { 4396 font-size: 0.95rem; 4397 color: #555; 4398 line-height: 1.5; 4399 margin: 0 0 1.5rem 0; 4400 } 4401 4402 .article-link { 4403 font-size: 0.95rem; 4404 color: #1a1a1a; 4405 font-weight: 500; 4406 text-decoration: underline; 4407 text-underline-offset: 4px; 4408 transition: opacity 0.3s ease; 4409 } 4410 4411 .article-link:hover { 4412 opacity: 0.7; 4413 } 4414</style><div class="custom-articles-template--31746159903058__custom_articles_gThqAD"> 4415 <div class="grid-overlay-articles-template--31746159903058__custom_articles_gThqAD"></div> 4416 4417 <div class="articles-header-template--31746159903058__custom_articles_gThqAD"> 4418 <h2>Latest Articles</h2> 4419 4420 <div class="articles-nav-template--31746159903058__custom_articles_gThqAD"> 4421 <button class="nav-btn-template--31746159903058__custom_articles_gThqAD" id="prev-template--31746159903058__custom_articles_gThqAD" aria-label="Previous"> 4422 <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> 4423 </button> 4424 <button class="nav-btn-template--31746159903058__custom_articles_gThqAD" id="next-template--31746159903058__custom_articles_gThqAD" aria-label="Next"> 4425 <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg> 4426 </button> 4427 </div> 4428 </div> 4429 4430 <div class="articles-track-template--31746159903058__custom_articles_gThqAD" id="track-template--31746159903058__custom_articles_gThqAD"> 4431 4432 <div class="article-card-template--31746159903058__custom_articles_gThqAD" > 4433 4434 <div class="article-image-wrapper"> 4435 4436 <span class="article-tag">Blog</span> 4437 4438 4439 4440 <img src="//mondido.com/cdn/shop/files/Renjith-e1745310009751.jpg?v=1787913355&width=600" alt="Behind the checkout: Renjith on Shopify, UX and conversion" loading="lazy"> 4441 4442 </div> 4443 4444 <h3 class="article-title">Behind the checkout: Renjith on Shopify, UX and conversion</h3> 4445 <p class="article-excerpt">Renjith shares what goes into building a great Shopify checkout â from UX decisions to payment method integrations.</p> 4446 4447 4448 <div> 4449 <span class="article-link" style="cursor: default;">Read more</span> 4450 </div> 4451 4452 4453 </div> 4454 4455 <div class="article-card-template--31746159903058__custom_articles_gThqAD" > 4456 4457 <div class="article-image-wrapper"> 4458
4459 <span class="article-tag">Newsroom</span> 4460 4461 4462 4463 <img src="//mondido.com/cdn/shop/files/Zaver-Checkout2.jpg?v=1787913368&width=600" alt="Mondido and Zaver announce exclusive partnership for Shopify merchants" loading="lazy"> 4464 4465 </div> 4466 4467 <h3 class="article-title">Mondido and Zaver announce exclusive partnership for Shopify merchants</h3> 4468 <p class="article-excerpt">Renjith shares what goes into building a great Shopify checkout â from UX decisions to payment method integrations.</p> 4469 4470 4471 <div> 4472 <span class="article-link" style="cursor: default;">Read more</span> 4473 </div> 4474 4475 4476 </div> 4477 4478 <div class="article-card-template--31746159903058__custom_articles_gThqAD" > 4479 4480 <div class="article-image-wrapper"> 4481 4482 <span class="article-tag">Newsroom</span> 4483 4484 4485 4486 <img src="//mondido.com/cdn/shop/files/E-commerce-conversion-1980x1080-1-e1733175410955.jpg?v=1787913416&width=600" alt="Mondido launches Vipps & MobilePay in Norway, Denmark & Finland" loading="lazy"> 4487 4488 </div> 4489 4490 <h3 class="article-title">Mondido launches Vipps & MobilePay in Norway, Denmark & Finland</h3> 4491 <p class="article-excerpt">Renjith shares what goes into building a great Shopify checkout â from UX decisions to payment method integrations.</p> 4492 4493 4494 <div> 4495 <span class="article-link" style="cursor: default;">Read more</span> 4496 </div> 4497 4498 4499 </div> 4500 4501 <div class="article-card-template--31746159903058__custom_articles_gThqAD" > 4502 4503 <div class="article-image-wrapper"> 4504 4505 <span class="article-tag">Blog</span> 4506 4507 4508 4509 <img src="//mondido.com/cdn/shop/files/girl-with-laptop.jpg?v=1787913407&width=600" alt="BNPL services for B2B merchants on Shopify: Boost sales with Two" loading="lazy"> 4510 4511 </div> 4512 4513 <h3 class="article-title">BNPL services for B2B merchants on Shopify: Boost sales with Two</h3> 4514 <p class="article-excerpt">Renjith shares what goes into building a great Shopify checkout â from UX decisions to payment method integrations.</p> 4515 4516 4517 <div> 4518 <span class="article-link" style="cursor: default;">Read more</span> 4519 </div> 4520 4521 4522 </div> 4523 4524 </div> 4525</div> 4526
4527<script> 4528 document.addEventListener('DOMContentLoaded', function() { 4529 const track = document.getElementById('track-template--31746159903058__custom_articles_gThqAD'); 4530 const prevBtn = document.getElementById('prev-template--31746159903058__custom_articles_gThqAD'); 4531 const nextBtn = document.getElementById('next-template--31746159903058__custom_articles_gThqAD'); 4532 4533 if (track && prevBtn && nextBtn) { 4534 const scrollAmount = window.innerWidth > 990 ? window.innerWidth * 0.25 : 320; 4535 4536 prevBtn.addEventListener('click', () => { 4537 track.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); 4538 }); 4539 4540 nextBtn.addEventListener('click', () => { 4541 track.scrollBy({ left: scrollAmount, behavior: 'smooth' }); 4542 }); 4543 } 4544 }); 4545</script>
4545</div><div id="shopify-section-template--31746159903058__custom_core_features_xgqkdD" class="shopify-section"> 4546 4547<style> 4548 .custom-core-template--31746159903058__custom_core_features_xgqkdD { 4549 display: flex; 4550 flex-direction: column; 4551 width: 100%; 4552 background-color: #fcfcfc; 4553 position: relative; 4554 overflow: hidden; 4555 } 4556 4557 @media (min-width: 768px) { 4558 .custom-core-template--31746159903058__custom_core_features_xgqkdD { 4559 flex-direction: row; 4560 } 4561 } 4562 4563 /* VÃNSTER SIDA (Mörk) */ 4564 .core-left-template--31746159903058__custom_core_features_xgqkdD { 4565 flex: 1; 4566 position: relative; 4567 padding: 6rem 2rem 4rem; 4568 display: flex; 4569 flex-direction: column; 4570 justify-content: flex-end; 4571 color: #ffffff; 4572 min-height: 500px; 4573 background-color: #1a1a1a; 4574 } 4575 4576 @media (min-width: 768px) { 4577 .core-left-template--31746159903058__custom_core_features_xgqkdD { 4578 padding: 6rem 5vw 4rem 10vw; 4579 } 4580 4581 /* Pilen som pekar in mot den ljusa sidan */ 4582 .core-left-template--31746159903058__custom_core_features_xgqkdD::after { 4583 content: ''; 4584 position: absolute; 4585 right: -40px; 4586 top: 50%; 4587 transform: translateY(-50%); 4588 width: 0; 4589 height: 0; 4590 border-top: 50px solid transparent; 4591 border-bottom: 50px solid transparent; 4592 border-left: 40px solid #2a2a2a; 4593 z-index: 10; 4594 } 4595 } 4596 4597 /* 4598 Rutnät enbart för den mörka halvan. 4599 Ligger nu pÃ¥ z-index: 1 sÃ¥ det hamnar UNDER bilden. 4600 */ 4601 .core-grid-left-template--31746159903058__custom_core_features_xgqkdD { 4602 position: absolute; 4603 top: 0; 4604 left: 50%; 4605 width: 100vw; 4606 height: 100%; 4607 pointer-events: none; 4608 z-index: 1; 4609 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 4610 background-size: 25vw 100%; 4611 background-position: left top; 4612 transform: translateX(-50%); 4613 } 4614 4615 /* Bilden ligger nu pÃ¥ z-index: 2 och täcker rutnätet helt */ 4616 .core-left-bg-template--31746159903058__custom_core_features_xgqkdD { 4617 position: absolute; 4618 top: 0; 4619 left: 0; 4620 width: 100%; 4621 height: 100%; 4622 object-fit: cover; 4623 z-index: 2; 4624 } 4625 4626 /* Toningen över bilden, z-index: 3 */ 4627 .core-left-overlay-template--31746159903058__custom_core_features_xgqkdD { 4628 position: absolute; 4629 top: 0; 4630 left: 0; 4631 width: 100%; 4632 height: 100%; 4633 background: linear-gradient(to bottom, rgba(26,26,26,0.1) 0%, rgba(26,26,26,0.9) 100%), linear-gradient(to right, transparent 50%, #2a2a2a 100%); 4634 z-index: 3; 4635 } 4636 4637 /* InnehÃ¥llet, z-index: 5 */ 4638 .core-left-content-template--31746159903058__custom_core_features_xgqkdD { 4639 position: relative; 4640 z-index: 5; 4641 max-width: 480px; 4642 } 4643 4644 .core-left-template--31746159903058__custom_core_features_xgqkdD h2 { 4645 font-size: 2.2rem; 4646 color: #fff; 4647 margin-bottom: 1.5rem; 4648 font-weight: 500; 4649 } 4650 4651 @media (min-width: 768px) { 4652 .core-left-template--31746159903058__custom_core_features_xgqkdD h2 { 4653 font-size: 3rem; 4654 } 4655 } 4656 4657 .core-left-template--31746159903058__custom_core_features_xgqkdD p { 4658 font-size: 1rem; 4659 color: #e0e0e0; 4660 margin-bottom: 2rem; 4661 line-height: 1.6; 4662 } 4663 4664 .core-btn-template--31746159903058__custom_core_features_xgqkdD { 4665 display: inline-block; 4666 background-color: #f7e8a4; 4667 color: #1a1a1a; 4668 padding: 0.8rem 1.8rem; 4669 border-radius: 4px; 4670 text-decoration: none; 4671 font-weight: 600; 4672 font-size: 0.9rem; 4673 transition: background-color 0.3s; 4674 } 4675 4676 .core-btn-template--31746159903058__custom_core_features_xgqkdD:hover { 4677 background-color: #e6d793; 4678 } 4679 4680 /* HÃGER SIDA (Ljus med 4 block) */ 4681 .core-right-template--31746159903058__custom_core_features_xgqkdD { 4682 flex: 1; 4683 display: grid; 4684 grid-template-columns: 1fr; 4685 position: relative; 4686 z-index: 4; 4687 } 4688 4689 @media (min-width: 768px) { 4690 .core-right-template--31746159903058__custom_core_features_xgqkdD { 4691 grid-template-columns: 1fr 1fr; 4692 } 4693 } 4694 4695 .core-feature-template--31746159903058__custom_core_features_xgqkdD { 4696 padding: 3rem 2rem; 4697 display: flex; 4698 flex-direction: column; 4699 justify-content: center; 4700 } 4701 4702 @media (min-width: 768px) { 4703 .core-feature-template--31746159903058__custom_core_features_xgqkdD { 4704 padding: 4rem 3rem; 4705 border-bottom: 1px solid rgba(0,0,0,0.04); 4706 } 4707 4708 .core-feature-template--31746159903058__custom_core_features_xgqkdD:nth-child(odd) { 4709 border-right: 1px solid rgba(0,0,0,0.06); 4710 } 4711 4712 .core-feature-template--31746159903058__custom_core_features_xgqkdD:nth-last-child(-n+2) { 4713 border-bottom: none; 4714 } 4715 } 4716 4717 .core-icon-wrapper-template--31746159903058__custom_core_features_xgqkdD { 4718 margin-bottom: 2rem; 4719 height: 40px; 4720 display: flex; 4721 align-items: center; 4722 } 4723 4724 .core-icon-wrapper-template--31746159903058__custom_core_features_xgqkdD img { 4725 max-height: 100%; 4726 width: auto; 4727 } 4728 4729 .core-icon-wrapper-template--31746159903058__custom_core_features_xgqkdD svg { 4730 max-height: 100%; 4731 width: auto; 4732 fill: #1a1a1a; 4733 } 4734 4735 .core-feature-template--31746159903058__custom_core_features_xgqkdD h3 { 4736 font-size: 1.3rem; 4737 color: #1a1a1a; 4738 margin-bottom: 1rem; 4739 font-weight: 500; 4740 } 4741 4742 .core-feature-template--31746159903058__custom_core_features_xgqkdD p { 4743 font-size: 0.95rem; 4744 color: #555; 4745 line-height: 1.6; 4746 margin: 0; 4747 } 4748</style> 4749 4750<div class="custom-core-template--31746159903058__custom_core_features_xgqkdD"> 4751 4752 <!-- Vänster halva (Mörk) --> 4753 <div class="core-left-template--31746159903058__custom_core_features_xgqkdD"> 4754 <div class="core-grid-left-template--31746159903058__custom_core_features_xgqkdD"></div> 4755 4756 4757 <img src="//mondido.com/cdn/shop/files/woman_phone_moody_portrait.jpg?v=1787913742&width=1200" alt="Core features" class="core-left-bg-template--31746159903058__custom_core_features_xgqkdD" loading="lazy"> 4758 4759 <div class="core-left-overlay-template--31746159903058__custom_core_features_xgqkdD"></div> 4760 4761 <div class="core-left-content-template--31746159903058__custom_core_features_xgqkdD"> 4762 <h2>Core features</h2> 4763 <p>Every situation is unique, and our goal is to deliver the best possible payment experience, tailored to meet both your business and your customers needs â every time</p> 4764 4765 <a href="https://admin.mondido.com/en" class="core-btn-template--31746159903058__custom_core_features_xgqkdD">Sign up</a> 4766 4767 </div> 4768 </div> 4769 4770 <!-- Höger halva (Ljus med 4 block) --> 4771 <div class="core-right-template--31746159903058__custom_core_features_xgqkdD"> 4772 4773 <div class="core-feature-template--31746159903058__custom_core_features_xgqkdD" > 4774 4775 <div class="core-icon-wrapper-template--31746159903058__custom_core_features_xgqkdD"> 4776 4777 <img src="//mondido.com/cdn/shop/files/rectangle.svg?v=1787914056&width=100" alt="Rule engine" loading="lazy"> 4778 4779 </div> 4780 4781 <h3>Rule engine</h3> 4782 <p>Analyse real-time transactions, enabling quick, automatic adjustments to the payment flow for each transaction.</p> 4783 4784 </div> 4785 4786 <div class="core-feature-template--31746159903058__custom_core_features_xgqkdD" > 4787 4788 <div class="core-icon-wrapper-template--31746159903058__custom_core_features_xgqkdD"> 4789 4790 <img src="//mondido.com/cdn/shop/files/steps.svg?v=1787914071&width=100" alt="Rule engine" loading="lazy"> 4791 4792 </div> 4793 4794 <h3>Rule engine</h3> 4795 <p>Analyse real-time transactions, enabling quick, automatic adjustments to the payment flow for each transaction.</p> 4796 4797 </div> 4798 4799 <div class="core-feature-template--31746159903058__custom_core_features_xgqkdD" > 4800 4801 <div class="core-icon-wrapper-template--31746159903058__custom_core_features_xgqkdD"> 4802 4803 <img src="//mondido.com/cdn/shop/files/steps_1.svg?v=1787914082&width=100" alt="Rule engine" loading="lazy"> 4804 4805 </div> 4806 4807 <h3>Rule engine</h3> 4808 <p>Analyse real-time transactions, enabling quick, automatic adjustments to the payment flow for each transaction.</p> 4809 4810 </div> 4811 4812 <div class="core-feature-template--31746159903058__custom_core_features_xgqkdD" > 4813 4814 <div class="core-icon-wrapper-template--31746159903058__custom_core_features_xgqkdD"> 4815 4816 <img src="//mondido.com/cdn/shop/files/rectangle_2.svg?v=1787914099&width=100" alt="Rule engine" loading="lazy"> 4817 4818 </div> 4819 4820 <h3>Rule engine</h3> 4821 <p>Analyse real-time transactions, enabling quick, automatic adjustments to the payment flow for each transaction.</p> 4822 4823 </div> 4824 4825 </div> 4826 4827</div></div><div id="shopify-section-template--31746159903058__custom_plans_jDmHwG" class="shopify-section"> 4828 4829<style> 4830 /* Nollställer standardmarginaler och lÃ¥ter dig styra det via Customize */ 4831 #shopify-section-template--31746159903058__custom_plans_jDmHwG { 4832 margin-top: 0px !important; 4833 margin-bottom: 0px !important; 4834 } 4835 4836 .custom-plans-template--31746159903058__custom_plans_jDmHwG { 4837 background-color: #fafafa; 4838 color: #1a1a1a; 4839 position: relative; 4840 width: 100%; 4841 overflow: hidden; 4842 padding-bottom: 0px; 4843 } 4844 4845 .grid-overlay-light-template--31746159903058__custom_plans_jDmHwG { 4846 position: absolute; 4847 top: 0; 4848 left: 50%; 4849 width: 100vw; 4850 height: 100%; 4851 pointer-events: none; 4852 z-index: 1; 4853 background-image: linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); 4854 background-size: 25vw 100%; 4855 background-position: left top; 4856 transform: translateX(-50%); 4857 } 4858 4859 .plans-inner-template--31746159903058__custom_plans_jDmHwG { 4860 display: flex; 4861 flex-direction: column; 4862 position: relative; 4863 z-index: 2; 4864 width: 100%; 4865 max-width: 100%; 4866 } 4867 4868 @media (min-width: 990px) { 4869 .plans-inner-template--31746159903058__custom_plans_jDmHwG { 4870 flex-direction: row; 4871 } 4872 } 4873 4874 .plans-left-template--31746159903058__custom_plans_jDmHwG { 4875 /* Skalar ner paddingen marginellt pÃ¥ mobilen sÃ¥ det inte blir onödigt stort */
4876 padding: calc(36px * 0.6) 2rem 4rem 2rem; 4877 width: 100%; 4878 } 4879 4880 @media (min-width: 990px) { 4881 .plans-left-template--31746159903058__custom_plans_jDmHwG { 4882 width: 25vw; 4883 /* Ersatt hårdkodade 6rem mot ditt nya reglage */ 4884 padding: 36px 3rem 4rem 5vw; 4885 flex-shrink: 0; 4886 } 4887 } 4888 4889 .plans-left-template--31746159903058__custom_plans_jDmHwG h2 { 4890 font-size: 2.5rem; 4891 color: #1a1a1a; 4892 margin-bottom: 1rem; 4893 font-weight: 500; 4894 } 4895 4896 .plans-left-template--31746159903058__custom_plans_jDmHwG p { 4897 font-size: 1rem; 4898 color: #555; 4899 line-height: 1.6; 4900 margin: 0; 4901 } 4902 4903 .plans-right-template--31746159903058__custom_plans_jDmHwG { 4904 width: 100%; 4905 display: flex; 4906 flex-direction: column; 4907 } 4908 4909 @media (min-width: 990px) { 4910 .plans-right-template--31746159903058__custom_plans_jDmHwG { 4911 width: 75vw; 4912 /* Ersatt hårdkodade 6rem som tryckte ner gula lådan */ 4913 padding-top: 36px; 4914 } 4915 } 4916 4917 .plan-card-template--31746159903058__custom_plans_jDmHwG { 4918 padding: 3rem 2rem; 4919 display: flex; 4920 flex-direction: column; 4921 gap: 2rem; 4922 border-bottom: 1px solid rgba(0,0,0,0.06); 4923 } 4924 4925 .plan-card-template--31746159903058__custom_plans_jDmHwG:last-child { 4926 border-bottom: none; 4927 } 4928 4929 .plan-card-template--31746159903058__custom_plans_jDmHwG.is-highlight { 4930 background-color: #f7e8a4; 4931 border-bottom: none; 4932 } 4933 4934 @media (min-width: 990px) { 4935 .plan-card-template--31746159903058__custom_plans_jDmHwG { 4936 padding: 4rem 0; 4937 } 4938 4939 .plan-row-top, .plan-row-bottom { 4940 display: flex; 4941 width: 100%; 4942 } 4943 4944 .plan-col-title { width: 33.333%; padding: 0 3rem; } 4945 .plan-col-desc { width: 66.666%; padding: 0 5vw 0 2rem; } 4946 } 4947 4948 .plan-icon { 4949 margin-bottom: 1.5rem; 4950 } 4951 4952 .plan-icon svg { 4953 width: 36px; 4954 height: 36px; 4955 fill: #1a1a1a; 4956 } 4957 4958 .plan-title { 4959 font-size: 1.8rem; 4960 font-weight: 500; 4961 color: #1a1a1a; 4962 margin: 0; 4963 } 4964 4965 .plan-desc { 4966 font-size: 1rem; 4967 color: #444; 4968 line-height: 1.6; 4969 margin: 0; 4970 max-width: 500px; 4971 } 4972 4973 .plan-features-list { 4974 list-style: none; 4975 padding: 0; 4976 margin: 0; 4977 display: flex; 4978 flex-direction: column; 4979 gap: 1rem; 4980 } 4981 4982 .plan-features-list li { 4983 display: flex; 4984 align-items: flex-start; 4985 font-size: 0.95rem; 4986 color: #1a1a1a; 4987 line-height: 1.4; 4988 } 4989 4990 .feat-check { 4991 display: inline-flex; 4992 align-items: center; 4993 justify-content: center; 4994 width: 22px; 4995 height: 22px; 4996 border-radius: 50%; 4997 margin-right: 12px; 4998 flex-shrink: 0; 4999 } 5000 5001 .is-highlight .feat-check { 5002 background-color: #1a1a1a; 5003 color: #f7e8a4; 5004 } 5005 5006 .is-normal .feat-check { 5007 background-color: #d1d5db; 5008 color: #1a1a1a; 5009 } 5010 5011 @media (min-width: 990px) { 5012 .plan-col-desc-flex { 5013 display: flex; 5014 justify-content: space-between; 5015 align-items: flex-end; 5016 gap: 2rem; 5017 } 5018 } 5019 5020 .plan-btn { 5021 display: inline-block; 5022 padding: 0.8rem 1.8rem; 5023 border-radius: 4px; 5024 text-decoration: none; 5025 font-weight: 600; 5026 font-size: 0.9rem; 5027 transition: all 0.3s ease; 5028 margin-top: 2rem; 5029 } 5030 5031 @media (min-width: 990px) { 5032 .plan-btn { margin-top: 0; } 5033 } 5034 5035 .is-highlight .plan-btn { 5036 background-color: #1a1a1a; 5037 color: #fff; 5038 } 5039 .is-highlight .plan-btn:hover { background-color: #333; } 5040 5041 .is-normal .plan-btn { 5042 background-color: #ced4da; 5043 color: #1a1a1a; 5044 } 5045 .is-normal .plan-btn:hover { background-color: #adb5bd; } 5046</style> 5047 5048 5049 5050<div class="custom-plans-template--31746159903058__custom_plans_jDmHwG"> 5051 <div class="grid-overlay-light-template--31746159903058__custom_plans_jDmHwG"></div> 5052 5053 <div class="plans-inner-template--31746159903058__custom_plans_jDmHwG"> 5054 <div class="plans-left-template--31746159903058__custom_plans_jDmHwG"> 5055 <h2>Plans</h2> 5056 <p>Our flexible plans are tailored to fit your needs. Since pricing varies based on your unique setup, we encourage you to reach out to our sales team.</p> 5057 </div> 5058 5059 <div class="plans-right-template--31746159903058__custom_plans_jDmHwG"> 5060 5061 5062 5063 <div class="plan-card-template--31746159903058__custom_plans_jDmHwG is-highlight" > 5064 5065 <div class="plan-row-top"> 5066 <div class="plan-col-title"> 5067 <div class="plan-icon"> 5068 5069 <svg viewBox="0 0 24 24">
5069<path d="M22 22H2v-4h4v-4h4v-4h4V6h4V2h4v20z"/></svg> 5070 5071 </div> 5072 <h3 class="plan-title">Shopify</h3> 5073 </div> 5074 5075 <div class="plan-col-desc"> 5076 <p class="plan-desc">Offer flexible payment methods for your Shopify store. Simply install our plugin from the Shopify App Store.</p> 5077 </div> 5078 </div> 5079 5080 <div class="plan-row-bottom"> 5081 <div class="plan-col-title"> 5082 <ul class="plan-features-list"> 5083 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Exclusive offer for Shopify Plus merchants</li> 5084 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Native Shopify app integration</li> 5085 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Enable PDF invoicing</li> 5086 </ul> 5087 </div> 5088 5089 <div class="plan-col-desc plan-col-desc-flex"> 5090 <ul class="plan-features-list"> 5091 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Multi-currency support</li> 5092 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Local payment methods</li> 5093 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Secure payment processing</li> 5094 </ul> 5095 5096 5097 <a href="/en/pages/shopify" class="plan-btn">Learn more</a> 5098 5099 </div> 5100 </div> 5101 5102 </div> 5103 5104 5105 5106 <div class="plan-card-template--31746159903058__custom_plans_jDmHwG is-normal" > 5107 5108 <div class="plan-row-top"> 5109 <div class="plan-col-title"> 5110 <div class="plan-icon"> 5111 5112 <svg viewBox="0 0 24 24"><path d="M22 22H2v-4h4v-4h4v-4h4V6h4V2h4v20z"/></svg> 5113 5114 </div> 5115 <h3 class="plan-title">Non-profit</h3> 5116 </div> 5117 5118 <div class="plan-col-desc"> 5119 <p class="plan-desc">A special offering for non-profit organisations, such as charities, clubs, and foundations.</p> 5120 </div> 5121 </div> 5122 5123 <div class="plan-row-bottom"> 5124 <div class="plan-col-title"> 5125 <ul class="plan-features-list"> 5126 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Exclusive offer for Shopify Plus merchants</li> 5127 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Native Shopify app integration</li> 5128 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Enable PDF invoicing</li> 5129 </ul> 5130 </div> 5131 5132 <div class="plan-col-desc plan-col-desc-flex"> 5133 <ul class="plan-features-list"> 5134 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
5134Multi-currency support</li> 5135 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Local payment methods</li> 5136 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Secure payment processing</li> 5137 </ul> 5138 5139 5140 <a href="/en/pages/non-profit" class="plan-btn">Learn more</a> 5141 5142 </div> 5143 </div> 5144 5145 </div> 5146 5147 5148 5149 <div class="plan-card-template--31746159903058__custom_plans_jDmHwG is-normal" > 5150 5151 <div class="plan-row-top"> 5152 <div class="plan-col-title"> 5153 <div class="plan-icon"> 5154 5155 <svg viewBox="0 0 24 24"><path d="M22 22H2v-4h4v-4h4v-4h4V6h4V2h4v20z"/></svg> 5156 5157 </div> 5158 <h3 class="plan-title">Other platforms</h3> 5159 </div> 5160 5161 <div class="plan-col-desc"> 5162 <p class="plan-desc">Read more about what you need to start integrating Mondido into other platform projects.</p> 5163 </div> 5164 </div> 5165 5166 <div class="plan-row-bottom"> 5167 <div class="plan-col-title"> 5168 <ul class="plan-features-list"> 5169 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Exclusive offer for Shopify Plus merchants</li> 5170 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Native Shopify app integration</li> 5171 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Enable PDF invoicing</li> 5172 </ul> 5173 </div> 5174 5175 <div class="plan-col-desc plan-col-desc-flex"> 5176 <ul class="plan-features-list"> 5177 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Multi-currency support</li> 5178 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Local payment methods</li> 5179 <li><span class="feat-check"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>Secure payment processing</li> 5180 </ul> 5181 5182 5183 <a href="/en/pages/products" class="plan-btn">Learn more</a> 5184 5185 </div> 5186 </div> 5187 5188 </div> 5189 5190 </div> 5191 </div> 5192</div></div><div id="shopify-section-template--31746159903058__custom_testimonials_rf94pj" class="shopify-section"> 5193 5194<style> 5195 /* Nollställer inbyggda marginaler och aktiverar dina sliders för yttermarginal */ 5196 #shopify-section-template--31746159903058__custom_testimonials_rf94pj { 5197 margin-top: 0px !important; 5198 margin-bottom: 0px !important; 5199 } 5200 5201 .custom-testi-template--31746159903058__custom_testimonials_rf94pj { 5202 background-color: #fafafa; 5203 position: relative; 5204 width: 100%; 5205 overflow: hidden; 5206 /* Här används dina dynamiska reglage istället för hårdkodade 6rem */ 5207 padding-top: 28px; 5208 padding-bottom: 0px; 5209 } 5210 5211 /* Globalt synkat rutnät */ 5212 .grid-overlay-light-template--31746159903058__custom_testimonials_rf94pj { 5213 position: absolute; 5214 top: 0; 5215 left: 50%; 5216 width: 100vw; 5217 height: 100%; 5218 pointer-events: none; 5219 z-index: 1; 5220 background-image: linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); 5221 background-size: 25vw 100%; 5222 background-position: left top; 5223 transform: translateX(-50%); 5224 } 5225 5226 /* Header-sektionen med Rubrik och Text */ 5227 .testi-header-template--31746159903058__custom_testimonials_rf94pj { 5228 position: relative; 5229 z-index: 2; 5230 display: flex; 5231 flex-direction: column; 5232 padding: 0 2rem 4rem; 5233 max-width: 100%; 5234 } 5235 5236 @media (min-width: 990px) { 5237 .testi-header-template--31746159903058__custom_testimonials_rf94pj { 5238 flex-direction: row; 5239 padding: 0 0 5rem; 5240 } 5241 5242 /* Tom kolumn för att putta in innehållet till 25vw-strecket */
5243 .t-col-empty { width: 25vw; flex-shrink: 0; } 5244 5245 /* Titeln sitter mellan 25vw och 50vw */ 5246 .t-col-title { width: 25vw; padding: 0 2rem; flex-shrink: 0; } 5247 5248 /* Texten sitter mellan 50vw och 100vw */ 5249 .t-col-desc { width: 50vw; padding: 0 5vw 0 2rem; max-width: 550px; } 5250 } 5251 5252 .testi-header-template--31746159903058__custom_testimonials_rf94pj h2 { 5253 font-size: 2.5rem; 5254 color: #1a1a1a; 5255 font-weight: 500; 5256 margin: 0 0 1.5rem 0; 5257 } 5258 5259 .testi-header-template--31746159903058__custom_testimonials_rf94pj p { 5260 font-size: 1rem; 5261 color: #555; 5262 line-height: 1.6; 5263 margin: 0; 5264 } 5265 5266 /* Den horisontellt skrollande listan */ 5267 .testi-track-template--31746159903058__custom_testimonials_rf94pj { 5268 display: flex; 5269 gap: 2rem; 5270 overflow-x: auto; 5271 position: relative; 5272 z-index: 2; 5273 padding: 0 2rem 2rem 2rem; 5274 scroll-snap-type: x mandatory; 5275 scroll-behavior: smooth; 5276 -webkit-overflow-scrolling: touch; 5277 /* Dölj scrollbar för snyggare look */ 5278 -ms-overflow-style: none; 5279 scrollbar-width: none; 5280 } 5281 5282 .testi-track-template--31746159903058__custom_testimonials_rf94pj::-webkit-scrollbar {
5283 display: none; 5284 } 5285 5286 @media (min-width: 990px) { 5287 .testi-track-template--31746159903058__custom_testimonials_rf94pj { 5288 /* Börjar exakt pÃ¥ 25vw-strecket för att matcha rubriken */ 5289 padding-left: 25vw; 5290 padding-right: 5vw; 5291 } 5292 } 5293 5294 /* Själva recensionskortet */ 5295 .testi-card-template--31746159903058__custom_testimonials_rf94pj { 5296 flex: 0 0 85vw; /* Tar upp nästan hela skärmen pÃ¥ mobil */ 5297 background: #fafafa; 5298 border: 1px solid rgba(0,0,0,0.08); 5299 padding: 2.5rem 2rem; 5300 display: flex; 5301 flex-direction: column; 5302 justify-content: space-between; 5303 scroll-snap-align: start; 5304 min-height: 280px; 5305 } 5306 5307 @media (min-width: 768px) { 5308 .testi-card-template--31746159903058__custom_testimonials_rf94pj { 5309 flex: 0 0 420px; /* Fast bredd pÃ¥ desktop */ 5310 padding: 3rem 2.5rem; 5311 } 5312 } 5313 5314 .testi-card-top { 5315 display: flex; 5316 gap: 1.2rem; 5317 align-items: flex-start; 5318 } 5319 5320 .testi-avatar { 5321 width: 34px; 5322 height: 34px; 5323 background-color: #f7e8a4; 5324 border-radius: 50%; 5325 display: flex; 5326 align-items: center; 5327 justify-content: center; 5328 font-weight: 600; 5329 font-size: 0.95rem; 5330 color: #1a1a1a; 5331 flex-shrink: 0; 5332 } 5333 5334 .testi-quote { 5335 font-size: 1.15rem; 5336 line-height: 1.6; 5337 color: #333; 5338 margin: 0; 5339 font-weight: 400; 5340 } 5341 5342 .testi-stars { 5343 display: flex; 5344 justify-content: flex-end; 5345 margin-top: 2rem; 5346 gap: 4px; 5347 } 5348 5349 .testi-stars svg { 5350 width: 18px; 5351 height: 18px; 5352 fill: #ffb800; /* Guld/Orange färg */ 5353 } 5354</style> 5355 5356 5357 5358<div class="custom-testi-template--31746159903058__custom_testimonials_rf94pj"> 5359 <div class="grid-overlay-light-template--31746159903058__custom_testimonials_rf94pj"></div> 5360 5361 <!-- Rubrik & Text --> 5362 <div class="testi-header-template--31746159903058__custom_testimonials_rf94pj"> 5363 <div class="t-col-empty"></div> 5364 <div class="t-col-title"> 5365 <h2>Testimonials</h2> 5366 </div> 5367 <div class="t-col-desc"> 5368 <p>Hear from our customers who are boosting their sales and achieving higher conversions with Mondido.</p> 5369 </div> 5370 </div> 5371 5372 <!-- Skrollbara kort --> 5373 <div class="testi-track-template--31746159903058__custom_testimonials_rf94pj"> 5374 5375 <div class="testi-card-template--31746159903058__custom_testimonials_rf94pj" > 5376 5377 <div class="testi-card-top"> 5378 <div class="testi-avatar">s</div> 5379 <p class="testi-quote">âEasy and smooth installation! Very good support from customer service during onboarding.â</p> 5380 </div> 5381 5382 <div class="testi-stars"> 5383 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5384 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5385 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5386 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5387 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5388 </div> 5389 5390 </div> 5391 5392 <div class="testi-card-template--31746159903058__custom_testimonials_rf94pj" > 5393 5394 <div class="testi-card-top"> 5395 <div class="testi-avatar">s</div> 5396 <p class="testi-quote">âWe have been looking for a way to offer Swish on our e-commerce site for a long time. Mondido has worked as smoothly as possible. Quick and easy, very good service! â highly recommended!â</p> 5397 </div> 5398 5399 <div class="testi-stars"> 5400 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5401 <svg viewBox="0 0 24 24">
5401<path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5402 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5403 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5404 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5405 </div> 5406 5407 </div> 5408 5409 <div class="testi-card-template--31746159903058__custom_testimonials_rf94pj" > 5410 5411 <div class="testi-card-top"> 5412 <div class="testi-avatar">s</div> 5413 <p class="testi-quote">âEasy and smooth installation! Very good support from customer service during onboarding.â</p> 5414 </div> 5415 5416 <div class="testi-stars"> 5417 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5418 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5419 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5420 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5421 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5422 </div> 5423 5424 </div> 5425 5426 <div class="testi-card-template--31746159903058__custom_testimonials_rf94pj" > 5427 5428 <div class="testi-card-top"> 5429 <div class="testi-avatar">s</div> 5430 <p class="testi-quote">âWe have been looking for a way to offer Swish on our e-commerce site for a long time. Mondido has worked as smoothly as possible. Quick and easy, very good service! â highly recommended!â</p> 5431 </div> 5432 5433 <div class="testi-stars"> 5434 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5435 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5436 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5437 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5438 <svg viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.4 8.168L12 18.896l-7.334 3.858 1.4-8.168-5.934-5.787 8.2-1.192z"/></svg> 5439 </div> 5440 5441 </div> 5442 5443 </div> 5444</div></div><div id="shopify-section-template--31746159903058__custom_image_text_reversed_igkGgp" class="shopify-section"> 5445 5446<style> 5447 .custom-passionate-template--31746159903058__custom_image_text_reversed_igkGgp { 5448 display: flex; 5449 flex-direction: column; 5450 width: 100%; 5451 position: relative; 5452 overflow: hidden; 5453 background-color: #1a1a1a; 5454 } 5455 5456 @media (min-width: 990px) { 5457 .custom-passionate-template--31746159903058__custom_image_text_reversed_igkGgp { 5458 flex-direction: row; 5459 } 5460 } 5461 5462 /* VÃNSTER SIDA (Helt vanlig bild) */ 5463 .passionate-left-template--31746159903058__custom_image_text_reversed_igkGgp { 5464 flex: 1; 5465 min-height: 400px; 5466 position: relative; 5467 z-index: 1; /* Ligger under triangeln */ 5468 display: flex; 5469 } 5470 5471 .passionate-left-template--31746159903058__custom_image_text_reversed_igkGgp img, 5472 .passionate-left-template--31746159903058__custom_image_text_reversed_igkGgp svg { 5473 position: absolute; 5474 top: 0; 5475 left: 0; 5476 width: 100%; 5477 height: 100%; 5478 object-fit: cover; 5479 display: block; 5480 } 5481 5482 /* HÃGER SIDA (Mörk bakgrund med text) */ 5483 .passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp { 5484 flex: 1; 5485 padding: 4rem 2rem; 5486 position: relative; 5487 z-index: 2; /* Ligger över bilden */ 5488 display: flex; 5489 flex-direction: column; 5490 justify-content: center; 5491 background-color: #1a1a1a; 5492 } 5493 5494 @media (min-width: 990px) { 5495 .passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp { 5496 padding: 6rem 10vw 6rem 5vw; 5497 } 5498 5499 /* CSS-pilen (triangeln) som pekar VÃNSTER in över bilden */ 5500 .passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp::before { 5501 content: ''; 5502 position: absolute; 5503 left: -40px; 5504 top: 50%; 5505 transform: translateY(-50%); 5506 width: 0; 5507 height: 0; 5508 border-top: 40px solid transparent; 5509 border-bottom: 40px solid transparent; 5510 border-right: 40px solid #1a1a1a; 5511 z-index: 10; 5512 } 5513 } 5514 5515 /* Rutnätet placeras BARA i den mörka högra rutan */ 5516 .grid-overlay-right-template--31746159903058__custom_image_text_reversed_igkGgp { 5517 position: absolute; 5518 top: 0; 5519 left: 0; 5520 width: 100vw; 5521 height: 100%; 5522 pointer-events: none; 5523 z-index: 1; 5524 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 5525 background-size: 25vw 100%; 5526 background-position: left top; 5527 } 5528 5529 @media (min-width: 990px) { 5530 .grid-overlay-right-template--31746159903058__custom_image_text_reversed_igkGgp { 5531 /* Förskjuter rutnätet sÃ¥ att det matchar perfekt med övriga sektioner pÃ¥ sidan */ 5532 transform: translateX(-50vw); 5533 } 5534 } 5535 5536 /* Text-innehÃ¥llet */ 5537 .passionate-content-inner-template--31746159903058__custom_image_text_reversed_igkGgp { 5538 max-width: 500px; 5539 position: relative; 5540 z-index: 5; /* Ligger över rutnätet */ 5541 } 5542 5543 .passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp h2 { 5544 font-size: 2.2rem; 5545 color: #fff; 5546 line-height: 1.2; 5547 margin-bottom: 1.5rem; 5548 font-weight: 400; 5549 } 5550 5551 @media (min-width: 990px) { 5552 .passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp h2 { 5553 font-size: 2.8rem; 5554 } 5555 } 5556 5557 /* Tvingar fram guld och kursiv pÃ¥ <em> */ 5558 .passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp h2 em { 5559 color: #f7e8a4 !important; 5560 font-style: italic; 5561 } 5562 5563 .passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp p { 5564 font-size: 1rem; 5565 color: #a3a3a3; 5566 margin-bottom: 2.5rem; 5567 line-height: 1.6; 5568 } 5569 5570 /* Knapp */ 5571 .passionate-btn-template--31746159903058__custom_image_text_reversed_igkGgp { 5572 display: inline-block; 5573 background-color: transparent; 5574 color: #ffffff; 5575 padding: 0.8rem 1.8rem; 5576 border-radius: 4px; 5577 text-decoration: none; 5578 font-weight: 500; 5579 font-size: 0.9rem; 5580 border: 1px solid rgba(255,255,255,0.3); 5581 transition: all 0.3s ease; 5582 } 5583 5584 .passionate-btn-template--31746159903058__custom_image_text_reversed_igkGgp:hover { 5585 border-color: #ffffff; 5586 background-color: rgba(255,255,255,0.05); 5587 } 5588</style> 5589 5590<div class="custom-passionate-template--31746159903058__custom_image_text_reversed_igkGgp"> 5591 5592 <!-- Vänster halva (Ren bild) --> 5593 <div class="passionate-left-template--31746159903058__custom_image_text_reversed_igkGgp"> 5594 5595 <img src="//mondido.com/cdn/shop/files/person-sitting-with-smartphone-min_1.jpg?v=1787915116&width=1200" alt="Image" loading="lazy"> 5596 5597 </div> 5598 5599 <!-- Höger halva (Mörk med pil som sticker ut till vänster) --> 5600 <div class="passionate-right-template--31746159903058__custom_image_text_reversed_igkGgp"> 5601 <div class="grid-overlay-right-template--31746159903058__custom_image_text_reversed_igkGgp"></div> 5602 5603 <div class="passionate-content-inner-template--31746159903058__custom_image_text_reversed_igkGgp"> 5604 <h2>Weâre passionate about payments</h2> 5605 <p>At Mondido, weâre driven by high conversion rates and believe in uncomplicated payments, seamlessly integrated
5605with your e-commerce solution.</p> 5606 5607 5608 <a href="/en/pages/about-us" class="passionate-btn-template--31746159903058__custom_image_text_reversed_igkGgp">About us</a> 5609 5610 </div> 5611 </div> 5612</div></div><div id="shopify-section-template--31746159903058__custom_faq_FaeRDc" class="shopify-section"> 5613 5614<style> 5615 /* Nollställer temats standardmarginaler och kopplar dina nya sliders för yttre marginaler */ 5616 #shopify-section-template--31746159903058__custom_faq_FaeRDc { 5617 margin-top: 0px !important; 5618 margin-bottom: 0px !important; 5619 } 5620 5621 .custom-faq-template--31746159903058__custom_faq_FaeRDc { 5622 background-color: #1a1a1a; 5623 color: #ffffff; 5624 position: relative; 5625 width: 100%; 5626 overflow: hidden; 5627 /* Bottenluften styrs nu av reglaget istället för fasta värden pÃ¥ kolumnerna */ 5628 padding-bottom: 34px; 5629 } 5630 5631 /* Exakt samma globala rutnät som i Hero-sektionen */ 5632 .grid-overlay-dark-template--31746159903058__custom_faq_FaeRDc { 5633 position: absolute; 5634 top: 0; 5635 left: 50%; 5636 width: 100vw; 5637 height: 100%; 5638 pointer-events: none; 5639 z-index: 1; 5640 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 5641 background-size: 25vw 100%; 5642 background-position: left top; 5643 transform: translateX(-50%); 5644 } 5645 5646 /* Centrerad maxbredd för att synka perfekt med Hero-sektionens layout */ 5647 .faq-inner-template--31746159903058__custom_faq_FaeRDc { 5648 display: flex; 5649 flex-direction: column; 5650 position: relative; 5651 z-index: 2; 5652 width: 100%; 5653 max-width: 1400px; 5654 margin: 0 auto; 5655 } 5656 5657 @media (min-width: 990px) { 5658 .faq-inner-template--31746159903058__custom_faq_FaeRDc { 5659 flex-direction: row; 5660 } 5661 } 5662 5663 /* VÃNSTER KOLUMN (Rubrik & Info) */ 5664 .faq-left-template--31746159903058__custom_faq_FaeRDc { 5665 /* Lite smalare padding i toppen pÃ¥ mobilen sÃ¥ att det ser bra ut */ 5666 padding: calc(38px * 0.6) 2rem 4rem 2rem; 5667 width: 100%; 5668 } 5669 5670 @media (min-width: 990px) { 5671 .faq-left-template--31746159903058__custom_faq_FaeRDc { 5672 width: 33.333%; 5673 /* Ersätter hÃ¥rdkodad "6rem" mot reglaget */ 5674 padding: 38px 3rem 4rem 1rem; 5675 flex-shrink: 0; 5676 } 5677 } 5678 5679 .faq-left-template--31746159903058__custom_faq_FaeRDc h2 { 5680 font-size: 2.5rem; 5681 color: #ffffff; 5682 margin-bottom: 1.5rem; 5683 font-weight: 500; 5684 } 5685 5686 .faq-left-template--31746159903058__custom_faq_FaeRDc p { 5687 font-size: 1rem; 5688 color: #a3a3a3; 5689 line-height: 1.6; 5690 margin-bottom: 2.5rem; 5691 } 5692 5693 .faq-btn-template--31746159903058__custom_faq_FaeRDc { 5694 display: inline-block; 5695 background-color: #f7e8a4; 5696 color: #1a1a1a; 5697 padding: 0.8rem 1.8rem; 5698 border-radius: 4px; 5699 text-decoration: none; 5700 font-weight: 600; 5701 font-size: 0.9rem; 5702 transition: background-color 0.3s ease; 5703 } 5704 5705 .faq-btn-template--31746159903058__custom_faq_FaeRDc:hover { 5706 background-color: #e6d793; 5707 } 5708 5709 /* HÃGER KOLUMN (FAQ-listan) */ 5710 .faq-right-template--31746159903058__custom_faq_FaeRDc { 5711 width: 100%; 5712 display: flex; 5713 flex-direction: column; 5714 } 5715 5716 @media (min-width: 990px) { 5717 .faq-right-template--31746159903058__custom_faq_FaeRDc { 5718 width: 66.666%; 5719 /* Ersätter hÃ¥rdkodad "6rem" mot reglaget */ 5720 padding-top: 38px; 5721 } 5722 } 5723 5724 /* INDIVIDUELL FAQ ITEM - Solid bakgrundsfärg (#1a1a1a) döljer rutnätet helt */ 5725 .faq-item-template--31746159903058__custom_faq_FaeRDc { 5726 background-color: #1a1a1a; 5727 border-bottom: 1px solid rgba(255,255,255,0.1); 5728 transition: background-color 0.3s ease, color 0.3s ease; 5729 } 5730 5731 .faq-item-template--31746159903058__custom_faq_FaeRDc:first-child { 5732 border-top: 1px solid rgba(255,255,255,0.1); 5733 } 5734 5735 .faq-question-template--31746159903058__custom_faq_FaeRDc { 5736 padding: 1.5rem 2rem; 5737 display: flex; 5738 justify-content: space-between; 5739 align-items: center; 5740 cursor: pointer; 5741 user-select: none; 5742 } 5743 5744 @media (min-width: 990px) { 5745 .faq-question-template--31746159903058__custom_faq_FaeRDc { 5746 padding: 2rem 3rem; 5747 } 5748 } 5749 5750 .faq-question-template--31746159903058__custom_faq_FaeRDc h3 { 5751 font-size: 1.3rem; 5752 font-weight: 500; 5753 margin: 0; 5754 padding-right: 2rem; 5755 color: inherit; 5756 } 5757 5758 .faq-icon { 5759 flex-shrink: 0; 5760 width: 24px; 5761 height: 24px; 5762 position: relative; 5763 display: flex; 5764 align-items: center; 5765 justify-content: center; 5766 } 5767 5768 .faq-icon::before, .faq-icon::after { 5769 content: ''; 5770 position: absolute; 5771 background-color: currentColor; 5772 transition: transform 0.3s ease; 5773 } 5774 5775 .faq-icon::before { 5776 width: 16px; 5777 height: 2px; 5778 } 5779 5780 .faq-icon::after { 5781 width: 2px; 5782 height: 16px; 5783 } 5784 5785 /* Svaret med mjuk CSS Grid-animation */ 5786 .faq-answer-wrapper-template--31746159903058__custom_faq_FaeRDc { 5787 display: grid; 5788 grid-template-rows: 0fr; 5789 transition: grid-template-rows 0.3s ease; 5790 } 5791 5792 .faq-answer-inner-template--31746159903058__custom_faq_FaeRDc { 5793 overflow: hidden; 5794 } 5795 5796 .faq-answer-content-template--31746159903058__custom_faq_FaeRDc { 5797 padding: 0 2rem 1.5rem 2rem; 5798 font-size: 1rem; 5799 line-height: 1.6; 5800 } 5801 5802 @media (min-width: 990px) { 5803 .faq-answer-content-template--31746159903058__custom_faq_FaeRDc { 5804 padding: 0 5vw 2rem 3rem; 5805 max-width: 900px; 5806 } 5807 } 5808 5809 .faq-answer-content-template--31746159903058__custom_faq_FaeRDc a { 5810 color: inherit; 5811 text-decoration: underline; 5812 } 5813 5814 /* AKTIVT LÃGE (Gul bakgrund) */ 5815 .faq-item-template--31746159903058__custom_faq_FaeRDc.is-active { 5816 background-color: #f7e8a4; 5817 color: #1a1a1a; 5818 border-color: #f7e8a4; 5819 } 5820 5821 .faq-item-template--31746159903058__custom_faq_FaeRDc.is-active .faq-icon::after { 5822 transform: rotate(90deg); 5823 } 5824 5825 .faq-item-template--31746159903058__custom_faq_FaeRDc.is-active .faq-answer-wrapper-template--31746159903058__custom_faq_FaeRDc { 5826 grid-template-rows: 1fr; 5827 } 5828</style> 5829 5830<div class="custom-faq-template--31746159903058__custom_faq_FaeRDc"> 5831 <div class="grid-overlay-dark-template--31746159903058__custom_faq_FaeRDc"></div> 5832 5833 <div class="faq-inner-template--31746159903058__custom_faq_FaeRDc"> 5834 5835 <!-- Vänster sida --> 5836 <div class="faq-left-template--31746159903058__custom_faq_FaeRDc"> 5837 <h2>FAQ</h2> 5838 <p>Questions? Here youâll find the answers to common questions along with helpful instructions and support details.</p> 5839 5840 <a href="" class="faq-btn-template--31746159903058__custom_faq_FaeRDc">Learn more</a> 5841 5842 </div> 5843 5844 <!-- Höger sida (FrÃ¥gor) --> 5845 <div class="faq-right-template--31746159903058__custom_faq_FaeRDc"> 5846 5847 <div class="faq-item-template--31746159903058__custom_faq_FaeRDc is-active" > 5848 5849 <div class="faq-question-template--31746159903058__custom_faq_FaeRDc"> 5850 <h3>How do I get started with a Mondido account?</h3>
5851 <span class="faq-icon"></span> 5852 </div> 5853 5854 <div class="faq-answer-wrapper-template--31746159903058__custom_faq_FaeRDc"> 5855 <div class="faq-answer-inner-template--31746159903058__custom_faq_FaeRDc"> 5856 <div class="faq-answer-content-template--31746159903058__custom_faq_FaeRDc"> 5857 <p>To get started, create an account on our platform, complete the onboarding process, and integrate your payment methods of choice.</p> 5858 </div> 5859 </div> 5860 </div> 5861 5862 </div> 5863 5864 <div class="faq-item-template--31746159903058__custom_faq_FaeRDc " > 5865 5866 <div class="faq-question-template--31746159903058__custom_faq_FaeRDc"> 5867 <h3>How do I get started with Swish in Sweden?</h3> 5868 <span class="faq-icon"></span> 5869 </div> 5870 5871 <div class="faq-answer-wrapper-template--31746159903058__custom_faq_FaeRDc"> 5872 <div class="faq-answer-inner-template--31746159903058__custom_faq_FaeRDc"> 5873 <div class="faq-answer-content-template--31746159903058__custom_faq_FaeRDc"> 5874 <p>First, order a Swish Commerce agreement from your bank and designate Mondido Payments as your Technical Supplier. Once your Swish number is active, complete your Mondido account setup and add your new Swish number. For detailed instructions, visit our <a href="https://support.mondido.com/getting-started-with-swish">Getting Started Guide</a>.</p> 5875 </div> 5876 </div> 5877 </div> 5878 5879 </div> 5880 5881 <div class="faq-item-template--31746159903058__custom_faq_FaeRDc " > 5882 5883 <div class="faq-question-template--31746159903058__custom_faq_FaeRDc"> 5884 <h3>Can I use Swish, Vipps and MobilePay with Shopify?</h3> 5885 <span class="faq-icon"></span> 5886 </div> 5887 5888 <div class="faq-answer-wrapper-template--31746159903058__custom_faq_FaeRDc"> 5889 <div class="faq-answer-inner-template--31746159903058__custom_faq_FaeRDc"> 5890 <div class="faq-answer-content-template--31746159903058__custom_faq_FaeRDc"> 5891 <p>Yes! Make sure you have set up an Mondido account and applied for the payment methods you would like to enable. Then, install and activate the <a href="https://apps.shopify.com/mondido">Mondido Payments app in Shopify </a>to start accepting payments. For detailed instructions, visit our<a href="https://support.mondido.com/integrate-mondido-in-shopify">Help Center integration guide.</a></p> 5892 </div> 5893 </div> 5894 </div> 5895 5896 </div> 5897 5898 <div class="faq-item-template--31746159903058__custom_faq_FaeRDc " > 5899 5900 <div class="faq-question-template--31746159903058__custom_faq_FaeRDc"> 5901 <h3>Can I change the name of payment methods in Shopify?</h3> 5902 <span class="faq-icon"></span> 5903 </div> 5904 5905 <div class="faq-answer-wrapper-template--31746159903058__custom_faq_FaeRDc"> 5906 <div class="faq-answer-inner-template--31746159903058__custom_faq_FaeRDc"> 5907 <div class="faq-answer-content-template--31746159903058__custom_faq_FaeRDc"> 5908 <p>By installing Checkout Manager by Mondido you can change the name of any payment method in the Shopify checkout. For detailed instructions, visit our <a href="https://support.mondido.com/change-text-in-shopify-checkout-checkout-manager">Help Center guide</a>.</p> 5909 </div> 5910 </div> 5911 </div> 5912 5913 </div> 5914 5915 </div> 5916 5917 </div> 5918</div> 5919
5920<script> 5921 document.addEventListener('DOMContentLoaded', function() { 5922 const questions = document.querySelectorAll('.custom-faq-template--31746159903058__custom_faq_FaeRDc .faq-question-template--31746159903058__custom_faq_FaeRDc'); 5923 5924 questions.forEach(button => { 5925 button.addEventListener('click', () => { 5926 const item = button.closest('.faq-item-template--31746159903058__custom_faq_FaeRDc'); 5927 const isActive = item.classList.contains('is-active'); 5928 5929 // Stäng alla andra 5930 document.querySelectorAll('.custom-faq-template--31746159903058__custom_faq_FaeRDc .faq-item-template--31746159903058__custom_faq_FaeRDc').forEach(el => { 5931 el.classList.remove('is-active'); 5932 }); 5933 5934 // Ãppna om den var stängd 5935 if (!isActive) { 5936 item.classList.add('is-active'); 5937 } 5938 }); 5939 }); 5940 }); 5941</script>
5941</div><div id="shopify-section-template--31746159903058__custom_connect_qybAQ7" class="shopify-section"> 5942 5943<style> 5944 /* Nollställer temats standardmarginaler och aktiverar dina sliders */ 5945 #shopify-section-template--31746159903058__custom_connect_qybAQ7 { 5946 margin-top: 0px !important; 5947 margin-bottom: 0px !important; 5948 } 5949 5950 .custom-connect-template--31746159903058__custom_connect_qybAQ7 { 5951 background-color: #1a1a1a; 5952 position: relative; 5953 width: 100%; 5954 /* PÃ¥ mobilen skalar vi luften lite sÃ¥ den inte känns överdrivet stor, sidoluften (1rem) behÃ¥lls */ 5955 padding: calc(0px * 0.6) 1rem calc(0px * 0.6) 1rem; 5956 overflow: hidden; 5957 } 5958 5959 @media (min-width: 990px) { 5960 .custom-connect-template--31746159903058__custom_connect_qybAQ7 { 5961 /* PÃ¥ dator används ditt exakta värde. Sidoluften (5vw) behÃ¥lls. */ 5962 padding: 0px 5vw 0px 5vw; 5963 } 5964 } 5965 5966 /* 5967 Rutnätet ligger över hela sektionen. 5968 z-index: 2 lägger det över bakgrunden. 5969 */ 5970 .grid-overlay-dark-template--31746159903058__custom_connect_qybAQ7 { 5971 position: absolute; 5972 top: 0; 5973 left: 50%; 5974 width: 100vw; 5975 height: 100%; 5976 pointer-events: none; 5977 z-index: 2; 5978 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 5979 background-size: 25vw 100%; 5980 background-position: left top; 5981 transform: translateX(-50%); 5982 } 5983 5984 /* Gemensam container-setup */ 5985 .connect-card-template--31746159903058__custom_connect_qybAQ7 { 5986 position: relative; 5987 max-width: 1200px; 5988 margin: 0 auto; 5989 border-radius: 12px; 5990 display: flex; 5991 z-index: 3; /* Lägger hela kortet över rutnätet sÃ¥ det inte ligger över bilden i rektangel-läge */ 5992 } 5993 5994 .connect-bg-template--31746159903058__custom_connect_qybAQ7 img { 5995 width: 100%; 5996 height: 100%; 5997 object-fit: cover; 5998 } 5999 6000 /* ----------------------------------------------------- 6001 LAYOUT: GRADIENT (Standard) 6002 ----------------------------------------------------- */ 6003 .layout-gradient { 6004 flex-direction: column; 6005 justify-content: center; 6006 overflow: hidden; 6007 min-height: 400px; 6008 } 6009 @media (min-width: 990px) { 6010 .layout-gradient { min-height: 450px; } 6011 } 6012 6013 .layout-gradient .connect-bg-template--31746159903058__custom_connect_qybAQ7 { 6014 position: absolute; 6015 top: 0; 6016 right: 0; 6017 width: 100%; 6018 height: 100%; 6019 z-index: 1; 6020 background-color: #1a1a1a; 6021 } 6022 @media (min-width: 768px) { 6023 .layout-gradient .connect-bg-template--31746159903058__custom_connect_qybAQ7 { width: 70%; } 6024 } 6025 6026 .layout-gradient .connect-overlay-template--31746159903058__custom_connect_qybAQ7 { 6027 position: absolute; 6028 top: 0; 6029 left: 0; 6030 width: 100%; 6031 height: 100%; 6032 background: linear-gradient(to right, #1a1a1a 0%, #1a1a1a 40%, transparent 100%); 6033 z-index: 2; 6034 } 6035 @media (max-width: 767px) { 6036 .layout-gradient .connect-overlay-template--31746159903058__custom_connect_qybAQ7 { 6037 background: linear-gradient(to bottom, transparent 0%, #1a1a1a 60%, #1a1a1a 100%); 6038 } 6039 } 6040 6041 .layout-gradient .connect-content-template--31746159903058__custom_connect_qybAQ7 { 6042 position: relative; 6043 z-index: 3; 6044 padding: 3rem 2rem; 6045 max-width: 550px; 6046 } 6047 @media (min-width: 990px) { 6048 .layout-gradient .connect-content-template--31746159903058__custom_connect_qybAQ7 { padding: 4rem 5rem; } 6049 } 6050 6051 6052 /* ----------------------------------------------------- 6053 LAYOUT: REKTANGEL (När checkbox är ikryssad) 6054 ----------------------------------------------------- */ 6055 .layout-rectangle { 6056 flex-direction: column; 6057 gap: 2rem; 6058 } 6059 @media (min-width: 990px) { 6060 .layout-rectangle { 6061 flex-direction: row; 6062 align-items: stretch; 6063 gap: 4rem; 6064 } 6065 } 6066 6067 .layout-rectangle .connect-content-template--31746159903058__custom_connect_qybAQ7 { 6068 flex: 1; 6069 display: flex; 6070 flex-direction: column; 6071 justify-content: center; 6072 padding: 2rem 0; 6073 } 6074 6075 .layout-rectangle .connect-bg-template--31746159903058__custom_connect_qybAQ7 { 6076 flex: 1; 6077 position: relative; 6078 width: 100%; 6079 min-height: 350px; 6080 border-radius: 12px; 6081 overflow: hidden; 6082 } 6083 6084 6085 /* Gemensam text-styling */ 6086 .connect-content-template--31746159903058__custom_connect_qybAQ7 h2 { 6087 font-size: 35px; 6088 color: #ffffff; 6089 margin-bottom: 1.5rem; 6090 font-weight: 500; 6091 } 6092 @media (min-width: 990px) { 6093 .connect-content-template--31746159903058__custom_connect_qybAQ7 h2 { font-size: 48px; } 6094 } 6095 6096 .connect-content-template--31746159903058__custom_connect_qybAQ7 p { 6097 font-size: 16px; 6098 color: #a3a3a3; 6099 line-height: 1.6; 6100 margin-bottom: 2.5rem; 6101 } 6102 @media (min-width: 990px) { 6103 .connect-content-template--31746159903058__custom_connect_qybAQ7 p { font-size: 16px; } 6104 } 6105 6106 .connect-btn-template--31746159903058__custom_connect_qybAQ7 { 6107 display: inline-block; 6108 align-self: flex-start; 6109 background-color: #f7e8a4; 6110 color: #1a1a1a; 6111 padding: 0.9rem 2rem; 6112 border-radius: 4px; 6113 text-decoration: none; 6114 font-weight: 600; 6115 font-size: 0.95rem; 6116 transition: background-color 0.3s ease; 6117 } 6118 .connect-btn-template--31746159903058__custom_connect_qybAQ7:hover { 6119 background-color: #e6d793; 6120 } 6121</style> 6122 6123<div class="custom-connect-template--31746159903058__custom_connect_qybAQ7"> 6124 <!-- Bakgrundsrutnätet --> 6125 <div class="grid-overlay-dark-template--31746159903058__custom_connect_qybAQ7"></div> 6126 6127 <!-- Kortet växlar klass beroende pÃ¥ inställning --> 6128 <div class="connect-card-template--31746159903058__custom_connect_qybAQ7 layout-gradient"> 6129 6130 <!-- Texten flyttades upp i koden (gör ingen visuell skillnad i gradient-läge, men är viktigt för rektangel-läget) --> 6131 <div class="connect-content-template--31746159903058__custom_connect_qybAQ7"> 6132 <h2>Letâs connect</h2> 6133 <p>Get in touch with our team to learn more about our solutions, or book a demo to see how they can boost your business with local payments.</p> 6134 6135 <a href="/en/pages/sales" class="connect-btn-template--31746159903058__custom_connect_qybAQ7">Contact sales</a> 6136 6137 </div> 6138 6139 <!-- Bild & Toning --> 6140 <div class="connect-bg-template--31746159903058__custom_connect_qybAQ7"> 6141 6142 <img src="//mondido.com/cdn/shop/files/person-under-shades-of-su
6142n-min.jpg?v=1787913277&width=1200" alt="Letâs connect" loading="lazy"> 6143 6144 6145 <!-- Toningen döljs helt om "image_as_rectangle" är ikryssad --> 6146 6147 <div class="connect-overlay-template--31746159903058__custom_connect_qybAQ7"></div> 6148 6149 </div> 6150 6151 </div> 6152</div></div> 6153 </main> 6154 6155 <footer> 6156 <!-- BEGIN sections: footer-group --> 6157<div id="shopify-section-sections--31746160034130__footer_m9NzUG" class="shopify-section shopify-section-group-footer-group"> 6158 6159<style> 6160 .site-footer-custom { 6161 background-color: #1a1a1a; 6162 color: #ffffff; 6163 position: relative; 6164 overflow: hidden; 6165 border-top: 1px solid rgba(255,255,255,0.06); 6166 padding-top: 4rem; 6167 } 6168 6169 @media (min-width: 990px) { 6170 .site-footer-custom { 6171 padding-top: 6rem; 6172 } 6173 } 6174 6175 /* Det globalt synkade rutnätet */ 6176 .footer-grid-overlay { 6177 position: absolute; 6178 top: 0; 6179 left: 50%; 6180 width: 100vw; 6181 height: 100%; 6182 pointer-events: none; 6183 z-index: 1; 6184 background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); 6185 background-size: 25vw 100%; 6186 background-position: left top; 6187 transform: translateX(-50%); 6188 } 6189 6190 .footer-row { 6191 display: flex; 6192 flex-direction: column; 6193 position: relative; 6194 z-index: 2; 6195 width: 100%; 6196 max-width: 100vw; 6197 } 6198 6199 @media (min-width: 990px) { 6200 .footer-row { 6201 flex-direction: row; 6202 } 6203 } 6204 6205 /* Kolumner */ 6206 .f-col { 6207 padding: 2rem 2rem; 6208 width: 100%; 6209 display: flex; 6210 flex-direction: column; 6211 } 6212 6213 @media (min-width: 990px) { 6214 .f-col { 6215 width: 25vw; 6216 padding: 0 3rem; 6217 flex-shrink: 0; 6218 } 6219 } 6220 6221 /* Logotyp */ 6222 .footer-logo { 6223 max-width: 180px; 6224 margin-bottom: 3rem; 6225 display: block; 6226 } 6227 6228 /* Kontaktlista (Mail & Adress) */ 6229 .footer-contact { 6230 list-style: none; 6231 padding: 0; 6232 margin: 0 0 3rem 0; 6233 font-size: 0.95rem; 6234 color: #e0e0e0; 6235 line-height: 1.6; 6236 } 6237 6238 .footer-contact li { 6239 display: flex; 6240 align-items: flex-start; 6241 margin-bottom: 1.5rem; 6242 } 6243 6244 .footer-contact-icon { 6245 width: 18px; 6246 height: 18px; 6247 margin-right: 12px; 6248 margin-top: 3px; 6249 flex-shrink: 0; 6250 stroke: #f7e8a4; /* Guld */ 6251 fill: none; 6252 } 6253 6254 /* Menyer */ 6255 .footer-menu { 6256 list-style: none; 6257 padding: 0; 6258 margin: 0 0 2rem 0; 6259 } 6260 6261 .footer-menu li { 6262 margin-bottom: 1.2rem; 6263 } 6264 6265 .footer-menu a { 6266 color: #ffffff; 6267 text-decoration: none; 6268 font-size: 1rem; 6269 transition: opacity 0.3s ease; 6270 } 6271 6272 .footer-menu a:hover { 6273 opacity: 0.6; 6274 } 6275 6276 /* Undre raden (Socials, VAT, Copyright) */ 6277 .footer-bottom-row { 6278 margin-top: 2rem; 6279 padding-bottom: 4rem; 6280 } 6281 6282 @media (min-width: 990px) { 6283 .footer-bottom-row { 6284 margin-top: 4rem; 6285 } 6286 6287 .f-col-double { 6288 width: 50vw; 6289 display: flex; 6290 align-items: flex-end; 6291 justify-content: center; 6292 text-align: center; 6293 padding: 0 2rem; 6294 flex-shrink: 0; 6295 } 6296 } 6297 6298 /* Sociala medier */ 6299 .footer-socials { 6300 display: flex; 6301 gap: 1rem; 6302 } 6303 6304 .footer-socials a { 6305 display: flex; 6306 align-items: center; 6307 justify-content: center; 6308 width: 44px; 6309 height: 44px; 6310 border-radius: 50%; 6311 border: 1px solid rgba(255,255,255,0.2); 6312 color: #f7e8a4; /* Guld */ 6313 transition: border-color 0.3s ease, background-color 0.3s ease; 6314 } 6315 6316 .footer-socials a:hover { 6317 border-color: #f7e8a4; 6318 background-color: rgba(247, 232, 164, 0.05); 6319 } 6320 6321 .footer-socials svg { 6322 width: 18px; 6323 height: 18px; 6324 fill: currentColor; 6325 } 6326 6327 /* Instagram icon is stroke-based */ 6328 .footer-socials .icon-stroke { 6329 fill: none; 6330 stroke: currentColor; 6331 stroke-width: 2; 6332 } 6333 6334 /* Text i botten */ 6335 .footer-meta-text { 6336 color: #a3a3a3; 6337 font-size: 0.9rem; 6338 margin: 0; 6339 } 6340 6341 .copyright-text { 6342 text-align: left; 6343 margin-top: 2rem; 6344 } 6345 6346 @media (min-width: 990px) { 6347 .copyright-text { 6348 margin-top: 0; 6349 } 6350 /* Knuffa ner texten sÃ¥ den ligger i botten av kolumnen */ 6351 .f-col-copyright { 6352 display: flex; 6353 flex-direction: column; 6354 justify-content: flex-end; 6355 } 6356 } 6357</style> 6358 6359<footer class="site-footer-custom"> 6360 <div class="footer-grid-overlay"></div> 6361 6362 <!-- ÃVRE RADEN: Logotyp, Info och Menyer --> 6363 <div class="footer-row"> 6364 6365 <!-- Kolumn 1: Info --> 6366 <div class="f-col"> 6367 6368 <img src="//mondido.com/cdn/shop/files/mondido_transparent.png?v=1787910584&width=400" alt="Logo" class="footer-logo" loading="lazy"> 6369 6370 6371 <ul class="footer-contact"> 6372 6373 <li>
6374 <svg class="footer-contact-icon" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 6375 <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> 6376 <polyline points="22,6 12,13 2,6"></polyline> 6377 </svg> 6378 <span>[email protected]</span> 6379 </li> 6380 6381 6382 6383 <li> 6384 <svg class="footer-contact-icon" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 6385 <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path> 6386 <circle cx="12" cy="10" r="3"></circle> 6387 </svg> 6388 <span>Mondido IT AB<br /> 6389Kivra: 559366-9913<br /> 6390106 31 Stockholm,<br /> 6391Sweden</span> 6392 </li> 6393 6394 </ul> 6395 </div> 6396 6397 <!-- Kolumn 2: Meny 1 --> 6398 <div class="f-col"> 6399 6400 <ul class="footer-menu"> 6401 6402 <li><a href="/en">Payment methods</a></li> 6403 6404 <li><a href="/en">Shopify</a></li> 6405 6406 <li><a href="/en/pages/kalkylator">Price calculator</a></li> 6407 6408 <li><a href="/en/pages/test-checkout">Demo checkout</a></li> 6409 6410 <li><a href="/en/pages/resources">Resources</a></li> 6411 6412 <li><a href="https://mondido.statuspage.io/">System status</a></li> 6413 6414 <li><a href="/en/pages/guide">Guide</a></li> 6415 6416 <li><a href="/en/pages/prislista">Price list</a></li> 6417 6418 </ul> 6419 6420 </div> 6421 6422 <!-- Kolumn 3: Meny 2 --> 6423 <div class="f-col"> 6424 6425 <ul class="footer-menu"> 6426 6427 <li><a href="/en/pages/klarna">Klarna</a></li> 6428 6429 <li><a href="/en/pages/zaver">Zaver</a></li> 6430 6431 <li><a href="/en/pages/swish">Swish</a></li> 6432 6433 <li><a href="/en/pages/vipps">Vipps</a></li> 6434 6435 <li><a href="/en/pages/visa-mastercard">Visa/Mastercard</a></li> 6436 6437 <li><a href="/en/pages/amex">American Express</a></li> 6438 6439 <li><a href="/en/pages/trustly">Trustly</a></li> 6440 6441 <li><a href="/en/pages/two">Two</a></li> 6442 6443 <li><a href="/en/pages/apple-pay">Apple Pay</a></li> 6444 6445 <li><a href="/en/pages/google-pay">Google Pay</a></li> 6446 6447 <li><a href="/en/pages/pdf">PDF Invoice</a></li> 6448 6449 </ul> 6450 6451 </div> 6452 6453 <!-- Kolumn 4: Meny 3 --> 6454 <div class="f-col"> 6455 6456 <ul class="footer-menu"> 6457 6458 <li><a href="/en/pages/general-terms-and-conditions">General Terms and Conditions</a></li> 6459 6460 <li><a href="/en/pages/cookie-policy">Cookie Policy</a></li> 6461 6462 <li><a href="/en/pages/privacy-policy">Privacy Policy</a></li> 6463 6464 </ul> 6465 6466 </div> 6467 6468 </div> 6469 6470 <!-- UNDRE RADEN: Socials, VAT, Copyright --> 6471 <div class="footer-row footer-bottom-row"> 6472 6473 <!-- Kolumn 1 Botten: Sociala Medier --> 6474 <div class="f-col"> 6475 <div class="footer-socials"> 6476 6477 <a href="https://www.linkedin.com/company/mondido" target="_blank" aria-label="LinkedIn"> 6478 <svg viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg> 6479 </a> 6480 6481 6482 6483 <a href="https://www.instagram.com/mondidopayments/" target="_blank" aria-label="Instagram"> 6484 <svg class="icon-stroke" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg> 6485 </a> 6486 6487 6488 6489 <a href="https://x.com/mondidopay?lang=en" target="_blank" aria-label="X (Twitter)"> 6490 <svg viewBox="0 0 24 24">
6490<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg> 6491 </a> 6492 6493 </div> 6494 </div> 6495 6496 <!-- Kolumn 2 & 3 Botten: VAT info (Centrerad över de två mittenkolumnerna) --> 6497 <div class="f-col-double"> 6498 <p class="footer-meta-text">VAT SE559366991301 | PCI DSS 4.0.1 Level 1</p> 6499 </div> 6500 6501 <!-- Kolumn 4 Botten: Copyright --> 6502 <div class="f-col f-col-copyright"> 6503 <p class="footer-meta-text copyright-text">Mondido © 2026, All rights reserved.</p> 6504 </div> 6505 6506 </div> 6507</footer></div> 6508<!-- END sections: footer-group --> 6509 </footer> 6510 </div> 6511 6512 6513 6514 <div 6515 id="shopify-section-cart-drawer-section" 6516 class="shopify-section" 6517 > 6518 6519 6520
6520<script 6521 type="module" 6522 src="//mondido.com/cdn/shop/t/1/assets/cart-drawer.js?v=101430053943909765251787819631" 6523 fetchpriority="low" 6524 ></script>
6524 6525 6526 6527 6528 <theme-drawer 6529 id="cart-drawer" 6530 data-skip-node-update 6531 > 6532 <dialog 6533 ref="panel" 6534 class="theme-drawer__dialog color-custom-drawer" 6535 aria-labelledby="cart-drawer-heading" 6536 cart-summary-sticky="true" 6537 > 6538 <cart-drawer-component 6539 6540 > 6541 <template id="empty-cart-template"> 6542 6543 <div 6544 class="cart-drawer__content" 6545 aria-label="Cart" 6546 > 6547 <h2 6548 class="theme-drawer__title h4" 6549 id="cart-drawer-heading" 6550 > 6551 Your cart is empty 6552 </h2> 6553 6554 <div class="cart-drawer__items"> 6555 6556 6557 6558 6559 6560 6561 6562 6563 6564
6565<script 6566 src="//mondido.com/cdn/shop/t/1/assets/component-cart-items.js?v=14476580701730542761787819631" 6567 type="module" 6568 fetchpriority="low" 6569></script>
vendor: 1 bytes, line 6569
6569
6570<script 6571 src="//mondido.com/cdn/shop/t/1/assets/component-cart-quantity-selector.js?v=168493463479860323171787819631" 6572 type="module" 6573 fetchpriority="low" 6574></script>
vendor: 1 bytes, line 6574
6574
6575<script 6576 src="//mondido.com/cdn/shop/t/1/assets/volume-pricing-info.js?v=94479640769665442661787819631" 6577 type="module" 6578 fetchpriority="low" 6579></script>
6579 6580 6581 6582 6583 6584<div 6585 6586 class="cart-items__wrapper cart-items__wrapper--drawer-empty" 6587 6588 data-cart-drawer-empty 6589 6590 style="" 6591> 6592 6593<p> 6594 Have an account? <a href="https://mondido.com/customer_authentication/redirect?locale=en®ion_country=SE">Log in</a> to check out faster. 6595 </p><a 6596 class="button cart-items__empty-button" 6597 href="/en/collections/all" 6598 > 6599 <span class="button-text"> 6600 Continue shopping 6601 </span> 6602 </a></div> 6603 6604 6605 6606 </div> 6607 </div> 6608 6609 </template> 6610 6611 <div 6612 class="cart-drawer__inner cart-drawer--empty" 6613 data-hydration-key="cart-drawer-inner" 6614 ><div class="theme-drawer__header"> 6615 <button 6616 on:click="#cart-drawer/close" 6617 class="theme-drawer__close-button cart-drawer__close-button--empty" 6618 type="button" 6619 aria-label="Close" 6620 > 6621 <span class="svg-wrapper"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 6622<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/> 6623</svg> 6624</span> 6625 </button> 6626 </div> 6627 6628 6629<cart-items-component 6630 class="cart-items-component" 6631 6632 data-drawer 6633 view-event-trigger="dialog" 6634 6635 data-section-id="cart-drawer-section" 6636 6637 view-event-payload="{"context":null,"cart":null}" 6638 6639> 6640 6641 6642 <div 6643 class="cart-drawer__content" 6644 aria-label="Cart" 6645 > 6646 <h2 6647 class="theme-drawer__title h4" 6648 id="cart-drawer-heading" 6649 > 6650 Your cart is empty 6651 </h2> 6652 6653 <div class="cart-drawer__items"> 6654 6655 6656 6657 6658 6659 6660 6661 6662 6663
6664<script 6665 src="//mondido.com/cdn/shop/t/1/assets/component-cart-items.js?v=14476580701730542761787819631" 6666 type="module" 6667 fetchpriority="low" 6668></script>
vendor: 1 bytes, line 6668
6668
6669<script 6670 src="//mondido.com/cdn/shop/t/1/assets/component-cart-quantity-selector.js?v=168493463479860323171787819631" 6671 type="module" 6672 fetchpriority="low" 6673></script>
vendor: 1 bytes, line 6673
6673
6674<script 6675 src="//mondido.com/cdn/shop/t/1/assets/volume-pricing-info.js?v=94479640769665442661787819631" 6676 type="module" 6677 fetchpriority="low" 6678></script>
6678 6679 6680 6681 6682 6683<div 6684 6685 class="cart-items__wrapper cart-items__wrapper--drawer-empty" 6686 6687 data-cart-drawer-empty 6688 6689 style="" 6690> 6691 6692<p> 6693 Have an account? <a href="https://mondido.com/customer_authentication/redirect?locale=en®ion_country=SE">Log in</a> to check out faster. 6694 </p><a 6695 class="button cart-items__empty-button" 6696 href="/en/collections/all" 6697 > 6698 <span class="button-text"> 6699 Continue shopping 6700 </span> 6701 </a></div> 6702 6703 6704 6705 </div> 6706 </div> 6707 6708 6709</cart-items-component> 6710 6711 6712 6713 </div> 6714 </cart-drawer-component> 6715 </dialog> 6716 </theme-drawer> 6717 6718 6719 </div> 6720 6721 6722 6723 6724 6725 6726 6727 6728 6729
6730<script 6731 type="module" 6732 src="//mondido.com/cdn/shop/t/1/assets/theme-drawer.js?v=155110645205299884131787819631" 6733 fetchpriority="low" 6734></script>
6734 6735
6736<script> 6737 /* Runs synchronously during HTML parsing â opens the correct drawer on first 6738 paint if navigation state was saved, so it renders with the rest of the page. */ 6739 (function () { 6740 var drawerIds = (sessionStorage.getItem('theme-drawer-open') || '').split(',').filter(Boolean); 6741 if (!drawerIds.length) return; 6742 6743 // Only restore on wide viewports (squeeze mode). On narrow viewports the 6744 // drawer is a modal overlay â let it start closed after navigation rather 6745 // than re-opening a fullscreen dialog the user may have left behind. 6746 if (!window.matchMedia('(min-width: 990px)').matches) return; 6747 6748 var dialogs = []; 6749 for (var i = 0; i < drawerIds.length; i++) { 6750 var drawer = document.getElementById(drawerIds[i]); 6751 if (!drawer) continue; 6752 6753 drawer.setAttribute('open', ''); 6754 6755 // Set [open] directly so the CSS slide-in applies without triggering 6756 // the browser's dialog focusing steps â on wide viewports the drawer is 6757 // a sidebar, not a modal, so focus should stay where it is. 6758 // The instant class suppresses the slide-in transition for the initial restore. 6759 // Set --drawer-stack-order so z-index layering matches the original order. 6760 drawer.style.setProperty('--drawer-stack-order', String(i + 1)); 6761 6762 var dialog = drawer.querySelector('dialog'); 6763 if (dialog) { 6764 dialog.setAttribute('open', ''); 6765 dialog.classList.add('theme-drawer__dialog-instant'); 6766 dialogs.push(dialog); 6767 } 6768 6769 // Let each drawer type handle its own restore (e.g. shopify-chat mode). 6770 // Synchronous dispatch â listeners attached during earlier parsing run immediately. 6771 drawer.dispatchEvent(new CustomEvent('theme-drawer:restoring')); 6772 } 6773 6774 // Apply squeeze immediately, bypassing the margin transition. 6775 // Only squeeze if at least one drawer was actually restored â saved 6776 // drawer IDs may not exist on every page (e.g. cart-drawer on /cart). 6777 var pageWrapper = document.querySelector('.page-wrapper'); 6778 if (pageWrapper && dialogs.length > 0) { 6779 pageWrapper.style.transition = 'none'; 6780 pageWrapper.classList.add('page-wrapper--drawer-open'); 6781 } 6782 6783 // Re-enable transitions after one paint so the instant state is rendered first. 6784 requestAnimationFrame(function () { 6785 requestAnimationFrame(function () { 6786 if (pageWrapper) pageWrapper.style.transition = ''; 6787 for (var j = 0; j < dialogs.length; j++) { 6788 dialogs[j].classList.remove('theme-drawer__dialog-instant'); 6789 } 6790 }); 6791 }); 6792 })(); 6793</script>
6793 6794
6795<script 6796 type="module" 6797> 6798 const pageWrapper = document.querySelector('.page-wrapper'); 6799 const squeezeQuery = window.matchMedia('(min-width: 990px)'); 6800 6801 // ââ Squeeze coordination ââ 6802 // Listens to all drawers. Only squeezes on wide viewports. 6803 document.addEventListener('theme-drawer:open', () => { 6804 if (squeezeQuery.matches) { 6805 pageWrapper?.classList.add('page-wrapper--drawer-open'); 6806 } 6807 }); 6808 6809 document.addEventListener('theme-drawer:close', () => { 6810 const openDrawer = document.querySelector('theme-drawer[open]'); 6811 if (!openDrawer) { 6812 pageWrapper?.classList.remove('page-wrapper--drawer-open'); 6813 } 6814 }); 6815 6816 squeezeQuery.addEventListener('change', () => { 6817 const openDrawer = document.querySelector('theme-drawer[open]'); 6818 pageWrapper?.classList.toggle('page-wrapper--drawer-open', Boolean(openDrawer) && squeezeQuery.matches); 6819 }); 6820 6821 // ââ State persistence ââ 6822 // Store open drawer IDs sorted by their visual stack order so 6823 // the restore script can recreate the same z-index layering. 6824 function persistDrawerState() { 6825 const openDrawers = Array.from(document.querySelectorAll('theme-drawer[open]:not([no-persist])')); 6826 if (!openDrawers.length) { 6827 sessionStorage.removeItem('theme-drawer-open'); 6828 return; 6829 } 6830 6831 openDrawers.sort((a, b) => { 6832 const orderA = Number(a.style.getPropertyValue('--drawer-stack-order') || 0); 6833 const orderB = Number(b.style.getPropertyValue('--drawer-stack-order') || 0); 6834 return orderA - orderB; 6835 }); 6836 6837 sessionStorage.setItem('theme-drawer-open', openDrawers.map((d) => d.id).join(',')); 6838 } 6839 6840 document.addEventListener('theme-drawer:open', persistDrawerState); 6841 document.addEventListener('theme-drawer:close', persistDrawerState); 6842</script>
6842 6843 6844 6845 6846 6847 6848 6849 6850 6851 6852 6853 6854 6855
6856<script 6857 src="//mondido.com/cdn/shop/t/1/assets/dialog.js?v=144816527575655702281787819631" 6858 type="module" 6859></script>
6859 6860
6861<script 6862 src="//mondido.com/cdn/shop/t/1/assets/predictive-search.js?v=162722252387887966571787819631" 6863 type="module" 6864 fetchpriority="low" 6865></script>
6865 6866 6867<dialog-component 6868 id="search-modal" 6869 class="search-modal" 6870 6871> 6872 <dialog 6873 ref="dialog" 6874 on:click="/closeDialogOnClickOutside" 6875 on:keydown="/closeDialogOnEscapePress" 6876 class="search-modal__content dialog-modal" 6877 scroll-lock 6878 aria-labelledby="search-modal-heading" 6879 > 6880 <h2 6881 id="search-modal-heading" 6882 class="visually-hidden" 6883 > 6884 Search 6885 </h2> 6886 <predictive-search-component 6887 class="predictive-search color-custom-popover" 6888 style="--product-corner-radius: 0px; --card-corner-radius: 4px;" 6889 data-section-id="predictive-search" 6890 data-testid="search-component--modal" 6891 role="search" 6892 aria-label="Search" 6893 > 6894 <form 6895 action="/en/search" 6896 method="get" 6897 role="search" 6898 class="predictive-search-form" 6899 ref="form" 6900 on:keydown="/onSearchKeyDown" 6901 > 6902 <div 6903 class="predictive-search-form__header" 6904 > 6905 <div class="predictive-search-form__header-inner"> 6906 <label 6907 for="cmdk-input" 6908 class="visually-hidden" 6909 >Search</label> 6910 <input 6911 class="search-input" 6912 id="cmdk-input" 6913 type="search" 6914 name="q" 6915 role="combobox" 6916 aria-expanded="false" 6917 aria-owns="predictive-search-results" 6918 aria-controls="predictive-search-results" 6919 aria-haspopup="listbox" 6920 aria-autocomplete="list" 6921 autocomplete="off" 6922 placeholder="Search" 6923 ref="searchInput" 6924 on:input="/search" 6925 on:keydown="/onSearchKeyDown" 6926 > 6927 <input 6928 name="options[prefix]" 6929 type="hidden" 6930 value="last" 6931 > 6932 <span class="svg-wrapper predictive-search__icon"> 6933 <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="4.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--icon-stroke-width)" d="m12.5 12.5 3.25 3.25"/></svg> 6934 6935 </span> 6936 <button 6937 type="button" 6938 class="button-unstyled predictive-search__reset-button" 6939 ref="resetButton" 6940 hidden 6941 on:click="/resetSearch" 6942 > 6943 Clear 6944 </button> 6945 </div> 6946 <button 6947 type="button" 6948 class="button predictive-search__close-modal-button" 6949 aria-label="Close dialog" 6950 on:click="dialog-component/closeDialog" 6951 ref="closeModalButton" 6952 > 6953 <span class="svg-wrapper"> 6954 <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 6955<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/> 6956</svg> 6957 6958 </span> 6959 </button> 6960 </div> 6961 6962 <div class="predictive-search-form__content-wrapper"> 6963 <div 6964 class="predictive-search-form__content" 6965 ref="predictiveSearchResults" 6966 on:click="/handleModalClick" 6967 > 6968 6969 6970<div 6971 id="predictive-search-results" 6972 class="predictive-search-dropdown" 6973 role="listbox" 6974 aria-expanded="true" 6975 style="--color-shadow: rgb(var(--color-foreground-rgb) / 0.1);" 6976> 6977 6978 <div class="predictive-search-results__inner"> 6979 6980 6981 6982 6983 6984 <div 6985 id="predictive-search-products" 6986 class="predictive-search-results__products" 6987 6988 data-testid="products-list-default--modal" 6989 6990> 6991 6992 <h4 class="predictive-search-results__title"> 6993 Products 6994 </h4> 6995 <ul 6996 class="predictive-search-results__list predictive-search-results__wrapper-products list-unstyled" 6997 > 6998 6999 7000 <li 7001 class="predictive-search-results__card predictive-search-results__card--product" 7002 ref="resultsItems[]" 7003 > 7004 7005<product-component 7006 class="resource-card__wrapper" 7007 7008 7009 view-event-payload="{"product":{"id":11150167212370,"title":"Test checkout","handle":"test-checkout","selectedVariant":null},"context":"search","selectedOptions":[]}" 7010 7011 ><div 7012 class="resource-card" 7013 data-resource-type="product" 7014> 7015 <a 7016 class="resource-card__link" 7017 href="/en/products/test-checkout" 7018 > 7019 <span class="visually-hidden"> 7020 Test checkout 7021 </span> 7022 </a> 7023 <div 7024 class="resource-card__media" 7025 style="--resource-card-aspect-ratio: 4 / 5;" 7026 7027 > 7028 7029 7030<div 7031 aria-hidden="true" 7032 class="resource-card__image-placeholder" 7033 >Test checkout</div></div> 7034 7035 <div class="resource-card__content"> 7036 <p class="resource-card__title paragraph">Test checkout</p> 7037 7038 7039 7040 7041<div ref="priceContainer"> 7042 7043 7044
7045 <span class="price">1,00 kr</span> 7046 7047 7048</div> 7049 7050 </div> 7051</div></product-component> 7052 7053 </li> 7054 7055 </ul> 7056 7057</div> 7058 7059 7060 7061 </div> 7062 7063</div> 7064 7065 </div> 7066 7067 <div class="predictive-search-form__footer"> 7068 <button 7069 class="button predictive-search__search-button" 7070 ref="viewAllButton" 7071 > 7072 View all 7073 </button> 7074 </div> 7075 </div> 7076 </form> 7077 </predictive-search-component> 7078 </dialog> 7079</dialog-component> 7080 7081 7082 7083 7084 7085
7085<script 7086 src="//mondido.com/cdn/shop/t/1/assets/gift-card-recipient-form.js?v=170482155849799299241787819631" 7087 type="module" 7088 fetchpriority="low" 7089></script>
7089 7090 7091 7092 7093 7094<quick-add-dialog id="quick-add-dialog"> 7095 <dialog 7096 class="quick-add-modal dialog-modal color-custom-popover" 7097 ref="dialog" 7098 scroll-lock 7099 > 7100 <button 7101 ref="closeButton" 7102 on:click="/closeDialog" 7103 class="button button-unstyled close-button quick-add-modal__close" 7104 aria-label="Close dialog" 7105 ><svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 7106<path d="M11.1765 12.025C11.4108 12.2594 11.7907 12.2594 12.025 12.025C12.2594 11.7907 12.2594 11.4108 12.025 11.1765L8.84931 8.00078L12.025 4.82505C12.2594 4.59073 12.2594 4.21083 12.025 3.97652C11.7907 3.7422 11.4108 3.7422 11.1765 3.97652L8.00078 7.15225L4.82505 3.97652C4.59073 3.7422 4.21083 3.7422 3.97652 3.97652C3.7422 4.21083 3.7422 4.59073 3.97652 4.82505L7.15225 8.00078L3.97652 11.1765C3.7422 11.4108 3.7422 11.7907 3.97652 12.025C4.21083 12.2594 4.59073 12.2594 4.82505 12.025L8.00078 8.84931L11.1765 12.025Z" fill="currentColor"/> 7107</svg> 7108</button> 7109 7110 <product-component 7111 id="quick-add-modal-content" 7112 class="quick-add-modal__content" 7113 view-event-trigger="dialog" 7114 ></product-component> 7115 </dialog> 7116</quick-add-dialog> 7117 7118 7119 7120 7121 7122 7123 7124 7125 7126 7127 7128 7129 7130 7131 7132
7132<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
7132 7133</body> 7134</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.