/* ==========================================================================
   Crumbly link page
   Brand: cream + pink + ink. Same type as crumblynow.com:
   Inter for body text, Source Sans 3 (black) for headings.
   ========================================================================== */

:root {
  --cream: #FFF2E8;
  --cream-2: #FAF7F5;
  --pink: #FFC8D3;
  --pink-2: #FFE4E9;
  --pink-deep: #F29BB0;
  --rose: #E6ACB4;
  --ink: #040404;
  --ink-2: #2A2220;
  --muted: #7A6A64;
  --choco: #6B4332;
  --red: #B91C1C;
  --wa: #25D366;
  --wa-deep: #128C4A;

  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.75);
  --shadow-soft: 0 18px 40px -18px rgba(107, 67, 50, 0.32);
  --shadow-lift: 0 26px 50px -20px rgba(107, 67, 50, 0.42);

  --font-display: 'Source Sans 3', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --col: 460px;
  --gutter: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clip sideways overflow at the root (entrances slide in from off-screen) without making a scroll container */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

img,
video,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 14px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--choco);
}
:root[lang='ar'] .eyebrow { letter-spacing: 0; font-size: 12px; }

/* --------------------------------------------------------------------------
   Background: soft blobs, floating cookies, grain
   -------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg__blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.75;
}
@keyframes blob-pan {
  to { translate: 70px 50px; scale: 1.18; }
}
.bg__blob--pink {
  width: 520px; height: 520px;
  top: -180px; inset-inline-start: -160px;
  background: radial-gradient(circle, var(--pink) 0%, transparent 70%);
}
.bg__blob--peach {
  width: 560px; height: 560px;
  bottom: -220px; inset-inline-end: -200px;
  background: radial-gradient(circle, #FFD9B8 0%, transparent 70%);
}
.bg__blob--rose {
  width: 380px; height: 380px;
  top: 38%; inset-inline-end: -180px;
  background: radial-gradient(circle, var(--pink-2) 0%, transparent 70%);
}
/* Cookies pinned beside page sections so they sit behind glass, never behind body text */
body { position: relative; }
.floaters {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.floater {
  --size: clamp(118px, 15vw, 210px);
  position: absolute;
  width: var(--size);
  aspect-ratio: 1;
  translate: 0 calc(var(--parallax, 0) * 1px);
}
.js .floater {
  opacity: 0;
  transform: translateX(var(--enter-x, 0)) rotate(var(--enter-r, 0deg)) scale(0.7);
  transition:
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) var(--enter-delay, 0ms),
    opacity 0.5s ease var(--enter-delay, 0ms);
}
.js .floater.is-in { opacity: 1; transform: none; }
.floater--left { left: max(calc(var(--size) * -0.6), calc(50% - 230px - var(--size) * 0.8)); }
.floater--right { right: max(calc(var(--size) * -0.6), calc(50% - 230px - var(--size) * 0.8)); }
.floater img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(107, 67, 50, 0.26));
}
/* Looping animations start only once their section is on screen. Safari parks animations that
   begin while invisible, which froze the page until the first scroll. */
:root:not(.js) .floater img,
.floater.is-in img {
  animation: drift var(--dur, 16s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(var(--r0, 0deg)); }
  50% { transform: translateY(-18px) rotate(calc(var(--r0, 0deg) + 14deg)); }
}

/* --------------------------------------------------------------------------
   Top bar with language toggle
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 0;
}
.topbar__inner {
  animation: drop-in 0.9s var(--ease-spring) both;
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  /* pink glass so the bar stands out from the cream page while scrolling */
  background: linear-gradient(135deg, rgba(255, 214, 223, 0.92), rgba(255, 193, 206, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 14px 30px -14px rgba(214, 90, 125, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root[dir='rtl'] .topbar__inner { padding: 6px 14px 6px 6px; }
.topbar__logo img { height: 26px; width: auto; }
/* the Arabic wordmark is narrower, so it gets a little more height */
:root[lang='ar'] .topbar__logo img { height: 31px; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(4, 4, 4, 0.06);
  transition: transform 0.2s var(--ease-out), background 0.2s;
}
.icon-btn:hover { background: #fff; transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--round { width: 42px; height: 42px; background: var(--glass-strong); box-shadow: var(--shadow-soft); }
:root[dir='rtl'] .lineup__arrow svg { transform: scaleX(-1); }

.lang {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: var(--ink);
  isolation: isolate;
}
.lang button {
  position: relative;
  z-index: 1;
  min-width: 52px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.3s var(--ease-out);
}
.lang button[lang='ar'] { font-weight: 700; letter-spacing: 0; }
.lang button[aria-pressed='true'] { color: var(--ink); }
.lang__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--pink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px -2px rgba(242, 155, 176, 0.7);
  transition: transform 0.45s var(--ease-spring);
}
/* Toggle keeps EN on the left in both directions, so the thumb moves physically */
.lang { direction: ltr; }
.lang[data-active='ar'] .lang__thumb { transform: translateX(100%); }

/* --------------------------------------------------------------------------
   Page column
   -------------------------------------------------------------------------- */
.page {
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 26px var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: opacity 0.18s ease;
}
.is-switching .page { opacity: 0; }

/* Entrance animations. JS adds .is-in as each element comes into view, staggered through --d. */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease-out) var(--d, 0ms),
    transform 1.15s var(--ease-out) var(--d, 0ms),
    filter 0.9s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal='rise'] { transform: translateY(28px); }
.js [data-reveal='pan'] { transform: scale(1.2) translateY(20px); }
.js [data-reveal='pop'] {
  transform: translateY(16px) scale(0.8);
  transition-timing-function: ease, var(--ease-spring), ease;
}
.js [data-reveal='tilt'] {
  transform: translateY(70px) scale(0.92);
  transform-origin: 50% 100%;
}
.js [data-reveal='from-start'] { transform: translateX(-70px); }
.js [data-reveal='from-end'] { transform: translateX(70px); }
:root.js[dir='rtl'] [data-reveal='from-start'] { transform: translateX(70px); }
:root.js[dir='rtl'] [data-reveal='from-end'] { transform: translateX(-70px); }
.js [data-reveal='cards'] { opacity: 1; }
/* the RTL starting offsets are more specific, so the landed state has to match them */
.js [data-reveal].is-in,
:root.js[dir='rtl'] [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-130%); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { text-align: center; }
.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; }
.hero__tagline {
  margin: 0 auto;
  max-width: 340px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
  text-wrap: balance;
}
/* --------------------------------------------------------------------------
   The glass screen
   -------------------------------------------------------------------------- */
.screen-wrap {
  position: relative;
  margin-top: 6px;
}
.screen-wrap__badge {
  position: absolute;
  z-index: 6;
  top: -30px;
  inset-inline-end: -10px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 12px 22px -8px rgba(4, 4, 4, 0.4);
}
.screen-wrap__badge img {
  width: 100%;
  height: 100%;
}
@keyframes spin { to { rotate: 360deg; } }

.screen {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 30%;
  --gy: 10%;
  position: relative;
  display: block;
  padding: 7px;
  border-radius: 44px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.45) 45%, rgba(255, 228, 233, 0.8));
  box-shadow:
    0 40px 70px -30px rgba(107, 67, 50, 0.55),
    0 14px 30px -14px rgba(185, 28, 28, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.screen:hover {
  box-shadow:
    0 50px 80px -30px rgba(107, 67, 50, 0.6),
    0 18px 40px -14px rgba(242, 155, 176, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.screen:active { transform: scale(0.985); }

.screen__frame {
  position: relative;
  display: block;
  border-radius: 38px;
  overflow: hidden;
  isolation: isolate;
}
.screen__viewport {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  background: var(--cream-2);
}
.screen__track {
  display: block;
  will-change: transform;
}
@keyframes screen-scroll { to { transform: translateY(-50%); } }

.screen__glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.55), inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  background: linear-gradient(35deg, rgba(255, 255, 255, 0.1), transparent 40%, rgba(255, 255, 255, 0.06));
}
.screen__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.28), transparent 45%);
  display: none;
}
.screen__sheen {
  position: absolute;
  z-index: 4;
  top: -60%;
  left: -80%;
  width: 60%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: rotate(22deg);
}
@keyframes sheen {
  0%, 70% { translate: 0 0; }
  100% { translate: 420% 0; }
}

.screen__cta {
  position: absolute;
  z-index: 5;
  inset-inline: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  border-radius: 24px;
  color: #fff;
  background: rgba(10, 8, 8, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -14px rgba(4, 4, 4, 0.6);
  transition: transform 0.35s var(--ease-spring);
}
:root[dir='rtl'] .screen__cta { padding: 14px 20px 14px 14px; }
.screen:hover .screen__cta { transform: scale(1.035); }
.screen__cta-text { display: flex; flex-direction: column; min-width: 0; }
.screen__eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 3px;
}
:root[lang='ar'] .screen__eyebrow { letter-spacing: 0; font-size: 11px; }
.screen__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 5.8vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
:root[lang='ar'] .screen__label { letter-spacing: 0; }
.screen__label.is-out { opacity: 0; transform: translateY(-6px); }

.wa-bubble {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, #4BE688, var(--wa) 55%, var(--wa-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px -6px rgba(37, 211, 102, 0.8);
}
.wa-bubble::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.6);
  opacity: 0;
}
:root:not(.js) .screen__track,
.screen-wrap.is-in .screen__track { animation: screen-scroll var(--scroll-dur, 34s) linear infinite; }
:root:not(.js) .screen-wrap__badge img,
.screen-wrap.is-in .screen-wrap__badge img { animation: spin 18s linear infinite; }
:root:not(.js) .screen__sheen,
.screen-wrap.is-in .screen__sheen { animation: sheen 7s ease-in-out infinite; }
:root:not(.js) .wa-bubble::after,
.screen-wrap.is-in .wa-bubble::after { animation: ring 2.4s ease-out infinite; }
@keyframes ring {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Mini storefront that scrolls inside the screen */
.ms { display: block; font-family: var(--font-body); color: var(--ink); }
.ms__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(4, 4, 4, 0.06);
}
.ms__bar img { height: 16px; width: auto; }
.ms__bar-icons { display: flex; gap: 6px; align-items: center; }
.ms__pill { width: 26px; height: 7px; border-radius: 9px; background: rgba(4, 4, 4, 0.1); }
.ms__bag {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff;
}
.ms__hero {
  display: block;
  padding: 20px 18px 22px;
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 200, 211, 0.35), transparent 50%),
    var(--red);
  color: #fff;
}
.ms__eyebrow {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
}
.ms__title {
  display: block;
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: pre-line;
}
.ms__video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 14px 24px -12px rgba(0, 0, 0, 0.5);
}
.ms__video video,
.ms__video img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.ms__section { display: block; padding: 22px 18px 8px; text-align: center; }
.ms__section-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid rgba(4, 4, 4, 0.08);
}
.ms__section-title {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.ms__list { display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 20px; }
.ms__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(4, 4, 4, 0.05);
  box-shadow: 0 6px 14px -10px rgba(107, 67, 50, 0.4);
}
.ms__item:nth-child(even) { flex-direction: row-reverse; text-align: end; }
.ms__thumb {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 14px;
  background: var(--tint);
}
.ms__thumb img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25)); }
.ms__info { display: block; flex: 1; min-width: 0; }
.ms__name { display: block; font-weight: 800; font-size: 14px; line-height: 1.15; }
.ms__hook { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); line-height: 1.3; }
.ms__price {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   Link buttons
   -------------------------------------------------------------------------- */
.links { display: flex; flex-direction: column; gap: 12px; }

.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 14px 12px 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 244, 0.74));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  isolation: isolate;
  transition: opacity 0.7s var(--ease-out), transform 0.45s var(--ease-spring), background 0.25s, box-shadow 0.3s;
}
:root[dir='rtl'] .link { padding: 12px 12px 12px 14px; }
.link:hover {
  transform: translateY(-3px);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lift), inset 0 1px 0 #fff;
}
.link:active { transform: scale(0.98); }

.link__icon {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  color: var(--icon-fg, #fff);
  background: var(--icon-bg, var(--ink));
  box-shadow:
    0 12px 22px -12px var(--icon-shadow, rgba(0, 0, 0, 0.5)),
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  overflow: hidden;
  transition: transform 0.45s var(--ease-spring);
}
/* glossy top highlight, like an app icon */
.link__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}
.link__icon svg { position: relative; width: 26px; height: 26px; transition: transform 0.45s var(--ease-spring); }
.link:hover .link__icon { transform: rotate(-6deg) scale(1.06); }
.link:hover .link__icon svg { transform: scale(1.08); }
:root[dir='rtl'] .link:hover .link__icon { transform: rotate(6deg) scale(1.06); }

.link--instagram {
  --icon-bg: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  --icon-shadow: rgba(214, 36, 159, 0.75);
  --accent: #C1358F;
}
.link--tiktok {
  --icon-bg: linear-gradient(160deg, #1F1F1F, #000);
  --icon-shadow: rgba(0, 0, 0, 0.75);
  --accent: #111;
}
.link--tiktok .link__icon svg { width: 25px; height: 25px; }
.link--facebook {
  --icon-bg: linear-gradient(180deg, #fff, #F1F4FA);
  --icon-fg: #0866FF;
  --icon-shadow: rgba(8, 102, 255, 0.55);
  --accent: #0866FF;
}
.link--facebook .link__icon svg { width: 30px; height: 30px; }
.link--gift {
  --icon-bg: linear-gradient(150deg, #FFE1E8, var(--pink) 45%, var(--pink-deep));
  --icon-fg: var(--ink);
  --icon-shadow: rgba(242, 155, 176, 0.95);
  --accent: #C2577A;
}
.link--whatsapp { --icon-bg: linear-gradient(160deg, #5BEA8E, var(--wa) 50%, #1DAA54); --icon-shadow: rgba(37, 211, 102, 0.8); --accent: var(--wa-deep); }

/* Links slide in from alternating sides. Delay stays on transform too, then JS clears --d after entering. */
.js .link[data-reveal] {
  transition:
    opacity 0.8s var(--ease-out) var(--d, 0ms),
    transform 1s var(--ease-spring) var(--d, 0ms),
    background 0.25s,
    box-shadow 0.3s;
}

.link__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.link__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, var(--choco));
}
:root[lang='ar'] .link__brand { letter-spacing: 0; font-size: 12px; }
.link__handle { color: var(--muted); font-weight: 600; letter-spacing: 0.02em; text-transform: none; direction: ltr; unicode-bidi: isolate; }
.link__label {
  display: flex;
  align-items: center;
  min-height: 1.3em;
  font-size: clamp(15px, 4.1vw, 18px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.link__text { overflow: hidden; text-overflow: ellipsis; }
.link__text.is-fading { animation: label-fade 0.45s var(--ease-out); }
@keyframes label-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.caret {
  flex-shrink: 0;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 2px;
  border-radius: 2px;
  background: var(--accent, var(--ink));
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.link__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s var(--ease-spring), background 0.25s, color 0.25s;
}
.link__arrow svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease-spring); }
:root[dir='rtl'] .link__arrow svg { transform: scaleX(-1); }
.link:hover .link__arrow { background: var(--ink); color: #fff; transform: scale(1.08); }
.link:hover .link__arrow svg { transform: translate(1px, -1px); }
:root[dir='rtl'] .link:hover .link__arrow svg { transform: scaleX(-1) translate(1px, -1px); }

.countdown {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 8px;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(4, 4, 4, 0.06);
  direction: ltr;
}

/* Effects */
.fx-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  border: 2px solid rgba(242, 155, 176, 0.85);
  opacity: 0;
  pointer-events: none;
}
.fx-pulse.is-in::before {
  animation: pulse-ring 2.8s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.7s);
}
@keyframes pulse-ring {
  0% { opacity: 0.9; transform: scale(0.97); }
  70%, 100% { opacity: 0; transform: scale(1); }
}
.fx-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 50%, rgba(255, 200, 211, 0.75), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.fx-glow:hover::after { opacity: 1; animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 0.5; } }

.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.crumb-cookie {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  opacity: 0;
  transform: translateX(var(--from)) scale(0.8);
  transition: transform 0.7s var(--ease-spring), opacity 0.35s;
  transition-delay: var(--delay, 0s);
}
.crumb-cookie.is-in { opacity: 1; transform: translate(var(--to), var(--y)) rotate(var(--rot)) scale(1); }
.crumb-cookie.is-out { opacity: 0; transform: translate(var(--to), calc(var(--y) + 14px)) rotate(var(--rot)) scale(0.85); }

/* --------------------------------------------------------------------------
   Ribbons
   -------------------------------------------------------------------------- */
.ribbons {
  position: relative;
  width: 100vw;
  height: 200px;
  margin-inline-start: calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
}
.ribbon {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  padding: 8px 0;
  overflow: hidden;
  direction: ltr;
  box-shadow: 0 18px 30px -20px rgba(4, 4, 4, 0.55);
}
.ribbon--pink { background: var(--pink); color: var(--ink); transform: translateY(-50%) rotate(8deg); }
.ribbon--ink { background: var(--ink); color: var(--pink); transform: translateY(-50%) rotate(-8deg); }
.ribbon__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
:root:not(.js) .ribbon__track,
.ribbons.is-in .ribbon__track { animation: marquee var(--marquee-dur, 24s) linear infinite; }
/* The pink ribbon runs the other way. It must come after the shorthand above, which resets direction. */
:root:not(.js) .ribbon--pink .ribbon__track,
.ribbons.is-in .ribbon--pink .ribbon__track { animation-direction: reverse; }
/* spacing as margins, not gap, so both halves are exactly equal and the loop never jumps */
.ribbon__track > * { margin-right: 22px; }
.ribbon__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
:root[lang='ar'] .ribbon__text { letter-spacing: 0; font-size: 20px; }
.ribbon__cookie {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.3));
  rotate: -14deg;
}
.ribbon__cookie:nth-of-type(even) { rotate: 22deg; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Lineup carousel
   -------------------------------------------------------------------------- */
.lineup { margin-top: 18px; }
.lineup__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.lineup__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
}
:root[lang='ar'] .lineup__title { font-size: 30px; line-height: 1.25; letter-spacing: 0; }
.lineup__sub { margin: 8px 0 0; max-width: 290px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.lineup__controls { display: flex; align-items: center; justify-content: center; gap: 16px; }

/* The lineup moves by transform, not native scrolling: iPhone Safari kept getting stuck on the nested
   horizontal scroller. The page still scrolls vertically (pan-y); sideways drags are handled in app.js. */
.lineup__track {
  position: relative;
  margin: 0 calc(var(--gutter) * -1);
  padding: 74px 0 22px;
  overflow: hidden;
  touch-action: pan-y;
  direction: ltr;
  cursor: grab;
}
.lineup__track.is-dragging { cursor: grabbing; }
.lineup__strip {
  position: relative;
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 0 var(--gutter);
  transform: translate3d(var(--x, 0px), 0, 0);
  transition: transform 0.55s var(--ease-out);
  will-change: transform;
}
:root[dir='rtl'] .lineup__strip { direction: rtl; }
.is-dragging .lineup__strip,
.is-dragging .cookie__media img { transition: none; }

.cookie {
  --fg: var(--ink);
  --fg-muted: rgba(4, 4, 4, 0.62);
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position: relative;
  flex: 0 0 auto;
  width: min(68vw, 300px);
  display: flex;
  flex-direction: column;
  padding: 0 18px 18px;
  border-radius: 30px;
  -webkit-user-select: none;
  user-select: none;
  color: var(--fg);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--bg);
  box-shadow: 0 24px 40px -22px rgba(64, 35, 22, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.4s var(--ease-out);
}
.cookie.is-dark {
  --fg: #fff;
  --fg-muted: rgba(255, 255, 255, 0.78);
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    var(--bg);
}
.cookie__media {
  display: grid;
  place-items: center;
  margin: -64px auto 4px;
  width: 86%;
  aspect-ratio: 1;
}
.js .lineup__track[data-reveal] .cookie {
  opacity: 0;
  transform: translateX(160px);
  transition:
    transform 1.1s var(--ease-spring) calc(var(--ci, 0) * 90ms),
    opacity 0.6s ease calc(var(--ci, 0) * 90ms);
}
:root.js[dir='rtl'] .lineup__track[data-reveal] .cookie { transform: translateX(-160px); }
.js .lineup__track[data-reveal] .cookie__media {
  transform: rotate(280deg) scale(0.5);
  transition: transform 1.4s var(--ease-out) calc(var(--ci, 0) * 90ms + 100ms);
}
:root.js[dir='rtl'] .lineup__track[data-reveal] .cookie__media { transform: rotate(-280deg) scale(0.5); }
.js .lineup__track.is-in .cookie,
.js .lineup__track.is-in .cookie__media,
:root.js[dir='rtl'] .lineup__track.is-in .cookie,
:root.js[dir='rtl'] .lineup__track.is-in .cookie__media { opacity: 1; transform: none; }

.cookie__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* the photo must never take the touch: on iPhone a press-and-drag on an image starts an image drag */
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  filter: drop-shadow(0 22px 22px rgba(40, 20, 10, 0.38));
  transform: rotate(var(--spin, 0deg)) scale(var(--zoom, 1));
  transition: transform 0.55s var(--ease-out);
}
.cookie__badge {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
}
:root[lang='ar'] .cookie__badge { letter-spacing: 0; }
.cookie__badge--new { color: var(--pink); background: var(--ink); }
.cookie__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
:root[lang='ar'] .cookie__name { font-size: 22px; line-height: 1.3; letter-spacing: 0; }
.cookie__brand { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
:root[lang='ar'] .cookie__brand { letter-spacing: 0; font-size: 12px; }
.cookie__hook { margin: 8px 0 0; font-size: 14px; font-weight: 500; color: var(--fg-muted); }
.cookie__price { margin-top: 14px; font-weight: 900; font-size: 20px; line-height: 1; }
.cookie__price small { font-size: 12px; font-weight: 700; color: var(--fg-muted); margin-inline-start: 2px; }

.lineup__dots { display: flex; justify-content: center; gap: 6px; }
.lineup__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(107, 67, 50, 0.22);
  transition: width 0.35s var(--ease-out), background 0.35s;
}
.lineup__dot.is-active { width: 22px; background: var(--ink); }

.lineup__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  height: 56px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: var(--wa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 16px 30px -14px rgba(18, 140, 74, 0.8);
  transition: transform 0.35s var(--ease-spring), background 0.2s;
}
.lineup__cta:hover { background: #1FBF5B; transform: translateY(-2px); }
.lineup__cta:active { transform: scale(0.98); }
.lineup__cta.is-deal::after {
  content: '2+1';
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: var(--deal-ink);
  background: var(--deal-gold);
}

/* --------------------------------------------------------------------------
   Offers: Buy 2 Get 1 Free (same chocolate and gold as the main site's offer bar) and the special offer
   -------------------------------------------------------------------------- */
:root {
  --deal-ink: #21110A;
  --deal-gold: #FFD89A;
  --deal-cream: #FFF4E3;
}
.lineup__offers { display: grid; gap: 12px; margin-top: 16px; }
.lineup__offers[hidden] { display: none; }

/* On offer days: a light 2+1 line under the lineup title */
.lineup__deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 12px 0 0;
}
.lineup__deal[hidden] { display: none; }
.lineup__deal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: var(--deal-ink);
  background: var(--deal-gold);
  box-shadow: 0 10px 20px -14px rgba(138, 90, 0, 0.8);
}
.lineup__deal-pill b {
  display: grid;
  place-items: center;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  direction: ltr;
  color: var(--deal-gold);
  background: var(--deal-ink);
}
.lineup__deal-days {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--choco);
}
.lineup__deal-days i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
:root[lang='ar'] .lineup__deal-days { letter-spacing: 0; font-size: 12px; }
.lineup__deal:not([hidden]) .lineup__deal-days i { animation: deal-live 1.8s ease-out infinite; }
@keyframes deal-live {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

/* "2+1 FREE" sticker on every lineup card while the offer is on */
.cookie__deal {
  position: absolute;
  z-index: 2;
  top: -16px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  align-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--deal-ink);
  background: var(--deal-gold);
  box-shadow: 0 10px 18px -8px rgba(33, 17, 10, 0.6), inset 0 0 0 3px var(--deal-gold), inset 0 0 0 4.5px rgba(33, 17, 10, 0.85);
  transform: rotate(12deg);
  pointer-events: none;
}
.cookie__deal b { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 0.9; letter-spacing: -0.02em; direction: ltr; }
.cookie__deal small { margin-top: 2px; font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
:root[lang='ar'] .cookie__deal small { font-size: 10.5px; letter-spacing: 0; }
.lineup__track.is-in .cookie__deal,
:root:not(.js) .cookie__deal { animation: deal-pop 3.2s ease-in-out infinite; animation-delay: calc(var(--ci, 0) * 0.25s); }
@keyframes deal-pop {
  0%, 82%, 100% { transform: rotate(12deg) scale(1); }
  88% { transform: rotate(4deg) scale(1.1); }
  94% { transform: rotate(16deg) scale(1); }
}

/* The special offer: a photo or video with its own text and WhatsApp message */
.offer {
  display: block;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease-spring);
}
.offer:active { transform: scale(0.985); }
.offer__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--pink-2); }
.offer__media video,
.offer__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.offer__eyebrow {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--pink-2);
}
.offer__title { margin-top: 4px; font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1.05; letter-spacing: -0.01em; }
.offer__text { font-size: 14px; font-weight: 600; color: var(--muted); white-space: pre-line; }
.offer__cta {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: var(--wa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 26px -14px rgba(18, 140, 74, 0.8);
}
:root[lang='ar'] .offer__eyebrow { letter-spacing: 0; font-size: 11px; }
:root[lang='ar'] .offer__title { font-size: 22px; line-height: 1.3; }

/* The same 2+1 sticker on each cookie in the glass screen menu */
.ms__thumb { position: relative; }
.ms__deal {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  display: grid;
  place-items: center;
  align-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--deal-ink);
  background: var(--deal-gold);
  box-shadow: 0 6px 10px -5px rgba(33, 17, 10, 0.55), inset 0 0 0 2px var(--deal-gold), inset 0 0 0 3px rgba(33, 17, 10, 0.8);
  transform: rotate(12deg);
}
.ms__deal b { font-family: var(--font-display); font-weight: 900; font-size: 13px; line-height: 0.9; direction: ltr; }
.ms__deal small { font-size: 6px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
:root[lang='ar'] .ms__deal small { font-size: 7px; letter-spacing: 0; }
.ms__item:nth-child(even) .ms__deal { inset-inline-end: auto; inset-inline-start: -7px; transform: rotate(-12deg); }

/* --------------------------------------------------------------------------
   The 4-Pack: a wide card under the singles, and the first item in the glass screen
   -------------------------------------------------------------------------- */
.lineup__pack { margin-top: 16px; }
.lineup__pack[hidden] { display: none; }
.pack {
  --fg: var(--ink);
  --fg-muted: rgba(4, 4, 4, 0.62);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 30px;
  color: var(--fg);
  /* Flat fill, no glow: the default pink is the box photo's ground shadow, so the box sits on the card */
  background: var(--bg);
  box-shadow: 0 24px 40px -22px rgba(64, 35, 22, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.35s var(--ease-spring);
}
.pack:active { transform: scale(0.985); }
.pack.is-dark { --fg: #fff; --fg-muted: rgba(255, 255, 255, 0.78); }
/* The box photo is wide and already on a slant, so it gets most of the card and no extra tilt */
.pack__media { flex: 0 0 48%; aspect-ratio: 6 / 5; }
.pack__media img { width: 100%; height: 100%; object-fit: contain; }
.pack__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pack .cookie__badge { margin-bottom: 0; }
.pack__name { font-family: var(--font-display); font-weight: 900; font-size: 27px; line-height: 1.02; letter-spacing: -0.02em; }
:root[lang='ar'] .pack__name { font-size: 23px; line-height: 1.3; letter-spacing: 0; }
.pack__hook { font-size: 14px; font-weight: 500; color: var(--fg-muted); }
.pack__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  background: var(--wa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 22px -12px rgba(18, 140, 74, 0.8);
}
.pack .cookie__deal { top: -14px; inset-inline-end: -6px; }
.lineup__pack.is-in .pack .cookie__deal { animation: deal-pop 3.2s ease-in-out infinite; }
@media (max-width: 719px) {
  .pack { flex-direction: column; text-align: center; }
  .pack__media { flex: none; width: min(100%, 330px); }
  .pack__body { align-items: center; }
  .pack__cta { align-self: stretch; justify-content: center; }
}
/* in the glass screen */
.ms__order {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: var(--wa);
}
.ms__item--pack .ms__thumb img { width: 92%; height: 92%; }

/* When the special offer takes over the glass screen */
.ms__hero--offer .ms__eyebrow { color: var(--deal-ink); background: var(--deal-gold); }

/* --------------------------------------------------------------------------
   Countdowns: 2+1 above the glass screen, the special offer in and under it, on its card and in the popup
   -------------------------------------------------------------------------- */
.clock { display: inline-flex; gap: 4px; font-variant-numeric: tabular-nums; }
.clock span { display: inline-flex; align-items: baseline; gap: 1px; padding: 3px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); }
.clock b { font-weight: 900; font-size: 1em; }
.clock i { font-style: normal; font-weight: 800; font-size: 0.72em; opacity: 0.6; }

.offer-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  color: var(--deal-ink);
  background: linear-gradient(180deg, #FFE3B0, var(--deal-gold));
  box-shadow: 0 14px 26px -18px rgba(138, 90, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  width: fit-content;
  max-width: 100%;
}
.offer-timer[hidden] { display: none; }
:root[dir='rtl'] .offer-timer { padding: 6px 6px 6px 14px; }
.offer-timer__badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  direction: ltr;
  color: var(--deal-gold);
  background: var(--deal-ink);
}
.offer-timer__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: 13px; }
.offer-timer__label { font-weight: 800; }
.offer-timer .clock { font-size: 13px; }
.offer-timer--featured { padding: 0; border-radius: 22px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); }
:root[dir='rtl'] .offer-timer--featured { padding: 0; }
/* the special offer pill is a link: down to the offer card, or out to WhatsApp */
.offer-pill { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; color: inherit; text-decoration: none; }
:root[dir='rtl'] .offer-pill { padding: 6px 6px 6px 10px; }
.offer-pill__go { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pink-2); }
.offer-pill[data-scroll] .offer-pill__go svg { transform: rotate(90deg); }
.offer-timer__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #15803D; }
.offer-timer__live i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: deal-live 1.8s ease-out infinite; }
.offer-timer--featured .clock span { background: var(--pink-2); }
.offer-timer__thumb { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; overflow: hidden; background: var(--pink-2); }
.offer-timer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.offer-timer__badge--gift { width: 44px; height: 44px; padding: 0; border-radius: 14px; font-size: 20px; color: #fff; background: var(--red); }
.offer-timer__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.offer-timer__text strong { font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.offer-timer__text .offer-timer__body { justify-content: flex-start; font-size: 12px; }
.offer-timer__text .offer-timer__body > i { font-style: normal; font-weight: 700; color: var(--muted); }

/* inside the glass screen, under the offer title */
.ms__timer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 12px; font-size: 10px; }
.ms__timer > i { font-style: normal; font-weight: 800; opacity: 0.85; }
.ms__timer .clock span { padding: 2px 5px; color: var(--ink); }

/* on the special offer card in the lineup */
.offer__timer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; }
.offer__timer > i { font-style: normal; font-weight: 800; color: var(--red); }
.offer__timer .clock span { background: var(--pink-2); }

/* the link-button countdown (set in the admin per button) */
.countdown .clock, .countdown { gap: 3px; }
.countdown span { display: inline-flex; align-items: baseline; gap: 1px; }
.countdown i { font-style: normal; opacity: 0.6; }

/* --------------------------------------------------------------------------
   Talabat and the live offers button
   -------------------------------------------------------------------------- */
/* Talabat's own app icon (assets/img/brand/talabat-icon.webp), in its orange */
.link--talabat {
  --icon-bg: #FF4B00;
  --icon-shadow: rgba(255, 75, 0, 0.7);
  --accent: #E64300;
}
.link__logo { position: relative; width: 100%; height: 100%; object-fit: cover; }
.link:hover .link__icon .link__logo { transform: scale(1.06); transition: transform 0.45s var(--ease-spring); }
.link--offers {
  --icon-bg: linear-gradient(150deg, #FFE9BF, var(--deal-gold) 50%, #F5B94E);
  --icon-fg: var(--deal-ink);
  --icon-shadow: rgba(245, 185, 78, 0.95);
  --accent: #A8620A;
}
.link--offers .link__arrow { transform: rotate(90deg); }
:root[dir='rtl'] .link--offers .link__arrow { transform: rotate(90deg); }
.link__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #15803D;
  background: #DCFCE7;
}
.link__live i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }
.link__live i { animation: deal-live 1.8s ease-out infinite; }

/* --------------------------------------------------------------------------
   Live offers popup: a sheet from the bottom on phones, a card in the middle on bigger screens
   -------------------------------------------------------------------------- */
:root.has-sheet { overflow: hidden; }
.sheet {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(33, 17, 10, 0);
  transition: background 0.28s ease;
}
.sheet[hidden] { display: none; }
.sheet.is-open { background: rgba(33, 17, 10, 0.42); }
.sheet__panel {
  width: min(460px, 100%);
  max-height: min(86vh, 720px);
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px max(20px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--cream);
  box-shadow: 0 -20px 50px -20px rgba(33, 17, 10, 0.5);
  transform: translateY(100%);
  transition: transform 0.38s var(--ease-out);
  outline: none;
}
.sheet.is-open .sheet__panel { transform: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet__heading { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.02em; }
:root[lang='ar'] .sheet__heading { font-size: 23px; letter-spacing: 0; }
.sheet__close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft); }
.sheet__offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 16px;
  border-radius: 24px;
  text-align: center;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.sheet__offer + .sheet__offer { margin-top: 12px; }
.sheet__badge {
  display: grid;
  place-items: center;
  align-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: var(--deal-ink);
  background: var(--deal-gold);
  box-shadow: inset 0 0 0 3px var(--deal-gold), inset 0 0 0 4.5px rgba(33, 17, 10, 0.85);
  transform: rotate(-8deg);
}
.sheet__badge b { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 0.9; direction: ltr; }
.sheet__badge small { font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.sheet__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--pink-2); }
.sheet__media img, .sheet__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet__eyebrow { padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); background: var(--pink-2); }
.sheet__title { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; }
:root[lang='ar'] .sheet__title { font-size: 20px; line-height: 1.35; letter-spacing: 0; }
.sheet__text { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); white-space: pre-line; }
.sheet__days { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--choco); }
.sheet__days i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: deal-live 1.8s ease-out infinite; }
:root[lang='ar'] .sheet__days, :root[lang='ar'] .sheet__eyebrow, :root[lang='ar'] .sheet__badge small { letter-spacing: 0; }
.sheet__timer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.sheet__timer > i { font-style: normal; font-weight: 800; }
.sheet__timer .clock span { background: var(--cream); }
.sheet__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  height: 50px;
  margin-top: 4px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: var(--wa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 26px -14px rgba(18, 140, 74, 0.8);
}
.sheet__empty { margin: 4px 0 8px; padding: 22px 16px; border-radius: 22px; text-align: center; font-weight: 700; line-height: 1.6; color: var(--muted); background: #fff; }
@media (min-width: 720px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { border-radius: 28px; transform: translateY(24px) scale(0.97); opacity: 0; transition: transform 0.32s var(--ease-out), opacity 0.25s; }
  .sheet.is-open .sheet__panel { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Phones: headings and text centered
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
  /* tighter top so the glass screen and the first buttons fit on the screen people land on */
  .page { padding-top: 12px; gap: 16px; }
  .screen__viewport { aspect-ratio: 1 / 0.92; }
  .lineup__head { flex-direction: column; align-items: center; text-align: center; }
  .lineup__head > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .lineup__sub { max-width: 320px; }
  .lineup__deal { justify-content: center; }
  .cookie { align-items: center; text-align: center; }
  .cookie__badge { align-self: center; }
  .offer__body { align-items: center; text-align: center; }
  .offer__eyebrow { align-self: center; }
  .offer__timer { justify-content: center; }
  .offer-timer__text { align-items: center; text-align: center; }
  .offer-timer__text .offer-timer__body { justify-content: center; }
}
/* short phones (or in-app browsers with big toolbars): a shorter glass screen */
@media (max-width: 719px) and (max-height: 760px) {
  .screen__viewport { aspect-ratio: 1 / 0.8; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; margin-top: 70px; }
.footer__mascot {
  position: absolute;
  z-index: 0;
  top: -96px;
  inset-inline-end: 22px;
  width: 104px;
  height: auto;
  transform: rotate(6deg);
  transform-origin: bottom center;
  animation: peek 5s ease-in-out infinite;
}
:root[dir='rtl'] .footer__mascot { transform: rotate(-6deg) scaleX(-1); animation-name: peek-rtl; }
@keyframes peek {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-6px); }
}
@keyframes peek-rtl {
  0%, 100% { transform: rotate(-6deg) translateY(0) scaleX(-1); }
  50% { transform: rotate(-2deg) translateY(-6px) scaleX(-1); }
}
.footer__card {
  position: relative;
  z-index: 1;
  padding: 26px 22px 20px;
  border-radius: 30px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 50px -26px rgba(4, 4, 4, 0.6);
}
.footer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pink);
}
:root[lang='ar'] .footer__title { font-size: 28px; line-height: 1.3; letter-spacing: 0; }
.footer__line { margin: 8px auto 18px; max-width: 280px; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); font-weight: 600; }
.footer__socials { display: flex; justify-content: center; gap: 10px; }
.footer__socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.2s, color 0.2s, transform 0.3s var(--ease-spring);
}
.footer__socials a:hover { background: var(--pink); color: var(--ink); transform: translateY(-3px); }
.footer__socials svg { width: 20px; height: 20px; }
.footer__rights { margin: 18px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); font-weight: 600; }

/* --------------------------------------------------------------------------
   Dock: floating WhatsApp button
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--gutter) max(14px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.wa-fab {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  inset-inline-end: 16px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity 0.35s, transform 0.45s var(--ease-spring);
}
.wa-fab.is-visible { opacity: 1; transform: none; }
.wa-fab__ring {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 2px dashed rgba(230, 172, 180, 0.9);
  transform: rotate(-3deg);
  transition: transform 0.25s var(--ease-out);
}
.wa-fab:hover .wa-fab__ring { transform: rotate(0); }
.wa-fab__body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--wa);
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.22), 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.wa-fab__body svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Toast, noscript
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  z-index: 60;
  top: max(72px, calc(env(safe-area-inset-top) + 62px));
  left: 50%;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 14px 30px -12px rgba(4, 4, 4, 0.5);
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.35s var(--ease-spring);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.noscript { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto 40px; padding: 0 16px; }
.noscript a { padding: 16px; border-radius: 18px; background: #fff; font-weight: 800; text-align: center; }

/* --------------------------------------------------------------------------
   Larger screens
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .page { padding-top: 20px; gap: 20px; }
  /* a slightly shorter glass screen, so the first buttons show on a laptop screen too */
  .screen__viewport { aspect-ratio: 1 / 0.9; }
  .cookie { width: 260px; }
  .screen-wrap__badge { width: 112px; height: 112px; top: -38px; inset-inline-end: -40px; }
  .ribbons { height: 190px; }
  .ribbon--pink { transform: translateY(-50%) rotate(3.5deg); }
  .ribbon--ink { transform: translateY(-50%) rotate(-3.5deg); }
  .footer__mascot { width: 124px; top: -116px; }
}
@media (max-width: 400px) {
  .link { gap: 12px; }
  .link__icon { width: 46px; height: 46px; border-radius: 15px; }
  .link__icon svg { width: 22px; height: 22px; }
  .link__arrow { width: 32px; height: 32px; }
}
@media (max-width: 360px) {
  .link__label { font-size: 15px; }
  .screen__label { font-size: 19px; }
  .lineup__title { font-size: 29px; }
}
@media (hover: none) {
  .lineup__arrow { display: none; }
}

/* --------------------------------------------------------------------------
   Desktop extras (mouse + hover). Phones skip these: they cost the most GPU memory.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .bg__blob { filter: blur(40px); animation: blob-pan 22s ease-in-out infinite alternate; }
  .bg__blob--peach { animation-duration: 27s; animation-delay: -9s; }
  .bg__blob--rose { animation-duration: 19s; animation-delay: -5s; }
  .floater { will-change: translate; }
  .link {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
  }
  .link:hover { background: var(--glass-strong); }
  .js [data-reveal='pan'] { filter: blur(12px); }
  .js [data-reveal='tilt'] { transform: perspective(1100px) rotateX(28deg) translateY(90px) scale(0.9); }
  .screen { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); }
  .screen:active { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) scale(0.985); }
  .screen.is-tilting { transition: transform 0.12s linear, box-shadow 0.4s; }
  .screen__glare { display: block; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .screen__track,
  .ribbon__track { animation: none; }
  [data-reveal],
  [data-reveal] .cookie,
  [data-reveal] .cookie__media,
  .floater { opacity: 1 !important; transform: none !important; filter: none !important; }
}