/** Shopify CDN: Minification failed

Line 189:0 Unexpected "}"

**/
/* Muslumana live preview on the product page (snippet mm-live-preview). Everything is scoped to .mm-lp. */
.mm-lp { --lp-ink: rgb(var(--color-foreground, 46 46 45)); --lp-stone: #deddda; --lp-mist: #f5f5f3; --lp-gold: #f3bc27; --lp-cream: #fdf4dc; }
.mm-lp[hidden] { display: none !important; }

/* The preview takes the big photo's place in the gallery; the thumbnails stay below it */
.product__media-wrapper.mm-lp-on media-gallery { position: relative; }
.product__media-wrapper.mm-lp-on.mm-lp-show-preview [id^="GalleryViewer-"] { display: none; }
.product__media-wrapper.mm-lp-on:not(.mm-lp-show-preview) .mm-lp-area { display: none; }
.product__media-wrapper.mm-lp-on.mm-lp-show-preview .mm-lp-to-preview { display: none; }
.mm-lp .mm-lp-area { margin-bottom: 1rem; }

/* Show photos / Show live preview */
.mm-lp .mm-lp-switch { position: absolute; z-index: 3; top: 12px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.94); color: var(--lp-ink); padding: 8px 14px; border-radius: 99px; font: 600 13px/1.2 var(--font-body-family, inherit); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); white-space: nowrap; }
.mm-lp .mm-lp-to-photos { right: 12px; }
.mm-lp .mm-lp-to-preview { right: calc(var(--mm-lp-right, 0px) + 12px); }

.mm-lp .mp-canvas-wrap { position: relative; width: 100%; overflow: hidden; background: #ece7df; }
.mm-lp #mp-canvas { display: block; width: 100%; touch-action: none; letter-spacing: 0; word-spacing: 0; }
/* Zoom in / Real size: bottom-left corner of the preview */
.mm-lp .mp-view { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: inline-flex; gap: 2px; padding: 3px; background: rgba(255,255,255,.9); border-radius: 99px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.mm-lp .mp-view button { border: 0; background: none; padding: 6px 12px; border-radius: 99px; font: 600 12.5px/1.2 var(--font-body-family, inherit); color: #737371; cursor: pointer; white-space: nowrap; }
.mm-lp .mp-view button[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.mm-lp .mp-view[hidden] { display: none; }
.mm-lp .mp-view button[data-view="toggle"] { color: var(--lp-ink); }
.mm-lp .mp-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: #737371; }
/* Name controls (− + turn, default spot, move together): a 2×2 grid fixed in the bottom-right corner of the preview */
.mm-lp .mp-tools { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(2, 60px); gap: 4px; padding: 4px; background: rgba(255,255,255,.94); border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.mm-lp .mp-tools[hidden] { display: none; }
.mm-lp .mp-tools button { width: 60px; height: 46px; padding: 3px 0 2px; border: 1px solid var(--lp-stone); background: #fff; color: var(--lp-ink); border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mm-lp .mp-tools button span { font: 600 10px/1 var(--font-body-family, inherit); letter-spacing: 0; white-space: nowrap; }
.mm-lp .mp-tools button[hidden] { display: none; }
/* family mats: "Move together" is a 5th button across the full width */
.mm-lp .mp-tools .mp-link-toggle { grid-column: 1 / -1; width: 100%; height: 34px; flex-direction: row; gap: 6px; }
.mm-lp .mp-tools .mp-link-toggle span { font-size: 11px; }
.mm-lp .mp-tools .mp-link-toggle[aria-pressed="true"] { background: var(--lp-gold); border-color: var(--lp-gold); }
/* wide family mats in Zoom in: arrows to slide to the other places */
.mm-lp .mp-pan { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0 0 3px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; background: rgba(255,255,255,.94); color: var(--lp-ink); font: 600 26px/1 var(--font-body-family, inherit); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.18); display: grid; place-items: center; }
.mm-lp .mp-pan[hidden] { display: none; }
.mm-lp .mp-pan-prev { left: 8px; }
.mm-lp .mp-pan-next { right: 8px; }
/* what the tapped button did, shown for a moment above the buttons */
.mm-lp .mp-tip { position: absolute; right: 0; bottom: calc(100% + 6px); padding: 5px 10px; border-radius: 8px; background: var(--lp-ink); color: #fff; font: 600 12.5px/1.2 var(--font-body-family, inherit); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.mm-lp .mp-tip.is-on { opacity: 1; transform: none; }

/* Name color row (below the Font buttons) */
.mm-lp-inks { margin: 1.6rem 0; }
.mm-lp-label { margin: 0 0 .8rem; font-weight: 700; }
.mm-lp-label span { font-weight: 400; opacity: .75; margin-left: 4px; }
.mm-lp .mp-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 44px)); gap: 6px; } /* all 8 in one row, left aligned */
/* round on every phone: the height comes from padding (iPhone Safari stretched the aspect-ratio version into ovals) */
.mm-lp .mp-sw { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 0; padding: 0 0 calc(100% - 4px); margin: 0; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; position: relative; box-sizing: border-box; }
.mm-lp .mp-sw i { position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; display: block; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.mm-lp .mp-sw[aria-pressed="true"] { border-color: var(--lp-ink); }
/* "Match border": just the border's color (no mark inside: a tick read as "selected") */
.mm-lp .mp-note { margin: .8rem 0 0; font-size: 12.5px; color: #737371; }

/* "Tap to add a name" typing box on the mat (phones) */
.mm-lp #mp-inline { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); width: min(80%, 280px); height: 44px; padding: 0 12px; font: 600 16px/1 var(--font-body-family, inherit); text-align: center; color: var(--lp-ink); background: #fff; border: 2px solid var(--lp-gold); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); outline: none; }
.mm-lp #mp-inline[hidden] { display: none; }

/* Bar (Size, Color, Font, Name color) and its list: under the preview on phones, a toolbar left of it on computers */
.mm-lp .mp-bar, .mm-lp .mp-under-phone { display: none; }
.mm-lp .mp-sheet[hidden] { display: none; }
.mm-lp .mp-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--lp-stone); border-radius: 12px; background: #fff; }
.mm-lp .mp-sheet[data-kind="color"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mm-lp .mp-sheet[data-kind="font"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-lp .mp-sheet[data-kind="ink"] { display: block; }
.mm-lp .mp-pick { min-width: 0; padding: 8px 4px; border: 1px solid var(--lp-stone); border-radius: 10px; background: #fff; color: var(--lp-ink); cursor: pointer; font: 600 12.5px/1.2 var(--font-body-family, inherit); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mm-lp .mp-pick[aria-pressed="true"] { border: 2px solid var(--lp-gold); background: var(--lp-cream); }
.mm-lp .mp-pick-color { padding: 4px; }
.mm-lp .mp-pick-color i { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--swatch--background, #ddd); background-size: cover; background-position: center; }
.mm-lp .mp-pick-color span { font-size: 10.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mm-lp .mp-pick-font .font-sample { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(2rem * var(--fs, 1)); line-height: 1.3; }
.mm-lp .mp-pick-font span { font-size: 11px; font-weight: 500; opacity: .7; }
@media screen and (max-width: 749px) {
  .mm-lp .mp-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .mm-lp .mp-bar button { min-width: 0; padding: 7px 4px 6px; border: 1px solid var(--lp-stone); border-radius: 10px; background: #fff; color: var(--lp-ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-body-family, inherit); }
  .mm-lp .mp-bar button[hidden] { display: none; }
  .mm-lp .mp-bar button[aria-expanded="true"] { border-color: var(--lp-gold); background: var(--lp-cream); }
  .mm-lp .mp-bar b { font-size: 12px; line-height: 1.1; }
  .mm-lp .mp-bar small { max-width: 100%; font-size: 11px; line-height: 1.1; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 16px; }
  .mm-lp .mp-bar small > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
  .mm-lp .mp-bar small > .mp-chip-font { opacity: 1; font-size: 13px; line-height: 16px; }
  /* chip pictures: the mat's shape, a color swatch, the name color dot */
  .mm-lp .mp-chip-mat { flex: 0 0 auto; border: 1.5px solid currentColor; border-radius: 1px; opacity: .7; color: var(--lp-ink); }
  .mm-lp .mp-chip-sw { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .18); }
  .mm-lp .mp-chip-dot { border-radius: 50%; }
  .mm-lp .mp-chip-mat + .mp-chip-mat, .mm-lp .mp-chip-dot + .mp-chip-dot { margin-left: -2px; }
  /* name buttons and Zoom in / Real size: right under the preview, never over the mat */
  .mm-lp .mp-under-phone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
  .mm-lp .mp-under-phone .mp-tools { position: relative; right: auto; bottom: auto; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; background: none; box-shadow: none; order: -1; width: 100%; }
  .mm-lp .mp-under-phone .mp-tools[hidden] { display: none; }
  .mm-lp .mp-under-phone .mp-tools button { flex: 1 1 0; min-width: 0; width: auto; height: 46px; }
  .mm-lp .mp-under-phone .mp-tools .mp-link-toggle { grid-column: auto; flex: 1.4 1 0; height: 46px; flex-direction: column; gap: 2px; }
  .mm-lp .mp-under-phone .mp-tools .mp-link-toggle span { font-size: 10px; }
  .mm-lp .mp-under-phone .mp-tip { right: auto; left: 50%; transform: translate(-50%, 4px); }
  .mm-lp .mp-under-phone .mp-tip.is-on { transform: translate(-50%, 0); }
  .mm-lp .mp-under-phone .mp-view { position: static; box-shadow: none; background: var(--lp-mist); }
  /* "Show live preview" sits above the photos, in the page flow (always reachable on iPhone) */
  .mm-lp .mm-lp-to-preview { position: static; display: block; width: 100%; margin: 0 0 8px; padding: 11px 14px; text-align: center; background: var(--lp-gold); color: #2e2e2d; border: 0; }
  .product__media-wrapper.mm-lp-on.mm-lp-show-preview .mm-lp-to-preview { display: none; }
  .mm-lp .mm-lp-to-photos { top: 8px; right: 8px; padding: 6px 11px; font-size: 12px; }
}


/* First visit: "How would you like to create your mat?" over the preview */
.mm-lp .mp-ask { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(241,238,233,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mm-lp .mp-ask[hidden] { display: none; }
.mm-lp .mp-ask-card { width: min(100%, 380px); display: grid; gap: 10px; padding: 18px; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.mm-lp .mp-ask-title { font: 700 16px/1.3 var(--font-heading-family, inherit); text-align: center; margin-bottom: 2px; }
.mm-lp .mp-ask button { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--lp-stone); border-radius: 12px; background: #fff; color: var(--lp-ink); cursor: pointer; font-family: var(--font-body-family, inherit); }
.mm-lp .mp-ask button:hover { border-color: var(--lp-gold); background: var(--lp-cream); }
.mm-lp .mp-ask button span { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-cream); font-size: 18px; }
.mm-lp .mp-ask button b { font-size: 15px; line-height: 1.25; }
.mm-lp .mp-ask button small { font-size: 12.5px; line-height: 1.35; color: #737371; }
.mm-lp .mp-ask button[data-mode="self"] { border: 2px solid var(--lp-gold); background: var(--lp-cream); }

/* "Design it for me" inside the preview, top-left */
.mm-lp .mm-lp-forme { left: 12px; right: auto; display: inline-flex; align-items: center; gap: 7px; }
.mm-lp .mp-mail { flex: 0 0 auto; display: block; }
@media screen and (max-width: 749px) { .mm-lp .mm-lp-forme { top: 8px; left: 8px; padding: 6px 11px; font-size: 12px; } }

/* The "Design" row above the Color option */
.mm-lp-mode { margin: 0 0 1.4rem; }
.mm-lp-mode .mm-lp-mode-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-lp-mode button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border: 1px solid rgba(var(--color-foreground, 46 46 45), .2); border-radius: 12px; background: rgb(var(--color-background, 255 255 255)); color: rgb(var(--color-foreground, 46 46 45)); cursor: pointer; font: 600 14px/1.25 var(--font-body-family, inherit); }
.mm-lp-mode button .mp-mail { margin-bottom: 2px; }
.mm-lp-mode button small { font-size: 12px; font-weight: 400; opacity: .7; }
.mm-lp-mode button[aria-pressed="true"] { border: 2px solid #f3bc27; background: #fdf4dc; }
.mm-lp-mode .mm-lp-mode-note { margin-top: .8rem; }

/* The preview's own buttons stay inside it: they never cover the theme's sticky header (logo, menu) */
.mm-lp-stage { isolation: isolate; }
/* computer: while the photos show, "See live preview" floats over the big photo (top right).
   The stage keeps its own layer (isolation, so it never covers the header), raised just above the photos. */
@media screen and (min-width: 750px) {
  .product__media-wrapper.mm-lp-on:not(.mm-lp-show-preview) .mm-lp-stage { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 2; }
  .mm-lp .mm-lp-to-preview { background: var(--lp-gold); color: #2e2e2d; border-color: transparent; padding: 10px 18px; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
  .mm-lp .mm-lp-to-preview:hover { background: #e5aa12; }
}

/* Loading a new mat image / saving the design: a spinner over the preview */
.mm-lp .mp-busy { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.mm-lp .mp-busy.is-on { display: flex; }
.mm-lp .mp-busy.is-saving { background: rgba(241,238,233,.55); pointer-events: auto; }
.mm-lp .mp-busy i { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(46,46,45,.15); border-top-color: var(--lp-gold); background: rgba(255,255,255,.85); box-shadow: 0 2px 10px rgba(0,0,0,.15); animation: mp-spin .8s linear infinite; }
.mm-lp .mp-busy span:empty { display: none; }
.mm-lp .mp-busy span { padding: 7px 14px; border-radius: 99px; background: rgba(46,46,45,.86); color: #fff; font: 600 13px/1.2 var(--font-body-family, inherit); }
@keyframes mp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-lp .mp-busy i { animation-duration: 2.4s; } }

/* Phone: "See your design" button once the preview has scrolled away (above the sticky Add to cart bar when it shows) */
.mm-lp-back {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 29;
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border: 0; border-radius: 99px;
  background: rgba(29,29,31,.92); color: #fff; font: 600 14px/1.2 var(--font-body-family, inherit); letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(0,0,0,.22); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease, bottom .25s ease;
}
.mm-lp-back.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body.sticky-atc-open .mm-lp-back { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media screen and (min-width: 750px) { .mm-lp-back { display: none; } }
@media (prefers-reduced-motion: reduce) { .mm-lp-back { transition: none; } }

/* computer: the name tools (Smaller, Bigger, Vertical, Center, Move together) stand in a column just left of the
   preview, centered top to bottom; they light up when a name is selected */
.mm-lp .mp-bar .mp-ic { display: none; }
@media screen and (min-width: 750px) {
  .mm-lp .mm-lp-area { position: relative; }
  .mm-lp .mm-lp-area > .mp-tools { right: auto; bottom: auto; left: var(--mp-rail-left, 0px); top: calc(var(--mp-rail-h, 400px) / 2); transform: translateY(-50%); grid-template-columns: 60px; }
  .mm-lp .mm-lp-area > .mp-tools .mp-link-toggle { height: 54px; flex-direction: column; gap: 2px; }
  .mm-lp .mm-lp-area > .mp-tools .mp-link-toggle span { font-size: 10px; line-height: 1.1; white-space: normal; text-align: center; }
  .mm-lp .mm-lp-area > .mp-tools.is-off button { opacity: .4; cursor: default; }
  .mm-lp .mm-lp-area > .mp-tools.is-off::after { content: "Click a name"; display: block; padding: 2px 0 1px; font: 600 10px/1.15 var(--font-body-family, inherit); text-align: center; color: #737371; }
  .mm-lp .mm-lp-area > .mp-tools .mp-tip { right: auto; bottom: auto; left: calc(100% + 8px); top: 50%; transform: translate(4px, -50%); }
  .mm-lp .mm-lp-area > .mp-tools .mp-tip.is-on { transform: translate(0, -50%); }
  /* little room left of the preview (most laptops): a slim column of icons */
  .mm-lp .mm-lp-area > .mp-tools.is-slim { grid-template-columns: 34px; gap: 3px; padding: 2px; border-radius: 12px; }
  .mm-lp .mm-lp-area > .mp-tools.is-slim button { width: 34px; height: 34px; padding: 0; border-radius: 9px; }
  .mm-lp .mm-lp-area > .mp-tools.is-slim button span { display: none; }
  .mm-lp .mm-lp-area > .mp-tools.is-slim .mp-link-toggle { height: 34px; }
  .mm-lp .mm-lp-area > .mp-tools.is-slim.is-off::after { content: none; }
}
}