/* Source campaign artwork: serve the authorised originals at their native ratio.
   These images contain Arabic/French product copy, so they are never cropped or
   recreated with AI. The WebP source is a gently sharpened, responsive derivative. */
.source-creative {
  width: 100%;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 3.25rem) clamp(1rem, 4vw, 4rem);
}

.source-creative-frame {
  position: relative;
  width: min(100%, 1500px);
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(9, 39, 28, .18);
}

.source-creative picture,
.source-creative img {
  display: block;
  width: 100%;
  height: auto;
}

/* The illustrated "أضف إلى السلة" control is a real link, fitted to the
   button's 1600×600 source-pixel bounds: x 86–343, y 499–553. The site uses
   an order form rather than a standalone cart, so it takes the shopper there. */
.creative-cta {
  position: absolute;
  z-index: 5;
  display: block;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.creative-cta--curve {
  left: 5.375%;
  top: 83.167%;
  width: 16.063%;
  height: 9%;
}
.creative-cta--curve::after {
  content: "";
  position: absolute;
  inset: -4%;
  border: 2px solid transparent;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(232, 207, 138, 0);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.creative-cta--curve:hover::after,
.creative-cta--curve:focus-visible::after {
  border-color: rgba(232, 207, 138, .95);
  box-shadow: 0 0 0 4px rgba(9, 59, 40, .42), 0 0 18px rgba(232, 207, 138, .48);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The supplied artwork remains one intact image. These transparent, pointer-only
   overlays let its individual packs, ingredients, and review cards respond without
   cropping, redrawing, or moving the entire creative. */
.creative-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 50%;
  pointer-events: auto;
  cursor: default;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0 43%, transparent 46%);
  transition: transform .42s cubic-bezier(.2,.75,.25,1), box-shadow .42s ease, background .42s ease;
}
.creative-hotspot::before {
  content: "";
  position: absolute;
  inset: -9%;
  border: 1px solid rgba(232, 207, 138, 0);
  border-radius: inherit;
  transition: inset .42s cubic-bezier(.2,.75,.25,1), border-color .42s ease, opacity .42s ease;
  opacity: 0;
}
.creative-hotspot::after {
  content: "";
  position: absolute;
  inset: 19%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 68%);
  opacity: 0;
  transition: opacity .32s ease;
}

/* Positions follow the native artwork rather than imposing a new layout. */
.creative-hotspot--curve { width: 25%; aspect-ratio: 1; left: 37.5%; top: 11%; }
/* Centre points measured from the 2170×725 source artwork:
   205,346 · 548,346 · 874,346 · 1202,346 · 1534,346. */
.creative-hotspot--fenugreek { width: 9.2%; aspect-ratio: 1; left: 4.84%; top: 33.93%; }
.creative-hotspot--dates { width: 9.2%; aspect-ratio: 1; left: 20.64%; top: 33.93%; }
.creative-hotspot--maca { width: 9.2%; aspect-ratio: 1; left: 35.67%; top: 33.93%; }
.creative-hotspot--protein { width: 9.2%; aspect-ratio: 1; left: 50.78%; top: 33.93%; }
.creative-hotspot--greens { width: 9.2%; aspect-ratio: 1; left: 66.08%; top: 33.93%; }
.creative-hotspot--collagen { width: 21%; aspect-ratio: 1; left: 28%; top: 36%; }
.creative-hotspot--protine { width: 24%; aspect-ratio: 1; left: 43%; top: 27%; }
.creative-hotspot--detox { width: 22%; aspect-ratio: 1; left: 66%; top: 35%; }

.creative-shimmer {
  position: absolute;
  z-index: 3;
  left: 37%;
  top: 14%;
  width: 27%;
  height: 72%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 46% 46% 12% 12%;
}
.creative-shimmer::after {
  content: "";
  position: absolute;
  inset: -25% -55%;
  background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform .75s cubic-bezier(.22,.72,.22,1);
}

.review-spark {
  position: absolute;
  z-index: 3;
  top: 39%;
  color: #d3a23a;
  font: 700 clamp(.55rem, 1.7vw, 1.55rem)/1 Arial, sans-serif;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(8px) scale(.88);
  filter: drop-shadow(0 4px 7px rgba(90,55,8,.15));
  pointer-events: none;
  transition: opacity .32s ease, transform .42s cubic-bezier(.2,.75,.25,1);
}
.review-spark--first { left: 7%; }
.review-spark--second { left: 39%; }
.review-spark--third { left: 70%; }

@media (hover:hover) and (pointer:fine) {
  .creative-hotspot:hover { transform: scale(1.055); background: radial-gradient(circle, rgba(255,255,255,.18) 0 42%, rgba(232,207,138,.08) 52%, transparent 72%); box-shadow: 0 0 0 1px rgba(232,207,138,.36), 0 0 32px rgba(232,207,138,.22); }
  .creative-hotspot:hover::before { inset: -2%; opacity: 1; border-color: rgba(232,207,138,.76); }
  .creative-hotspot:hover::after { opacity: 1; }
  .creative-frame--curve:hover .creative-shimmer::after { transform: translateX(120%) skewX(-12deg); }
  .creative-frame--reviews:hover .review-spark { opacity: 1; transform: translateY(0) scale(1); }
  .creative-frame--reviews:hover .review-spark--second { transition-delay: .08s; }
  .creative-frame--reviews:hover .review-spark--third { transition-delay: .16s; }
}

@media (prefers-reduced-motion: reduce) {
  .creative-hotspot, .creative-hotspot::before, .creative-hotspot::after, .creative-shimmer::after, .review-spark { transition: none !important; }
  .creative-hotspot:hover { transform: none; }
}

.source-creative--range { background: linear-gradient(135deg, #eff3e7, #e6d6ba); }
.source-creative--range .source-creative-frame { max-width: 1320px; border-radius: 2px; }

.source-creative--curve { background: #f8f4ea; padding-inline: 0; }
.source-creative--curve .source-creative-frame { width: 100%; max-width: none; box-shadow: none; }

.source-creative--ingredients { background: #063e2d; padding-inline: 0; }
.source-creative--ingredients .source-creative-frame { width: 100%; max-width: none; box-shadow: none; }

.source-creative--reviews { background: #f8f5eb; padding-inline: 0; }
.source-creative--reviews .source-creative-frame { width: 100%; max-width: none; box-shadow: none; }

@media (max-width: 760px) {
  .source-creative { padding: .75rem 0; }
  .source-creative--range { padding: 1rem; }
  .source-creative--range .source-creative-frame { box-shadow: 0 12px 28px rgba(9, 39, 28, .14); }
}