/** Shopify CDN: Minification failed

Line 385:1 Expected identifier but found "."
Line 503:49 Expected ":"

**/
/* ==========================================================
   Mabruuk product section
   Desktop/laptop/large tablet (>= 990px): media 45.14% | info
   Below 990px: stacked, media full width
   ========================================================== */

.mb-pdp {
  --mb-text: rgb(var(--color-foreground));
  --mb-muted: rgba(var(--color-foreground), 0.64);
  --mb-soft: rgba(var(--color-foreground), 0.45);
  --mb-line: rgba(var(--color-foreground), 0.1);
  --mb-line-strong: rgba(var(--color-foreground), 0.18);
  --mb-surface: rgba(var(--color-foreground), 0.035);
  --mb-cream: #FDF6EA;
  --mb-accent-soft: #FDE9C0;
  --mb-accent-soft-hover: #FBDDA0;
  --mb-pill: 999px;

  /* Vertical rhythm of the info column */
  --mb-gap: 20px;
  --mb-gap-tight: 10px;
  --mb-gap-loose: 28px;
  --mb-gap-section: 50px;

  position: relative;
}

.breadcrumb{
  display:none;
}

.mb-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top:77px;
}

/* ---------- Media column ---------- */
.mb-pdp__media-col { min-width: 0; }

.mb-gallery { display: block; }

.mb-gallery__stage {
  position: relative;
  aspect-ratio: var(--mb-media-ratio);
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
  border-bottom-right-radius: var(--mb-media-radius);
  isolation: isolate;
  container-type: inline-size;
}
.mb-pdp--media-right .mb-gallery__stage {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: var(--mb-media-radius);
}

.gw-button-widget-container{
  padding-bottom:10px;
}

.mb-gallery__viewport {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.mb-gallery__viewport::-webkit-scrollbar { display: none; }
.mb-gallery__viewport:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: -4px; }

.mb-gallery__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-gallery__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
}

.mb-gallery__img,
.mb-gallery__placeholder,
.mb-gallery__media,
.mb-gallery__media video,
.mb-gallery__media iframe,
.mb-gallery__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--mb-media-fit);
}

/* Badge */
.mb-gallery__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  padding: 7px 14px;
  border-radius: var(--mb-pill);
  background: #fff;
  color: #1c1c1c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Arrows */
.mb-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1c1c1c;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.mb-gallery__arrow--prev { left: 14px; }
.mb-gallery__arrow--next { right: 14px; }
.mb-gallery__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.mb-gallery__arrow:focus-visible { outline: 2px solid #1c1c1c; outline-offset: 2px; }

/* Light beam – Figma "Ellipse 1": 1016.98 long white ellipse, layer blur, rotated 67.86°.
   Hover on:  sweeps from top left -> bottom right (linear, 400ms)
   Hover off: sweeps back from bottom right -> top left
   Start and end points sit outside the image, so the beam is only seen while moving.
   --lu = 1 Figma px of the 650px-wide image. */
.mb-gallery__shine {
  --lu: calc(100cqw / 650);
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.mb-gallery__shine::before {
  content: "";
  position: absolute;
  /* positioned by its centre */
  left: calc(var(--mb-light-from-x) * var(--lu));
  top: calc(var(--mb-light-from-y) * var(--lu));
  width: calc(1016.98 * var(--lu));
  height: calc(var(--mb-light-size) * var(--lu));
  border-radius: 50%;
  background: #fff;
  filter: blur(calc(var(--mb-light-blur) * var(--lu)));
  transform: translate(-50%, -50%) rotate(calc(var(--mb-light-angle) * 1deg));
  opacity: var(--mb-light-strength);
  will-change: left, top;
  transition:
    left var(--mb-light-duration, 400ms) linear,
    top var(--mb-light-duration, 400ms) linear;
}
/* Desktop: hover only on real pointers (stops "sticky hover" after a tap on phones) */
@media (hover: hover) {
  .mb-gallery__stage--shine:hover .mb-gallery__shine::before {
    left: calc(var(--mb-light-to-x) * var(--lu));
    top: calc(var(--mb-light-to-y) * var(--lu));
  }
}
/* Touch screens: the script adds .is-lit (tap / in view / repeat – theme setting) */
.mb-gallery__stage.is-lit .mb-gallery__shine::before {
  left: calc(var(--mb-light-to-x) * var(--lu));
  top: calc(var(--mb-light-to-y) * var(--lu));
}
/* Jump back to the start without a visible return sweep */
.mb-gallery__stage.is-shine-reset .mb-gallery__shine::before { transition: none; }

/* ---------- Hover bar: Projection | Notes | Longevity ----------
   Figma (650px media): 30px inset, 10px gap,
   stat box 103 x 106, notes box fills (364 x 106),
   notes content 299 hug: items 73 x 78, image + name, gap 6px, items 40px apart.
   --u = 1 Figma px at 650px media width, scales down with the image. */
.mb-notes {
  --u: min(1px, calc(100cqw / 650));
  position: absolute;
  left: calc(30 * var(--u));
  right: calc(30 * var(--u));
  bottom: calc(30 * var(--u));
  z-index: 3;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(10 * var(--u));
  opacity: 0;
  pointer-events: none;
  /* Reference video: plain fade, ~0.9s in and out, no slide */
  transition: opacity var(--mb-notes-fade, 900ms) ease;
}

.mb-notes__card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(106 * var(--u));
  margin: 0;
  border-radius: calc(12 * var(--u));
  background: #fff;
  color: #1c1c1c;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Projection / Longevity */
.mb-notes__card--stat {
  flex: 0 0 calc(103 * var(--u));
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(14 * var(--u)) calc(6 * var(--u));
}
.mb-notes__icon { display: inline-flex; line-height: 0; margin-bottom: calc(6 * var(--u)); }
.mb-notes__icon svg,
.mb-notes__icon img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.mb-notes__label { font-size: max(10px, calc(12 * var(--u))); line-height: 1.3; color: rgba(28, 28, 28, 0.62); }
.mb-notes__value { font-size: max(11px, calc(14 * var(--u))); font-weight: 600; line-height: 1.3; }

/* Notes */
.mb-notes__card--notes {
  flex: 0 1 calc(364 * var(--u));
  min-width: 0;
  height: calc(106 * var(--u));
  flex-direction: row;
  justify-content: flex-start;
  gap: calc(40 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u));
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.mb-notes__card--notes::-webkit-scrollbar { display: none; }
/* centre the notes, but still scroll correctly if there are many */
.mb-notes__item:first-child { margin-left: auto; }
.mb-notes__item:last-child { margin-right: auto; }

.mb-notes__item {
  flex: 0 0 calc(73 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(6 * var(--u));
  min-height: calc(78 * var(--u));
}
.mb-notes__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(73 * var(--u));
  height: calc(54 * var(--u));
}
.mb-notes__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mb-notes__name {
  font-size: max(10px, calc(13 * var(--u)));
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.mb-notes__toggle {
  display: none;
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--mb-pill);
  background: rgba(255, 255, 255, 0.94);
  color: #1c1c1c;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

body.product header.site-header.hero-header.hero-header--menu-drawer {
  /* position: fixed; */
  border-bottom:1px solid #C9C9C9;
  animation: sticky-header-in 0.3s ease;
}


body.product header.site-header.hero-header.hero-header--menu-drawer .page-width-universal {
  max-width: 100%;
}

@media (hover: hover) {
  .mb-gallery__stage:hover .mb-notes,
  .mb-gallery__stage:focus-within .mb-notes { opacity: 1; pointer-events: auto; }
}
@media (hover: none) {
  /* Tap button / auto in view: the button is only rendered for these two modes */
  .mb-notes__toggle { display: block; }
  .mb-gallery__stage.is-notes-open .mb-notes { opacity: 1; pointer-events: auto; bottom: 56px; }

  /* Always visible: no button, bar sits in its normal place */
  .mb-gallery__stage--m-notes-always .mb-notes { opacity: 1; pointer-events: auto; }

  /* Hidden on touch screens */
  .mb-gallery__stage--m-notes-off .mb-notes { display: none; }
}

/* Small phones: let long names wrap instead of overlapping */
@media screen and (max-width: 749px) {
  .mb-notes { left: 12px; right: 12px; gap: 6px; }
  .mb-notes__card { border-radius: 10px; }
  .mb-notes__card--stat { flex-basis: 72px; padding: 10px 4px; }
  .mb-notes__card--notes { flex: 1 1 auto; height: auto; gap: 8px; padding: 10px 8px; }
  .mb-notes__item { flex-basis: 56px; }
  .mb-notes__img { width: 40px; height: 36px; }
  .mb-notes__name { white-space: normal; }






}

@media screen and (max-width: 749px) {

  .mb-breadcrumb{
    font-family: DM Sans;
font-weight: 400;
font-style: Regular;
font-size: 16px!important;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 1.5%;

  }

  body.product header.site-header.hero-header.hero-header--menu-drawer {
  /* position: fixed; */
  border-bottom:none !important;}

  .site-header .hero-header__inner{
    border-radius:0px;
  }



.mb-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top:55px !important;
}

.mb-title{
  font-family: Tenor Sans;
font-weight: 400;
font-style: Regular;
font-size: 30px;
leading-trim: NONE;
line-height: 35px;
letter-spacing: 1.15%;
}

..mb-pdp .mb-pdp__info > .mb-buy{
  margin-top:18px !important;
}

.mb-ugc__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;

}
}

/* ---------- Thumbnails (horizontal scroll) ---------- */
.mb-gallery__thumbs {
  display: none;
  gap: 10px;
  padding: 14px 20px 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mb-gallery__thumbs::-webkit-scrollbar { display: none; }
.mb-gallery--thumbs-mobile .mb-gallery__thumbs { display: flex; }

.mb-gallery__thumb {
  position: relative;
  flex: 0 0 var(--mb-thumb-size);
  aspect-ratio: var(--mb-media-ratio);
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.04);
  cursor: pointer;
  scroll-snap-align: start;
  opacity: 0.6;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.mb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-gallery__thumb[aria-current="true"] { border-color: rgb(var(--color-foreground)); opacity: 1; }
.mb-gallery__thumb:hover { opacity: 1; }
.mb-gallery__thumb:focus-visible { outline: 2px solid rgb(var(--color-foreground)); outline-offset: 2px; }
.mb-gallery__thumb-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-40%, -50%);
}

/* ==========================================================
   Info column
   Spacing is set per block (margin-top) instead of one flat gap,
   so related items sit close and groups get room to breathe.
   ========================================================== */
.mb-pdp__info-col {
  min-width: 0;
  padding: 31px 20px 48px;
}
.mb-pdp__info {
  display: flex;
  flex-direction: column;
  max-width: 640px;
}
.mb-pdp .mb-pdp__info > * { margin: 0; }
.mb-pdp .mb-pdp__info > * + * { margin-top: var(--mb-gap); }

/* Heading group: breadcrumb / title / rating stay tight */
.mb-pdp .mb-pdp__info > .mb-breadcrumb + .mb-title-wrap { margin-top: 12px; }
.mb-pdp .mb-pdp__info > .mb-title-wrap + .mb-rating { margin-top: 12px; }

/* Price + its small print */
.mb-pdp .mb-pdp__info > .mb-price { margin-top: 28px; }
.mb-pdp .mb-pdp__info > .mb-price__note,
.mb-pdp .mb-pdp__info > .installment { margin-top: 6px; }

/* Stock / SKU hug the item above */
.mb-pdp .mb-pdp__info > .mb-inventory,
.mb-pdp .mb-pdp__info > .mb-sku { margin-top: var(--mb-gap-tight); }

/* Purchase group */
.mb-pdp .mb-pdp__info > .mb-variants { margin-top: var(--mb-gap-loose); }
.mb-pdp .mb-pdp__info > .mb-qty { margin-top: 24px; }
.mb-pdp .mb-pdp__info > .mb-buy { margin-top: 20px; }
.mb-pdp .mb-pdp__info > .mb-qty + .mb-buy { margin-top: 16px; }
.mb-pdp .mb-pdp__info > .mb-bundle { margin-top:20px; }
.mb-pdp .mb-pdp__info > .mb-ugc { margin-top: 36px; }
.mb-pdp .mb-pdp__info > .mb-help { margin-top: 24px; }

/* Divider gets equal room on both sides */
.mb-pdp .mb-pdp__info > .mb-divider,
.mb-pdp .mb-pdp__info > .mb-divider + * { margin-top: 24px; }

/* Shipping bar – Figma 640 x 60, 30px below the price.
   With a divider between them, the divider sits 30px under the price
   and becomes the top edge of the bar. */
.mb-pdp .mb-pdp__info > .mb-price + .mb-ship,
.mb-pdp .mb-pdp__info > .mb-price + .mb-divider { margin-top: 30px; }
.mb-pdp .mb-pdp__info > .mb-divider + .mb-ship { margin-top: 0; }

/* Breadcrumb */
.mb-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #707070;

}
.mb-breadcrumb__link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.mb-breadcrumb__link:hover { color: var(--mb-text); }
.mb-breadcrumb__sep { margin: 0 8px; opacity: 0.7; }
.mb-breadcrumb__current { color: black; font-size}

/* Title */
.mb-title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--mb-text);
}

/* Rating */
.mb-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--mb-muted);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
.mb-rating__stars {
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  background: linear-gradient(90deg, var(--mb-star) var(--mb-rating-pct), rgba(var(--color-foreground), 0.16) var(--mb-rating-pct));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mb-rating__value { color: var(--mb-text); font-weight: 600; }
.mb-rating__count { transition: color 0.2s ease; }
.mb-rating:hover .mb-rating__count { color: var(--mb-text); text-decoration: underline; text-underline-offset: 3px; }

/* Price – matched to the reference video (10s loop, linear):
   invisible → fades in gold (0–28%) → slowly darkens to the text colour (28–68%)
   → holds (68–72%) → fades out (72–100%). Compare-at price stays still.
   Starts at the "holding" point so the price is readable on page load. */
.mb-price {
  --mb-price-cycle: 10s;
  --mb-price-hl: #E8A317;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  min-height: 28px;
}
.mb-price__current {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--mb-text);
}
.mb-price__compare {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--mb-soft);
}
.mb-price--animate .mb-price__current {
  animation: mb-price-cycle var(--mb-price-cycle) linear infinite;
  animation-delay: calc(var(--mb-price-cycle) * -0.68);
}
@keyframes mb-price-cycle {
  0%   { opacity: 0; color: var(--mb-price-hl); }
  2.5% { opacity: 1; color: var(--mb-price-hl); }  /* snap in gold */
  7.5% { opacity: 1; color: var(--mb-text); }      /* snap to black */
  92%  { opacity: 1; color: var(--mb-text); }      /* hold */
  100% { opacity: 0; color: var(--mb-text); }
}

@keyframes mb-price-shine {
  0%, 2.75% { left: 100%; opacity: 0; }
  3%        { left: 100%; opacity: 1; }
  5.25%     { left: 0%;   opacity: 1; }
  7.5%      { left: 100%; opacity: 1; }
  7.75%, 100% { left: 100%; opacity: 0; }
}

/* Light streak across the price. It is painted in the page background colour,
   so it only shows where it crosses the digits. It uses the same loop and
   delay as the colour animation, so the two stay in step. */
.mb-price--shine {
  position: relative;
  width: fit-content;          /* travel only across the prices, not the whole column */
}
.mb-price--shine::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 100%;
  z-index: 1;
  width: 12px;
  background: linear-gradient(90deg,
    transparent,
    rgb(var(--color-background)) 50%,
    transparent);
  transform: translateX(-50%) skewX(-12deg);
  opacity: 0;
  pointer-events: none;
  animation: mb-price-shine var(--mb-price-cycle) linear infinite;
  animation-delay: calc(var(--mb-price-cycle) * -0.68);
}
@keyframes mb-price-shine {
  0%, 32% { left: 100%; opacity: 0; } /* waiting past the struck-out price */
  34%     { left: 100%; opacity: 1; } /* starts while the price is gold */
  65%     { left: 0%;   opacity: 1; } /* reaches the "$" as the price turns black */
  97%     { left: 100%; opacity: 1; } /* sweeps back out on the right */
  100%    { left: 100%; opacity: 0; }
}
.mb-price__note { font-size: 12px; line-height: 1.5; color: var(--mb-muted); }
.mb-price__note a { color: inherit; }

/* Divider */
.mb-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--mb-line);
}

/* Shipping */
/* Shipping bar – Figma "Delivery tab": 640 x 60, white, 1px #E3E3E3 top + bottom,
   content clipped so the glow enters and leaves from outside the bar */
.mb-ship {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  height: 60px;
  padding: 0;
  background: #fff;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
  overflow: hidden;
}
/* A Divider block right above already draws the top line */
.mb-divider + .mb-ship { border-top: 0; }

/* Shipping glow – Figma "Ellipse 2": a tall soft light that starts just outside the left edge,
   sweeps across and out on the right, pauses, sweeps back, rests. 16s loop (from the video).
   "Follows the cursor" mode: the script sets --mb-glow-x while a mouse is over the row. */
.mb-ship--glow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  z-index: -1;
  width: 22px;      /* Figma ellipse is 5 x 81 with a heavy blur; widened a little so it reads on screen */
  height: 81px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mb-ship-glow, #F5A623) var(--mb-ship-glow-strength, 55%), transparent);
  filter: blur(12px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Automatic (default) – and the fallback for touch screens in cursor mode */
.mb-ship--glow-auto::before {
  animation: mb-ship-sweep var(--mb-ship-glow-cycle, 16s) ease-in-out infinite;
}
@media (hover: none) {
  .mb-ship--glow-cursor::before {
    opacity: 1;
    animation: mb-ship-sweep var(--mb-ship-glow-cycle, 16s) ease-in-out infinite;
  }
}
@keyframes mb-ship-sweep {
  0%   { left: -15px; }                 /* Figma start: just outside the left edge */
  22%  { left: calc(100% + 15px); }     /* sweeps across and out on the right */
  36%  { left: calc(100% + 15px); }     /* pause outside */
  55%  { left: -15px; }                 /* sweeps back and out on the left */
  100% { left: -15px; }                 /* rest */
}

/* Follows the cursor (mouse / trackpad) */
.mb-ship--glow-cursor::before {
  left: var(--mb-glow-x, -15px);
  opacity: 0;
  transition: opacity 0.35s ease, left 0.12s linear;
}
.mb-ship--glow-cursor.is-glowing::before { opacity: 1; }

/* Shipping bar content – Figma: lucide truck 30px, 10px gap, DM Sans Medium 14 */
.mb-ship__icon { display: inline-flex; flex: 0 0 30px; width: 30px; height: 30px; color: #C58B18; }
.mb-ship__icon svg,
.mb-ship__icon img { display: block; width: 30px; height: 30px; object-fit: contain; }
.mb-ship__text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.168px;
  text-transform: capitalize;
  white-space: nowrap;
  color: #000;
}
.mb-ship__text mb-ship-date { font-weight: inherit; }

/* Inventory / SKU */
.mb-inventory,
.mb-sku { font-size: 13px; line-height: 1.4; color: var(--mb-muted); }
.mb-inventory { display: flex; align-items: center; gap: 6px; }
.mb-inventory.visibility-hidden,
.mb-sku.visibility-hidden { display: none; }

/* ---------- Variant picker (Dawn pills + dropdown) ---------- */
.mb-variants variant-selects { display: block; }
.mb-variants .product-form__input {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.mb-variants .product-form__input + .product-form__input { margin-top: 20px; }
.mb-variants .form__label,
.mb-variants .product-form__input legend {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--mb-text);
}
.mb-variants .product-form__input--pill input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 42px;
  margin: 0 8px 8px 0;
  padding: 0 20px;
  border: 1px solid var(--mb-line-strong);
  border-radius: var(--mb-pill);
  background: transparent;
  color: var(--mb-text);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.mb-variants .product-form__input--pill input[type="radio"] + label:hover {
  border-color: rgb(var(--color-foreground));
}
.mb-variants .product-form__input--pill input[type="radio"]:checked + label {
  border-color: var(--mb-btn-bg);
  background: var(--mb-btn-bg);
  color: var(--mb-btn-fg);
}
.mb-variants .product-form__input--pill input[type="radio"]:focus-visible + label {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: 2px;
}
.mb-variants .select { max-width: 320px; }
.mb-variants .select__select {
  height: 46px;
  padding-left: 18px;
  border-radius: 12px;
  font-size: 14px;
}
.mb-variants .select::before,
.mb-variants .select::after { border-radius: 12px; }

/* ---------- Quantity ---------- */
.mb-qty .quantity__label {
  display: block;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--mb-text);
}
.mb-qty .quantity {
  width: 136px;
  min-height: 46px;
  border: 1px solid var(--mb-line-strong);
  border-radius: var(--mb-pill);
  overflow: hidden;
}
.mb-qty .quantity::before,
.mb-qty .quantity::after { display: none; }
.mb-qty .quantity__button { width: 44px; color: var(--mb-text); }
.mb-qty .quantity__button .svg-wrapper { width: 12px; height: 12px; }
.mb-qty .quantity__input { font-size: 15px; font-weight: 500; }
.mb-qty .quantity__rules { margin-top: 6px; font-size: 12px; color: var(--mb-muted); }
.mb-qty .quantity__rules:empty { display: none; }

/* ---------- Buy buttons ---------- */
.mb-buy .product-form { margin: 0; }
.mb-buy .product-form__buttons { max-width: none; }
.mb-pdp .mb-buy .product-form__submit {
  min-height: 54px;
  margin: 0;
  border-radius: var(--mb-pill);
  background: var(--mb-btn-bg);
  color: var(--mb-btn-fg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.mb-pdp .mb-buy .product-form__submit::before,
.mb-pdp .mb-buy .product-form__submit::after { box-shadow: none; border-radius: var(--mb-pill); }
.mb-pdp .mb-buy .product-form__submit:hover { filter: brightness(1.2); }
.mb-pdp .mb-buy .product-form__submit:active { transform: scale(0.99); }
.mb-pdp .mb-buy .product-form__submit[disabled] { opacity: 0.45; filter: none; cursor: not-allowed; }
.mb-pdp .mb-buy .product-form__submit > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mb-pdp .mb-buy .product-form__submit > span::after {
  /* content: ""; */
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 9h16l-1.5 11h-13z'/%3E%3Cpath d='M8.5 9V7a3.5 3.5 0 0 1 7 0v2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 9h16l-1.5 11h-13z'/%3E%3Cpath d='M8.5 9V7a3.5 3.5 0 0 1 7 0v2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mb-buy .shopify-payment-button { margin-top: 10px; }
.mb-buy .shopify-payment-button__button {
  min-height: 54px;
  border-radius: var(--mb-pill) !important;
  overflow: hidden;
}
.mb-buy .shopify-payment-button__more-options { margin-top: 10px; font-size: 13px; }
.mb-buy .product-form__error-message-wrapper { margin-bottom: 12px; font-size: 13px; }
.mb-buy pickup-availability { margin-top: 16px; }

.product__pickup-availabilities {
  display:none !important;
}.wishlist-auto-injected, .wls-scope{
  display:none;
}

/* ---------- Bundle offer ---------- */
/* ---------- Bundle offer – Figma "Component 4" (640 x 80) ---------- */
.mb-bundle {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 80px;
  border: 1px solid transparent;
  border-radius: 10px;
  background:
    /* faint coloured glows (Figma Ellipse 3–7) */
    radial-gradient(ellipse 200px 34px at 28% 0%,   rgba(140, 230, 140, 0.10), transparent 70%) padding-box,
    radial-gradient(ellipse 200px 34px at 99% 0%,   rgba(170, 120, 255, 0.10), transparent 70%) padding-box,
    radial-gradient(ellipse 200px 34px at 0% 100%,  rgba(255, 170, 60, 0.10),  transparent 70%) padding-box,
    radial-gradient(ellipse 200px 34px at 38% 100%, rgba(255, 150, 120, 0.08), transparent 70%) padding-box,
    radial-gradient(ellipse 200px 30px at 78% 100%, rgba(255, 210, 120, 0.08), transparent 70%) padding-box,
    linear-gradient(var(--mb-bundle-bg), var(--mb-bundle-bg)) padding-box,
    /* gradient border */
    linear-gradient(90deg, var(--mb-bundle-b1), var(--mb-bundle-b2) 50%, var(--mb-bundle-b3)) border-box;
  box-shadow: 0 0 10px #D5D5D5;
  color: #000;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.mb-bundle:hover { box-shadow: 0 0 14px rgba(248, 32, 188, 0.22); }

.mb-bundle__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 12px 0 12px 15px;
}
.mb-bundle__head { display: flex; align-items: center; gap: 10px; }

.mb-bundle__badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid #FFE0A5;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--mb-bundle-badge), #FF9800);
  filter: drop-shadow(0 0 2.5px rgba(253, 153, 6, 0.4));
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.13px;
  white-space: nowrap;
}
.mb-bundle__title {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.5px;
  letter-spacing: 0.24px;
  color: #000;
}
.mb-bundle__sub {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.156px;
  color: #969696;
}
.mb-bundle__sub--indent { padding-left: 53px; } /* lines up under the title */

.mb-bundle__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0 50px 0 16px;   /* Figma: arrow ends 50px before the image fade */
  color: #000;
  transition: transform 0.2s ease;
}
.mb-bundle:hover .mb-bundle__arrow { transform: translateX(4px); }

.mb-bundle__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 143px;
}
.mb-bundle__media::before {        /* Figma: 23px fade into the image */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 23px;
  background: linear-gradient(90deg, rgba(243, 233, 192, 0), #F3E9C0);
}
.mb-bundle__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-bundle:has(.mb-bundle__media) { padding-right: 166px; } /* image + fade */

@media screen and (max-width: 749px) {
  .mb-bundle { min-height: 72px; }
  .mb-bundle:has(.mb-bundle__media) { padding-right: 104px; }
  .mb-bundle__media { width: 90px; }
  .mb-bundle__media::before { width: 14px; }
  .mb-bundle__body { padding-left: 12px; gap: 5px; }
  .mb-bundle__head { gap: 8px; }
  .mb-bundle__title { font-size: 14px; line-height: 20px; }
  .mb-bundle__sub { font-size: 11px; }
  .mb-bundle__sub--indent { padding-left: 0; }
  .mb-bundle__arrow { margin: 0 12px 0 8px; }
}

/* ---------- Customer photos slider ---------- */
.mb-ugc { display: block; }
.mb-ugc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.mb-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px !important;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: #707070;

}
.mb-ugc__heading {
  margin: 0;
  font-family:DM Sans;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.mb-ugc__nav { display: flex; gap: 8px; }
.mb-ugc__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--mb-line-strong);
  border-radius: 50%;
  background: #fff;
  color: #1c1c1c;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mb-ugc__btn:not(:disabled):hover { border-color: #1c1c1c; }
.mb-ugc__btn:disabled { opacity: 0.35; cursor: default; }
.mb-ugc__track {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mb-ugc__track::-webkit-scrollbar { display: none; }
.mb-ugc__card {
  position: relative;
  flex: 0 0 var(--mb-ugc-card);
  aspect-ratio: 115 / 175;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  background: rgba(var(--color-foreground), 0.05);
}
.mb-ugc__link { display: block; height: 100%; color: inherit; }
.mb-ugc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.mb-ugc__card:hover .mb-ugc__img { transform: scale(1.04); }
/* Video cards: muted loop, fills the card like a photo */
.mb-ugc__video { background: #000; pointer-events: none; }
.mb-ugc__card--video .mb-ugc__link { position: relative; }
.mb-ugc__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 10px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62));
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Help link ---------- */
.mb-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  /* padding: 14px 18px; */
  border-radius: 12px;
  /* background: var(--mb-cream); */
  font-size: 14px;
  line-height: 1.4;
}
.mb-help__text { color: var(--mb-muted); }
.mb-help__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mb-link);
  font-weight: 600;
  text-decoration: none;
}
.mb-help__link svg { transition: transform 0.2s ease; }
.mb-help__link:hover svg { transform: translateX(3px); }

/* ==========================================================
   Accordions – one look for every accordion in the column:
   the section's collapsible rows, About This Scent,
   Featured Notes and How Users Experience.
   A run of accordions stacks with a single line between each.
   ========================================================== */
.mb-pdp .mb-pdp__info > :is(details.mb-acc, details[data-mb-accordion]) {
  margin-top: var(--mb-gap-section);
  /* border-top: 1px solid var(--mb-line-strong); */
  border-bottom: 1px solid var(--mb-line-strong);
}
.mb-pdp .mb-pdp__info > :is(details, script) + :is(details.mb-acc, details[data-mb-accordion]),
.mb-pdp .mb-pdp__info > :is(details, script) + style + :is(details.mb-acc, details[data-mb-accordion]) {
  margin-top: 0;
  border-top: 0;
}

/* Section collapsible row – matches the snippet accordions */
.mb-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.mb-acc__summary::-webkit-details-marker { display: none; }
.mb-acc__summary:focus-visible { outline: 2px solid var(--mb-text); outline-offset: 4px; }
.mb-acc__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--mb-text);
}
.mb-acc__icon {
  position: relative;
  flex: 0 0 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--mb-accent-soft);
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.mb-acc__summary:hover .mb-acc__icon { background: var(--mb-accent-soft-hover); }
.mb-acc__icon::before,
.mb-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.6px;
  background: #1c1c1c;
  transform: translate(-50%, -50%);
}
.mb-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.mb-acc[open] .mb-acc__icon { transform: rotate(45deg); }
.mb-acc.mb-is-closing .mb-acc__icon { transform: none; }
.mb-acc__content {
  padding-bottom: 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mb-muted);
}
.mb-acc__content > :first-child { margin-top: 0; }
.mb-acc__content > :last-child { margin-bottom: 0; }

.mb-description,
.mb-text { font-size: 15px; line-height: 1.65; color: var(--mb-muted); }
.mb-description > :first-child { margin-top: 0; }
.mb-description > :last-child { margin-bottom: 0; }

/* ==========================================================
   Phones
   ========================================================== */
@media screen and (max-width: 749px) {
  .mb-pdp { --mb-gap-section: 32px; }
  .mb-acc__title { font-size: 20px; }
  .mb-acc__summary { padding: 18px 0; }
  .mb-acc__icon { flex-basis: 38px; height: 38px; }
  .mb-acc__icon::before,
  .mb-acc__icon::after { width: 12px; }
  .mb-acc__content { font-size: 14px; padding-bottom: 24px; }
  .mb-pdp .mb-buy .product-form__submit { min-height: 52px; }
  .mb-bundle__media { flex-basis: 24%; }
}

/* ==========================================================
   Tablet (stacked): centre the info column
   ========================================================== */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .mb-pdp__info-col { padding: 36px 40px 56px; }
  .mb-pdp__info { margin-inline: auto; }
  .mb-title { font-size: 32px; }
  .mb-gallery__arrow { width: 42px; height: 42px; }
}

/* ==========================================================
   Desktop, laptop, large tablet
   ========================================================== */
@media screen and (min-width: 990px) {
  .mb-pdp__grid {
    grid-template-columns: var(--mb-media-width) minmax(0, 1fr);
    align-items: start;
  }
  .mb-pdp--media-right .mb-pdp__media-col { order: 2; }

  /* Media stays fixed while the info column scrolls;
     once the info ends the whole section scrolls away */
  .mb-pdp--sticky .mb-pdp__media-col {
    position: sticky;
    top: var(--mb-sticky-top);
  }

  .mb-gallery__thumbs { display: none; padding-left: 20px; padding-right: 20px; }
  .mb-gallery--thumbs-desktop .mb-gallery__thumbs { display: flex; }

  .mb-gallery__badge { top: 20px; left: 20px; }
  .mb-gallery__arrow { width: 44px; height: 44px; }
  .mb-gallery__arrow--prev { left: 20px; }
  .mb-gallery__arrow--next { right: 20px; }

  /* Figma 1440: 50 / 100 / 60 / 50 – scales down proportionally below 1440 */
  .mb-pdp__info-col {
    padding:
      min(50px, 3.4722vw)
      min(100px, 6.9444vw)
      min(60px, 4.1667vw)
      min(50px, 3.4722vw);
  }
  .mb-pdp--media-right .mb-pdp__info-col {
    padding-left: min(100px, 6.9444vw);
    padding-right: min(50px, 3.4722vw);
  }

  .mb-pdp .mb-pdp__info > .mb-breadcrumb + .mb-title-wrap { margin-top: 14px; }
  .mb-pdp .mb-pdp__info > .mb-price { margin-top: 50px; }

  .mb-title { font-size: font-family: Tenor Sans;
font-weight: 400;
font-style: Regular;
font-size: 40px;
leading-trim: NONE;
line-height: 45px;
letter-spacing: 1.15%;
; }
  .mb-price__current { font-size: 30px; }
  .mb-price__compare { font-size: 24px; }
  .mb-ugc__heading { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-notes,
  .mb-bundle,
  .mb-bundle__arrow,
  .mb-ugc__img,
  .mb-gallery__shine::before { transition: none; }
  .mb-price--animate .mb-price__current { animation: none; }
  .mb-ship--glow::before { animation: none !important; }
  
}

/* =====================================================================
   Add to cart – hover animation
   Figma: Mabruuk – Redesign › Desktop 2 (node 1270:4163)
   Default  #242920 → Hover #D89412, basket icon spins 360°.
   Timing measured from the design recording:
     hover in  – fill ~80ms, icon spin ~450ms (fast start, soft stop)
     hover out – fill fades back ~280ms, icon spins back ~350ms
   Paste at the end of assets/section-main-product-mabruuk.css
   ===================================================================== */

.mb-pdp .mb-buy .product-form__submit {
  background-color: var(--mb-btn-bg, #242920);
  color: var(--mb-btn-fg, #fff);
  /* hover-OUT timing (the state we return to) */
  transition:
    background-color 280ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 280ms ease;
}

/* The basket icon (inline SVG or <img>). The loading spinner is left alone. */
.mb-pdp .mb-buy .product-form__submit svg:not(.spinner),
.mb-pdp .mb-buy .product-form__submit img,
.mb-pdp .mb-buy .product-form__submit .mb-atc__icon {
  display: inline-block;
  flex-shrink: 0;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 350ms cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

/* ---- Hover / keyboard focus ---- */
@media (hover: hover) {
  .mb-pdp .mb-buy .product-form__submit:not([disabled]):not([aria-disabled='true']):hover {
    background-color: var(--mb-btn-hover-bg, #d89412);
    color: var(--mb-btn-hover-fg, #fff);
    transition:
      background-color 80ms linear,
      color 80ms linear;
  }

  .mb-pdp .mb-buy .product-form__submit:not([disabled]):not([aria-disabled='true']):hover svg:not(.spinner),
  .mb-pdp .mb-buy .product-form__submit:not([disabled]):not([aria-disabled='true']):hover img,
  .mb-pdp .mb-buy .product-form__submit:not([disabled]):not([aria-disabled='true']):hover .mb-atc__icon {
    transform: rotate(var(--mb-btn-spin, 360deg));
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

.mb-pdp .mb-buy .product-form__submit:not([disabled]):focus-visible {
  background-color: var(--mb-btn-hover-bg, #d89412);
  color: var(--mb-btn-hover-fg, #fff);
}

.mb-pdp .mb-buy .product-form__submit:not([disabled]):focus-visible svg:not(.spinner),
.mb-pdp .mb-buy .product-form__submit:not([disabled]):focus-visible img,
.mb-pdp .mb-buy .product-form__submit:not([disabled]):focus-visible .mb-atc__icon {
  transform: rotate(var(--mb-btn-spin, 360deg));
}

/* Touch screens: quick gold flash on tap */
.mb-pdp .mb-buy .product-form__submit:not([disabled]):active {
  background-color: var(--mb-btn-hover-bg, #d89412);
}

/* Dawn draws a hover border with ::after – hide it so only the fill changes */
.mb-pdp .mb-buy .product-form__submit::after,
.mb-pdp .mb-buy .product-form__submit:hover::after {
  box-shadow: none;
}

/* If the icon is wrapped in .mb-atc__icon, don't spin the SVG inside it twice */
.mb-pdp .mb-buy .product-form__submit .mb-atc__icon svg,
.mb-pdp .mb-buy .product-form__submit .mb-atc__icon img {
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mb-pdp .mb-buy .product-form__submit,
  .mb-pdp .mb-buy .product-form__submit * {
    transition-duration: 1ms !important;
  }
  .mb-pdp .mb-buy .product-form__submit svg,
  .mb-pdp .mb-buy .product-form__submit img,
  .mb-pdp .mb-buy .product-form__submit .mb-atc__icon {
    transform: none !important;
  }
}