/* ==========================================================================
   Al-Mufeed design layer — additions since v0.10.23, in their own file.
   Loaded by layout.jinja right after styles.css (same `components` cascade layer, so Tailwind utilities keep winning).
   Why a second file: the platform kept serving the old styles.css after the 0.10.23 and 0.10.24 uploads
   (templates updated, stylesheet not) — a new, small file is delivered reliably. Plain CSS, no build step.
   ========================================================================== */

/* ==========================================================================
   v0.10.23 — «صور المجموعات»: category pictures in the navigation (pills, mega menus, phone drawer)
   ========================================================================== */
@layer components {
  /* the picture (or its tinted-letter placeholder until the picture arrives) */
  .mf-navimg {
    --mood-0: #dff3e5; --mood-1: #ffefc2; --mood-2: #ffe1dc; --mood-3: #f3ead6; --mood-4: #e0f1f6; --mood-5: #ece6f7;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: 999px;
    background: radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--mood-0) 70%);
    color: var(--primary-deep);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(15, 123, 63, 0.08);
  }
  .mf-navimg[style*="--i:1"] { background: radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--mood-1) 70%); color: #8a5a00; }
  .mf-navimg[style*="--i:2"] { background: radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--mood-2) 70%); color: #a42a1f; }
  .mf-navimg[style*="--i:3"] { background: radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--mood-3) 70%); color: #6b4f1d; }
  .mf-navimg[style*="--i:4"] { background: radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--mood-4) 70%); color: #0f5e74; }
  .mf-navimg[style*="--i:5"] { background: radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--mood-5) 70%); color: #4d3a8c; }
  .mf-navimg i {
    font-style: normal;
    transform: translateY(1px);
  }
  .mf-navimg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-navimg img.is-in,
  .mf-navimg img[data-ssr] {
    opacity: 1;
  }
  .mf-navimg--pill {
    width: 24px;
    height: 24px;
    font-size: 12px;
    margin-inline-end: 1px;
  }
  .mf-navimg--tile {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 22px;
  }
  .mf-navimg--row {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 17px;
  }

  /* pills with thumbs: a touch less padding on the picture side */
  .mf-nav--thumbs > li > a,
  .mf-nav--thumbs > li > div > button {
    padding-inline-start: 7px;
  }
  .mf-nav--thumbs > li.mf-nav-all > a {
    padding-inline-start: 13px;
  }
  .mf-nav-more-dots {
    display: grid;
    grid-template-columns: 4px 4px;
    gap: 2px;
    margin-inline-end: 3px;
  }
  .mf-nav-more-dots i {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--primary);
  }

  /* the mega panel: image tiles + chips */
  .mf-mega {
    --anchor-gap: 6px; /* the utility class for this gap is not in the (old) base stylesheet */
    width: max-content;
    max-width: min(640px, calc(100vw - 32px));
    padding: 12px 12px 10px;
    border-radius: 18px;
    box-shadow: 0 24px 50px -24px rgba(31, 35, 31, 0.45), 0 2px 10px -6px rgba(31, 35, 31, 0.2);
  }
  .mf-mega--more {
    width: min(800px, calc(100vw - 32px));
    max-width: none;
  }
  .mf-mega-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(176px, 1fr));
    gap: 4px 8px;
  }
  .mf-mega-grid--more {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  }
  .mf-mega-item {
    min-width: 0;
  }
  .mf-mega-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--foreground);
    transition: background 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-mega-tile:hover,
  .mf-mega-tile:focus-visible {
    background: var(--tint);
    color: var(--primary-deep);
    text-decoration: none;
    transform: translateY(-1px);
  }
  .mf-mega-tile:hover .mf-navimg img {
    transform: scale(1.08);
  }
  .mf-mega-tile:hover .mf-navimg {
    box-shadow: 0 10px 18px -12px rgba(15, 123, 63, 0.55), inset 0 0 0 1px rgba(15, 123, 63, 0.12);
  }
  .mf-mega-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    line-height: 1.25;
    min-width: 0;
  }
  .mf-mega-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 8px 8px 8px;
    padding-inline-start: 74px;
  }
  .mf-mega-chip {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--foreground);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mf-mega-chip:hover {
    background: var(--primary-deep);
    color: #fff;
    text-decoration: none;
  }
  .mf-mega-chip--more {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--border);
    color: var(--muted);
  }
  .mf-mega-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 8px 2px;
    border-top: 1px solid var(--border);
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-deep);
    text-decoration: none;
  }
  .mf-mega-all:hover {
    text-decoration: underline;
  }
  /* tiles bloom one after the other when the panel opens */
  @keyframes mf-mega-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  /* (the open-stagger animation was dropped: it used a new pseudo-class some CSS pipelines reject) */
  @media (prefers-reduced-motion: reduce) {
    .mf-mega-tile, .mf-navimg img { transition: none; }
  }

  /* phone drawer rows */
  .mf-drawer-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mf-drawer-row .mf-navimg--row {
    margin-inline-start: -2px;
  }
}

/* ==========================================================================
   v0.10.23 — «إطار الشعار»: the logo on a soft tile (or a circle) in the header and the footer
   ========================================================================== */
@layer components {
  .mf-logo-box {
    display: block;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
  }
  .mf-logo--tile .mf-logo-box:not(.mf-logo-box--m),
  .mf-logo--circle .mf-logo-box:not(.mf-logo-box--m) {
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #ffffff, #f3ecd9);
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(15, 123, 63, 0.1);
  }
  .mf-logo--tile .mf-logo-box:not(.mf-logo-box--m) {
    padding: 5px 9px;
    border-radius: 16px;
  }
  .mf-logo--circle .mf-logo-box:not(.mf-logo-box--m) {
    width: 76px;
    height: 76px;
    border-radius: 999px;
    padding: 0;
  }
  .mf-logo:hover .mf-logo-box:not(.mf-logo-box--m) {
    transform: translateY(-1px);
  }
  .mf-logo--tile:hover .mf-logo-box:not(.mf-logo-box--m),
  .mf-logo--circle:hover .mf-logo-box:not(.mf-logo-box--m) {
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(15, 123, 63, 0.16);
  }
  @media (min-width: 768px) {
    .mf-logo--tile .mf-logo-svg,
    .mf-logo--tile .mf-logo-img {
      height: 56px;
    }
    .mf-logo--circle .mf-logo-svg,
    .mf-logo--circle .mf-logo-img {
      height: 50px;
      max-width: 62px;
    }
  }
  /* phones: the icon tile already is a tile; the circle option rounds it */
  .mf-logo--circle .mf-logo-svg--icon {
    border-radius: 999px;
    overflow: hidden;
  }

  /* footer */
  .mf-footer-logo-box {
    display: inline-grid;
    place-items: center;
    margin-bottom: 14px;
    background: linear-gradient(160deg, #ffffff, #f3ecd9);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  .mf-footer-logo-box--tile {
    padding: 8px 14px;
    border-radius: 20px;
  }
  .mf-footer-logo-box--circle {
    width: 118px;
    height: 118px;
    border-radius: 999px;
  }
  .mf-footer .mf-footer-logo-box .mf-logo-svg {
    height: 88px;
    margin-bottom: 0;
  }
  .mf-footer .mf-footer-logo-box--circle .mf-logo-svg {
    height: 76px;
  }
  .mf-footer .mf-footer-logo-box .mf-footer-logo {
    margin-bottom: 0;
    height: 72px;
  }
  .mf-footer .mf-footer-logo-box--circle .mf-footer-logo {
    height: 60px;
    max-width: 92px;
    object-fit: contain;
  }
}

/* ==========================================================================
   v0.10.23 — «بنر خدمة»: slim service banners between category sections (CSS + icon only, no image to load)
   ========================================================================== */
@layer components {
  .mf-sb {
    --sb-bg: linear-gradient(120deg, #0f7b3f, #15914b 60%, #0a5c2e);
    --sb-fg: #ffffff;
    --sb-muted: rgba(255, 255, 255, 0.82);
    --sb-art: rgba(255, 255, 255, 0.16);
    --sb-chip: rgba(255, 255, 255, 0.16);
    --sb-btn-bg: #ffffff;
    --sb-btn-fg: #0a5c2e;
    --sb-ring: transparent;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "art body" "side side";
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border-radius: calc(var(--radius) * 1.2);
    background: var(--sb-bg);
    color: var(--sb-fg);
    box-shadow: 0 0 0 1px var(--sb-ring), 0 18px 34px -26px rgba(31, 35, 31, 0.55);
    overflow: hidden;
    isolation: isolate;
  }
  /* soft pattern: dots fading to the start edge + a glow blob behind the icon */
  .mf-sb::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.3px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 55%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 55%);
    pointer-events: none;
    z-index: -1;
  }
  [dir="ltr"] .mf-sb::before {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent 55%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent 55%);
  }
  .mf-sb::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    inset-inline-end: -70px;
    top: -110px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 62%);
    pointer-events: none;
    z-index: -1;
  }
  .mf-sb-art {
    grid-area: art;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--sb-art);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    flex: none;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-sb-art svg {
    width: 30px;
    height: 30px;
    color: var(--sb-fg);
  }
  .mf-sb-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .mf-sb:hover .mf-sb-art {
    transform: rotate(-6deg) scale(1.06);
  }
  .mf-sb-body {
    grid-area: body;
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  .mf-sb-kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sb-muted);
  }
  .mf-sb-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.2;
  }
  .mf-sb-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sb-muted);
  }
  .mf-sb-chips,
  .mf-sb-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }
  .mf-sb-chips i {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--sb-chip);
    color: var(--sb-fg);
  }
  .mf-sb-logos img {
    height: 22px;
    width: auto;
    padding: 0 4px;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
  }
  .mf-sb-side {
    grid-area: side;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  .mf-sb-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--sb-fg);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
  .mf-sb-count[data-live="true"] {
    background: var(--deal);
    animation: mf-sb-pulse 2.2s ease-in-out infinite;
  }
  @keyframes mf-sb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(223, 56, 45, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(223, 56, 45, 0); }
  }
  .mf-sb-btn {
    height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
    background: var(--sb-btn-bg);
    color: var(--sb-btn-fg);
    border-color: transparent;
  }
  .mf-sb-btn:hover {
    background: var(--sb-btn-bg);
    color: var(--sb-btn-fg);
    filter: brightness(0.96);
  }
  @media (min-width: 768px) {
    .mf-sb {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "art body side";
      gap: 16px 18px;
      padding: 16px 22px;
    }
    .mf-sb-art {
      width: 68px;
      height: 68px;
      border-radius: 20px;
    }
    .mf-sb-art svg {
      width: 34px;
      height: 34px;
    }
    .mf-sb-title {
      font-size: 22px;
    }
    .mf-sb-text {
      font-size: 13.5px;
    }
    .mf-sb-side {
      justify-content: flex-end;
    }
  }

  /* colours */
  .mf-sb--sun {
    --sb-bg: linear-gradient(120deg, #ffd76a, #f5b622 55%, #f0a500);
    --sb-fg: #2a2306;
    --sb-muted: rgba(42, 35, 6, 0.78);
    --sb-art: rgba(255, 255, 255, 0.55);
    --sb-chip: rgba(255, 255, 255, 0.5);
    --sb-btn-bg: #1f231f;
    --sb-btn-fg: #ffffff;
  }
  .mf-sb--sun .mf-sb-art svg { color: #b4661b; }
  .mf-sb--sun .mf-sb-count { background: rgba(0, 0, 0, 0.12); }
  .mf-sb--sand {
    --sb-bg: linear-gradient(120deg, #f7f0df, #efe4cc 60%, #e7dcc0);
    --sb-fg: #1f231f;
    --sb-muted: #6d7268;
    --sb-art: #ffffff;
    --sb-chip: #ffffff;
    --sb-btn-bg: #0f7b3f;
    --sb-btn-fg: #ffffff;
  }
  .mf-sb--sand .mf-sb-art svg { color: #0f7b3f; }
  .mf-sb--sand::before { background-image: radial-gradient(rgba(15, 123, 63, 0.18) 1.2px, transparent 1.3px); }
  .mf-sb--tomato {
    --sb-bg: linear-gradient(120deg, #ee5a48, #df382d 60%, #c92d23);
    --sb-btn-bg: #ffffff;
    --sb-btn-fg: #c92d23;
  }
  .mf-sb--night {
    --sb-bg: linear-gradient(120deg, #0a5c2e, #06371d 70%, #052a16);
    --sb-btn-bg: #f5b622;
    --sb-btn-fg: #2a2306;
  }
  .mf-sb--white {
    --sb-bg: #ffffff;
    --sb-fg: #1f231f;
    --sb-muted: #6d7268;
    --sb-art: var(--tint);
    --sb-chip: var(--secondary);
    --sb-btn-bg: #0f7b3f;
    --sb-btn-fg: #ffffff;
    --sb-ring: var(--border);
  }
  .mf-sb--white .mf-sb-art svg { color: #0f7b3f; }
  .mf-sb--white::before { background-image: radial-gradient(rgba(15, 123, 63, 0.14) 1.2px, transparent 1.3px); }
  .mf-sb--white .mf-sb-count { background: var(--tint); color: var(--primary-deep); }
  @media (prefers-reduced-motion: reduce) {
    .mf-sb-art { transition: none; }
    .mf-sb-count[data-live="true"] { animation: none; }
  }
}

/* ==========================================================================
   v0.10.23 — «شارك سلتك» as a card (share · WhatsApp · QR always) + the QR sheet
   ========================================================================== */
@layer components {
  .mf-btn--wa {
    background: #25d366;
    color: #fff;
    border-color: transparent;
  }
  .mf-btn--wa:hover {
    background: #1ebe5a;
    color: #fff;
  }
  .mf-share-card {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: calc(var(--radius) * 1.1);
    background: linear-gradient(135deg, #ffffff, var(--tint));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 14px 30px -26px rgba(15, 123, 63, 0.6);
  }
  .mf-share-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .mf-share-card-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    flex: none;
    box-shadow: 0 10px 18px -12px rgba(15, 123, 63, 0.8);
  }
  .mf-share-card-txt {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .mf-share-card-txt b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
  }
  .mf-share-card-txt small {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
  }
  .mf-share-card-sum {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-deep);
  }
  .mf-share-card-sum:empty {
    display: none;
  }
  .mf-share-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mf-share-card-actions .mf-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  @media (min-width: 640px) {
    .mf-share-card-actions .mf-btn {
      flex: 0 0 auto;
    }
  }

  /* the QR sheet */
  .mf-shareqr {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    width: 100%;
    inset: auto 0 0 0;
    margin: 0;
  }
  .mf-shareqr::backdrop {
    background: rgba(6, 55, 29, 0.45);
    backdrop-filter: blur(3px);
  }
  .mf-shareqr-panel {
    position: relative;
    width: min(440px, 100%);
    margin: 0 auto;
    background: var(--surface);
    border-radius: 24px 24px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    display: grid;
    gap: 12px;
    box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, 0.5);
  }
  @media (min-width: 640px) {
    .mf-shareqr {
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
    }
    .mf-shareqr[open] { display: grid; }
    .mf-shareqr-panel {
      border-radius: 24px;
      padding: 22px;
    }
  }
  .mf-shareqr-close {
    position: absolute;
    inset-inline-end: 12px;
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--foreground);
    font-size: 14px;
  }
  .mf-shareqr-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline-end: 40px;
  }
  .mf-shareqr-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--tint);
    color: var(--primary-deep);
    flex: none;
  }
  .mf-shareqr-head b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
  }
  .mf-shareqr-head small {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
  }
  .mf-shareqr-code {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 248px;
    height: 248px;
    padding: 12px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--border), 0 18px 34px -24px rgba(31, 35, 31, 0.5);
  }
  .mf-shareqr-code svg {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
  .mf-shareqr-wait {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 0 10px;
  }
  .mf-shareqr-hint {
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
  }
  .mf-shareqr-link {
    display: flex;
    gap: 6px;
  }
  .mf-shareqr-link input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    padding: 0 12px;
    font-size: 12px;
    color: var(--muted);
    background: var(--background);
  }
  .mf-shareqr-actions {
    display: flex;
    gap: 8px;
  }
  .mf-shareqr-actions .mf-btn {
    flex: 1;
  }
}

/* v0.10.23 — magazine window: the «ends in …» badge and the editor-only note */
@layer components {
  .mf-mag-ends {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    font-size: 12.5px; font-weight: 800; color: #fff;
    background: var(--deal); border-radius: 999px; padding: 5px 11px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 10px 18px -12px rgba(223, 56, 45, 0.8);
  }
  .mf-mag-ends[data-soon="true"] { animation: mf-sb-pulse 2.2s ease-in-out infinite; }
  .mf-mag-ends b { font-weight: 800; }
  .mf-mag-editor-note {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff4d6;
    border: 1px dashed #e0b24a;
    color: #7a4a20;
    font-size: 13px;
    font-weight: 700;
  }
  [data-mag-off] .mf-mag { opacity: 0.55; }
  @media (prefers-reduced-motion: reduce) { .mf-mag-ends[data-soon="true"] { animation: none; } }
}

/* ==========================================================================
   v0.10.23 — «الملحمة»: butchery band (interactive cuts chart + rail)
   ========================================================================== */
@layer components {
  .mf-bt {
    --bt-meat: #c4573f;
    --bt-meat-hi: #e2654a;
    --bt-deep: #7a1f12;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: calc(var(--radius) * 1.5);
    background:
      radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, 0.09) 0%, transparent 60%),
      radial-gradient(60% 50% at 0% 100%, rgba(245, 182, 34, 0.14) 0%, transparent 60%),
      linear-gradient(135deg, #4a1414 0%, #5f1b1b 45%, #2e0c0c 100%);
    color: #fff3e6;
    padding: 20px 18px;
    display: grid;
    gap: 16px;
    grid-template-areas: "head" "chart" "rail";
    box-shadow: 0 30px 60px -40px rgba(74, 20, 20, 0.8);
  }
  .mf-bt::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: -1;
  }
  .mf-bt--beef {
    --bt-meat: #9e3b2e;
    --bt-meat-hi: #c04b3b;
  }
  .mf-bt-head {
    grid-area: head;
    display: grid;
    gap: 10px;
    align-content: center;
  }
  .mf-bt-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    font-size: 13px;
    font-weight: 800;
    color: #ffd6c2;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .mf-bt-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    color: #fff;
  }
  .mf-bt-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 243, 230, 0.85);
  }
  .mf-bt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mf-bt-badges li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
  .mf-bt-badges svg {
    color: #ffd76a;
  }
  .mf-bt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .mf-bt-btn {
    background: #f5b622;
    color: #2a2306;
    border-color: transparent;
  }
  .mf-bt-btn:hover {
    background: #ffc93d;
    color: #2a2306;
  }

  /* the chart */
  .mf-bt-chart {
    grid-area: chart;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(160deg, #fff8ee, #f3e7d6);
    color: #2b0d0d;
    box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.6);
  }
  .mf-bt-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }
  .mf-bt-skin {
    fill: #cdb8a6;
  }
  .mf-bt-body {
    fill: #dcc7b5;
  }
  .mf-bt-cut {
    cursor: pointer;
    outline: none;
  }
  .mf-bt-region {
    fill: var(--bt-meat);
    stroke: #fff8ee;
    stroke-width: 3;
    transition: fill 0.2s ease, filter 0.2s ease;
  }
  .mf-bt-cut:hover .mf-bt-region,
  .mf-bt-cut:focus-visible .mf-bt-region,
  .mf-bt-cut.is-on .mf-bt-region {
    fill: var(--bt-meat-hi);
  }
  .mf-bt-cut.is-on .mf-bt-region {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
  }
  .mf-bt-label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    fill: #fff;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.22);
    stroke-width: 2px;
  }
  .mf-bt-info {
    display: grid;
    gap: 4px;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.5);
  }
  .mf-bt-info-hint {
    font-size: 12.5px;
    color: #7a4a20;
  }
  .mf-bt-info-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--bt-deep);
  }
  .mf-bt-info-use {
    font-size: 13px;
    line-height: 1.55;
    color: #4a3a30;
  }
  .mf-bt-info-btn {
    justify-self: start;
    margin-top: 4px;
    height: 36px;
    background: var(--bt-deep);
    color: #fff;
    border-color: transparent;
  }
  .mf-bt-info-btn:hover {
    background: #5f160c;
    color: #fff;
  }
  .mf-bt-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    list-style: none;
    padding: 2px;
    margin: 0;
    scrollbar-width: none;
  }
  .mf-bt-chips::-webkit-scrollbar {
    display: none;
  }
  .mf-bt-chip {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 11px;
    border-radius: 999px;
    background: #fff;
    color: var(--bt-deep);
    box-shadow: inset 0 0 0 1px rgba(122, 31, 18, 0.2);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mf-bt-chip:hover,
  .mf-bt-chip.is-on {
    background: var(--bt-deep);
    color: #fff;
  }

  /* the rail */
  .mf-bt-rail-wrap {
    grid-area: rail;
    display: grid;
    gap: 8px;
  }
  .mf-bt-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mf-bt-rail-head b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
  }
  .mf-bt-rail-head a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffd76a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }
  .mf-bt-rail-head a:hover {
    text-decoration: underline;
  }
  .mf-bt-item {
    position: relative;
  }
  .mf-bt-empty {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 243, 230, 0.8);
  }
  @media (min-width: 1024px) {
    .mf-bt {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      grid-template-areas: "head chart" "rail rail";
      padding: 30px 34px;
      gap: 20px 30px;
    }
    .mf-bt-title {
      font-size: 34px;
    }
    .mf-bt-text {
      font-size: 15px;
    }
    .mf-bt .mf-rail > .mf-bt-item {
      flex-basis: calc((100% - 50px) / 6);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-bt-region { transition: none; }
  }
}

/* ==========================================================================
   v0.10.24 — «دوائر»: round category medallions everywhere (categories page, home section, sub-category rails,
   menu tiles, phone drawer) — one look for every category picture
   ========================================================================== */
@layer components {
  .mf-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 14px 8px;
  }
  @media (min-width: 768px) {
    .mf-cat-grid {
      grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
      gap: 18px 12px;
    }
  }
  @media (min-width: 1280px) {
    .mf-cat-grid {
      grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    }
  }
  .mf-cat.mf-cat--circle {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    min-height: 0;
    padding: 6px 2px;
    background: transparent;
    border-radius: 18px;
    overflow: visible;
    text-align: center;
  }
  .mf-cat.mf-cat--circle:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .mf-catc-media {
    --ring: rgba(15, 123, 63, 0.12);
    position: relative;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--ring), 0 14px 24px -14px rgba(31, 35, 31, 0.45);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  }
  .mf-catc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-catc-glyph {
    width: 54%;
    height: 54%;
  }
  .mf-catc-letter {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    color: var(--primary-deep);
  }
  .mf-cat--circle[data-tone="mint"] .mf-catc-media { background: #e3f1e6; }
  .mf-cat--circle[data-tone="sun"] .mf-catc-media { background: #fdefc6; }
  .mf-cat--circle[data-tone="sand"] .mf-catc-media { background: #f1ead9; }
  .mf-cat--circle[data-tone="rose"] .mf-catc-media { background: #fbe4e2; }
  .mf-cat--circle[data-tone="sky"] .mf-catc-media { background: #e1eef8; }
  .mf-cat--circle[data-tone="leaf"] .mf-catc-media { background: #dff2df; }
  .mf-cat--circle[data-tone] .mf-catc-media img { background: #fff; }
  .mf-cat.mf-cat--circle:hover .mf-catc-media,
  .mf-cat.mf-cat--circle:focus-visible .mf-catc-media {
    --ring: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ring), 0 22px 30px -16px rgba(15, 123, 63, 0.55);
  }
  .mf-cat.mf-cat--circle:hover .mf-catc-media img {
    transform: scale(1.1);
  }
  .mf-cat--circle.is-pinned .mf-catc-media {
    --ring: var(--accent);
  }
  .mf-catc-pin {
    position: absolute;
    inset-inline-end: 2px;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--accent);
    color: #2a2306;
    box-shadow: 0 0 0 2px #fff;
  }
  .mf-catc-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    color: var(--foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
  }
  .mf-catc-n {
    margin-top: -4px;
    font-size: 11px;
    color: var(--muted);
  }
  @media (min-width: 768px) {
    .mf-catc-media {
      width: 104px;
      height: 104px;
    }
    .mf-catc-name {
      font-size: 14px;
    }
  }
  /* easy mode: bigger medallions and names */
  html.mf-easy .mf-catc-media {
    width: 100px;
    height: 100px;
  }
  html.mf-easy .mf-catc-name {
    font-size: 15px;
  }
  /* sub-category rails: round too */
  .mf-subcat-media {
    border-radius: 999px;
  }
  @media (min-width: 768px) {
    .mf-subcat-media {
      border-radius: 999px;
    }
  }
  /* menu tiles and drawer rows: round */
  .mf-navimg--tile {
    border-radius: 999px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 123, 63, 0.12);
  }
  .mf-navimg--row {
    border-radius: 999px;
  }
  .mf-mega-tile:hover .mf-navimg {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary), 0 10px 18px -12px rgba(15, 123, 63, 0.55);
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-catc-media, .mf-catc-media img { transition: none; }
  }
}

/* v0.10.26 — the home shelf («تسوّق حسب القسم») joins the circles, and non-category links under «المزيد» sit in a row */
@layer components {
  .mf-shelf-art {
    border-radius: 999px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px rgba(15, 123, 63, 0.12), 0 14px 24px -14px rgba(31, 35, 31, 0.4);
  }
  .mf-shelf-art::after {
    display: none;
  }
  .mf-shelf-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
    background: #fff;
  }
  @media (min-width: 768px) {
    .mf-shelf-art {
      border-radius: 999px;
    }
  }
  .mf-shelf-item:hover .mf-shelf-art {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary), 0 22px 30px -16px rgba(15, 123, 63, 0.55);
  }
  .mf-mega-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 8px 2px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
  }
}

/* v0.10.26 — living banners: semantic tones per service, a slow light sweep, a floating icon, a lift on hover */
@layer components {
  .mf-navimg-glyph {
    width: 62%;
    height: 62%;
  }
  .mf-sb--mint {
    --sb-bg: linear-gradient(120deg, #2da05a, #1f8f6e 55%, #166e60);
    --sb-btn-bg: #ffffff;
    --sb-btn-fg: #166e60;
  }
  .mf-sb--gold {
    --sb-bg: linear-gradient(120deg, #ffd76a, #f0a500 50%, #c77d00);
    --sb-fg: #2a2306;
    --sb-muted: rgba(42, 35, 6, 0.78);
    --sb-art: rgba(255, 255, 255, 0.55);
    --sb-chip: rgba(255, 255, 255, 0.5);
    --sb-btn-bg: #1f231f;
    --sb-btn-fg: #ffffff;
  }
  .mf-sb--gold .mf-sb-art svg { color: #8a5a00; }
  .mf-sb--wa {
    --sb-bg: linear-gradient(120deg, #25d366, #1faa57 55%, #128c7e);
    --sb-btn-bg: #ffffff;
    --sb-btn-fg: #128c7e;
  }
  .mf-sb--night .mf-sb-art {
    background: rgba(245, 182, 34, 0.18);
    box-shadow: inset 0 0 0 1px rgba(245, 182, 34, 0.45);
  }
  .mf-sb--night .mf-sb-art svg { color: #ffd76a; }
  .mf-sb--night .mf-sb-kicker { color: #ffd76a; }

  /* the sweep of light */
  .mf-sb .mf-sb-sheen {
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 28%;
    left: -40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-18deg);
    animation: mf-sb-sheen 7.5s ease-in-out infinite;
    animation-delay: calc(var(--sb-i, 0) * 1.3s);
    pointer-events: none;
  }
  [dir="ltr"] .mf-sb .mf-sb-sheen { animation-name: mf-sb-sheen-ltr; }
  @keyframes mf-sb-sheen {
    0%, 55% { left: 110%; }
    85%, 100% { left: -40%; }
  }
  @keyframes mf-sb-sheen-ltr {
    0%, 55% { left: -40%; }
    85%, 100% { left: 110%; }
  }
  /* the icon breathes */
  .mf-sb-art svg,
  .mf-sb-art img {
    animation: mf-sb-float 3.4s ease-in-out infinite;
  }
  @keyframes mf-sb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .mf-sb {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  }
  .mf-sb:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--sb-ring), 0 26px 40px -26px rgba(31, 35, 31, 0.6);
  }
  .mf-sb:hover .mf-sb-art {
    transform: rotate(-8deg) scale(1.08);
  }

  /* menus come alive: tiles bloom one after the other when a panel opens (class set by ui-polish.js), pictures wobble on hover */
  @keyframes mf-mega-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
  .mf-mega.is-open .mf-mega-item,
  .mf-mega.is-open .mf-mega-links {
    animation: mf-mega-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--n, 0) * 30ms);
  }
  .mf-mega-tile:hover .mf-navimg {
    transform: rotate(-6deg) scale(1.08);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-mega-chip:hover {
    transform: translateY(-1px);
  }
  .mf-nav > li > a:hover .mf-navimg--pill,
  .mf-nav > li > div > button:hover .mf-navimg--pill {
    transform: scale(1.18) rotate(-8deg);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-sb .mf-sb-sheen, .mf-sb-art svg, .mf-sb-art img, .mf-mega.is-open .mf-mega-item { animation: none; }
    .mf-sb, .mf-mega-tile:hover .mf-navimg, .mf-nav > li > a:hover .mf-navimg--pill { transform: none; transition: none; }
  }
}

/* v0.10.26 — motion is the house style: medallions breathe in, the pinned one glows, pictures sway on hover */
@layer components {
  /* (entrance: the grid already staggers its children through [data-reveal="stagger"]) */
  @keyframes mf-catc-glow {
    0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--accent), 0 14px 24px -14px rgba(31, 35, 31, 0.45); }
    50% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(245, 182, 34, 0.55), 0 14px 24px -14px rgba(31, 35, 31, 0.45); }
  }
  .mf-cat--circle.is-pinned .mf-catc-media {
    animation: mf-catc-glow 2.8s ease-in-out infinite;
  }
  .mf-cat.mf-cat--circle:hover .mf-catc-media img,
  .mf-cat.mf-cat--circle:hover .mf-catc-glyph {
    transform: scale(1.12) rotate(-5deg);
  }
  .mf-catc-glyph {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-cat.mf-cat--circle:active .mf-catc-media {
    transform: scale(0.96);
  }
  /* the home shelf: same sway */
  .mf-shelf-item:hover .mf-shelf-art img,
  .mf-shelf-item:hover .mf-shelf-art svg {
    transform: scale(1.12) rotate(-5deg);
  }
  /* drawer rows: the picture nudges when tapped */
  .mf-drawer-row:active .mf-navimg--row {
    transform: scale(0.92);
    transition: transform 0.15s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-cat--circle.is-pinned .mf-catc-media { animation: none; }
  }
}

/* ==========================================================================
   v0.10.26 — «البنر المتحرك»: the hero is a rotating banner (living canopy first, then the merchant's slides),
   compact on desktop (supermarket-banner proportions), swipe + dots + arrows, autoplay with a progress dot
   ========================================================================== */
@layer components {
  .mf-hs {
    position: relative;
  }
  .mf-hs-track {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: calc(var(--radius) * 1.6);
  }
  .mf-hs-track::-webkit-scrollbar {
    display: none;
  }
  .mf-hs-slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
  }
  .mf-hs-slide > .mf-canopy {
    width: 100%;
  }
  /* the compact canopy on laptops: ~300px tall instead of 420 */
  @media (min-width: 1024px) {
    .mf-canopy.mf-canopy--compact {
      min-height: 300px;
      padding: 24px 36px 22px;
      gap: 10px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-title {
      font-size: clamp(1.9rem, 3vw, 2.6rem);
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-text {
      font-size: 15px;
      max-width: 44ch;
    }
    .mf-canopy.mf-canopy--compact .mf-btn {
      height: 44px;
      font-size: 14.5px;
    }
  }
  /* a merchant slide */
  .mf-hs-card {
    --hs-bg: linear-gradient(120deg, #ffd76a, #f5b622 55%, #f0a500);
    --hs-fg: #2a2306;
    --hs-muted: rgba(42, 35, 6, 0.78);
    --hs-badge: rgba(255, 255, 255, 0.55);
    --hs-btn-bg: #1f231f;
    --hs-btn-fg: #ffffff;
    --hs-orb: rgba(255, 255, 255, 0.35);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 100%;
    padding: 22px 20px;
    background: var(--hs-bg);
    color: var(--hs-fg);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
  }
  .mf-hs-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.3px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 60%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent 60%);
    pointer-events: none;
    z-index: -1;
  }
  .mf-hs-sheen {
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 22%;
    left: 110%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  .mf-hs-slide.is-active .mf-hs-sheen {
    animation: mf-sb-sheen 5.5s ease-in-out infinite;
  }
  .mf-hs-body {
    display: grid;
    gap: 6px;
    justify-items: start;
    min-width: 0;
  }
  .mf-hs-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--hs-badge);
    color: var(--hs-fg);
  }
  .mf-hs-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.15;
  }
  .mf-hs-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--hs-muted);
  }
  .mf-hs-btn {
    height: 42px;
    padding: 0 18px;
    margin-top: 4px;
    background: var(--hs-btn-bg);
    color: var(--hs-btn-fg);
    border-color: transparent;
  }
  .mf-hs-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    flex: none;
  }
  .mf-hs-orb {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--hs-orb);
  }
  .mf-hs-icon {
    position: relative;
    width: 54px;
    height: 54px;
    color: var(--hs-fg);
  }
  .mf-hs-art img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.22));
  }
  /* entrance of the active slide's content */
  .mf-hs-slide .mf-hs-body > *,
  .mf-hs-slide .mf-hs-art {
    opacity: 0;
    transform: translateY(12px);
  }
  .mf-hs-slide.is-active .mf-hs-body > *,
  .mf-hs-slide.is-active .mf-hs-art {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-hs-slide.is-active .mf-hs-body > :nth-child(2) { transition-delay: 0.08s; }
  .mf-hs-slide.is-active .mf-hs-body > :nth-child(3) { transition-delay: 0.16s; }
  .mf-hs-slide.is-active .mf-hs-body > :nth-child(4) { transition-delay: 0.24s; }
  .mf-hs-slide.is-active .mf-hs-art { transition-delay: 0.12s; }
  .mf-hs-slide.is-active .mf-hs-art .mf-hs-icon,
  .mf-hs-slide.is-active .mf-hs-art img {
    animation: mf-sb-float 3.4s ease-in-out infinite;
  }
  .mf-hs-slide.is-active .mf-hs-orb {
    animation: mf-hs-orb 4.5s ease-in-out infinite;
  }
  @keyframes mf-hs-orb {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
  }
  /* full-bleed picture slide */
  .mf-hs-slide--cover .mf-hs-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    min-height: 100%;
  }
  .mf-hs-cover {
    position: absolute;
    inset: 0;
  }
  .mf-hs-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
  }
  .mf-hs-slide--cover.is-active .mf-hs-cover img {
    animation: mf-hs-kenburns 7s ease-in-out both;
  }
  @keyframes mf-hs-kenburns {
    from { transform: scale(1.04); }
    to { transform: scale(1.12); }
  }
  .mf-hs-slide--cover .mf-hs-body {
    position: relative;
    padding: 22px 20px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    --hs-fg: #fff;
    --hs-muted: rgba(255, 255, 255, 0.9);
    --hs-badge: rgba(0, 0, 0, 0.35);
    --hs-btn-bg: #fff;
    --hs-btn-fg: #1f231f;
  }
  .mf-hs-slide--cover .mf-hs-body:empty {
    display: none;
  }
  /* tones */
  .mf-hs-slide--tomato .mf-hs-card { --hs-bg: linear-gradient(120deg, #ee5a48, #df382d 60%, #b8271d); --hs-fg: #fff; --hs-muted: rgba(255, 255, 255, 0.88); --hs-badge: rgba(255, 255, 255, 0.22); --hs-btn-bg: #fff; --hs-btn-fg: #c92d23; --hs-orb: rgba(255, 255, 255, 0.2); }
  .mf-hs-slide--green .mf-hs-card { --hs-bg: linear-gradient(120deg, #0f7b3f, #15914b 60%, #0a5c2e); --hs-fg: #fff; --hs-muted: rgba(255, 255, 255, 0.88); --hs-badge: rgba(255, 255, 255, 0.2); --hs-btn-bg: #f5b622; --hs-btn-fg: #2a2306; --hs-orb: rgba(255, 255, 255, 0.18); }
  .mf-hs-slide--night .mf-hs-card { --hs-bg: linear-gradient(120deg, #0a5c2e, #06371d 70%, #052a16); --hs-fg: #fff; --hs-muted: rgba(255, 255, 255, 0.85); --hs-badge: rgba(245, 182, 34, 0.25); --hs-btn-bg: #f5b622; --hs-btn-fg: #2a2306; --hs-orb: rgba(245, 182, 34, 0.22); }
  .mf-hs-slide--mint .mf-hs-card { --hs-bg: linear-gradient(120deg, #2da05a, #1f8f6e 55%, #166e60); --hs-fg: #fff; --hs-muted: rgba(255, 255, 255, 0.88); --hs-badge: rgba(255, 255, 255, 0.22); --hs-btn-bg: #fff; --hs-btn-fg: #166e60; --hs-orb: rgba(255, 255, 255, 0.2); }
  .mf-hs-slide--gold .mf-hs-card { --hs-bg: linear-gradient(120deg, #ffd76a, #f0a500 50%, #c77d00); }
  .mf-hs-slide--plum .mf-hs-card { --hs-bg: linear-gradient(120deg, #8e2a6b, #6b1f52 60%, #4a1538); --hs-fg: #fff; --hs-muted: rgba(255, 255, 255, 0.88); --hs-badge: rgba(255, 255, 255, 0.22); --hs-btn-bg: #fff; --hs-btn-fg: #6b1f52; --hs-orb: rgba(255, 255, 255, 0.18); }
  .mf-hs-slide--sand .mf-hs-card { --hs-bg: linear-gradient(120deg, #f7f0df, #efe4cc 60%, #e7dcc0); --hs-fg: #1f231f; --hs-muted: #6d7268; --hs-badge: #fff; --hs-btn-bg: #0f7b3f; --hs-btn-fg: #fff; --hs-orb: #fff; }

  /* dots + arrows */
  .mf-hs-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    z-index: 3;
  }
  .mf-hs-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .mf-hs-dots button.is-active {
    width: 26px;
    background: rgba(255, 255, 255, 0.35);
  }
  .mf-hs-dots button.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #fff;
    transform-origin: right center;
    animation: mf-hs-progress var(--hs-interval, 6s) linear forwards;
  }
  [dir="ltr"] .mf-hs-dots button.is-active::after { transform-origin: left center; }
  .mf-hs.is-paused .mf-hs-dots button.is-active::after { animation-play-state: paused; }
  @keyframes mf-hs-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  .mf-hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.85);
    color: var(--primary-deep);
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.5);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .mf-hs:hover .mf-hs-arrow,
  .mf-hs:focus-within .mf-hs-arrow {
    opacity: 1;
  }
  .mf-hs-arrow--prev { inset-inline-start: 10px; }
  .mf-hs-arrow--next { inset-inline-end: 10px; }
  .mf-hs-arrow:hover { transform: translateY(-50%) scale(1.08); }
  @media (max-width: 767px) {
    .mf-hs-arrow { display: none; }
    .mf-hs-card { padding: 18px 16px 44px; gap: 12px; }
    .mf-hs-title { font-size: 20px; }
    .mf-hs-art { width: 84px; height: 84px; }
    .mf-hs-icon { width: 40px; height: 40px; }
  }
  @media (min-width: 768px) {
    .mf-hs-card { padding: 26px 60px; gap: 22px; }
    .mf-hs-title { font-size: 32px; }
    .mf-hs-text { font-size: 15px; max-width: 48ch; }
    .mf-hs-art { width: 160px; height: 160px; }
    .mf-hs-icon { width: 72px; height: 72px; }
    .mf-hs-slide--cover .mf-hs-body { padding: 30px 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-hs-slide .mf-hs-body > *, .mf-hs-slide .mf-hs-art { opacity: 1; transform: none; transition: none; }
    .mf-hs-slide.is-active .mf-hs-sheen, .mf-hs-slide.is-active .mf-hs-art .mf-hs-icon, .mf-hs-slide.is-active .mf-hs-art img, .mf-hs-slide.is-active .mf-hs-orb, .mf-hs-slide--cover.is-active .mf-hs-cover img { animation: none; }
    .mf-hs-dots button.is-active::after { animation: none; transform: none; }
  }
}

/* ==========================================================================
   v0.10.27 — store owner's round: hero banner rotates by itself (6 banners), stories on every screen, the shelf in two
   equal rows, categories page 4 × 5 with a search box, the search box finds the store's own places, the add-to-cart
   refusal explained, the app-offers banner tells its day, no Hijri dates in the branches
   ========================================================================== */
@layer components {
  /* ---- hero slides: the offer-day pill, category art, no pause for a resting pointer ---- */
  .mf-hs-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 12px;
    line-height: 1.3;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    color: var(--hs-fg, #fff);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* the slide body's single grid column must not grow past the body (the live check on a phone showed the pill's
     max-content width stretching the column to 299 px inside a 215 px body) */
  .mf-hs-body { grid-template-columns: minmax(0, 1fr); }
  .mf-hs-count > span { min-width: 0; }
  .mf-hs-count > svg { flex: none; }
  .mf-hs-count[data-live="true"] {
    background: var(--deal);
    color: #fff;
    animation: mf-sb-pulse 2.2s ease-in-out infinite;
  }
  .mf-hs-slide.is-live .mf-hs-card { --hs-bg: linear-gradient(120deg, #ee5a48, #df382d 60%, #b8271d); --hs-fg: #fff; --hs-muted: rgba(255, 255, 255, 0.9); --hs-badge: rgba(255, 255, 255, 0.22); --hs-btn-bg: #fff; --hs-btn-fg: #c92d23; --hs-orb: rgba(255, 255, 255, 0.2); }
  .mf-hs-cat {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }
  .mf-hs-icon--art {
    width: 62% !important;
    height: 62% !important;
  }
  .mf-hs-slide.has-cat-art .mf-hs-cat,
  .mf-hs-cat.is-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 18px 30px -16px rgba(0, 0, 0, 0.5);
    background: #fff;
  }
  .mf-hs-slide.has-cat-art .mf-hs-cat img,
  .mf-hs-cat.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mf-hs-slide.has-cat-art .mf-hs-orb { opacity: 0.35; }
  .mf-hs-dots button.is-active::after { animation-play-state: running; }
  .mf-hs.is-paused .mf-hs-dots button.is-active::after { animation-play-state: paused; }
  .mf-hs-card:active { transform: scale(0.995); }
  .mf-hs-track { cursor: grab; }
  .mf-hs.is-paused .mf-hs-track { cursor: grabbing; }

  /* ---- the app-offers banner on its day: tomato, the title changes, the pill counts down to midnight ---- */
  .mf-sb.is-live {
    --sb-bg: linear-gradient(120deg, #ee5a48, #df382d 60%, #c92d23);
    --sb-fg: #fff;
    --sb-muted: rgba(255, 255, 255, 0.9);
    --sb-art: rgba(255, 255, 255, 0.22);
    --sb-chip: rgba(255, 255, 255, 0.2);
    --sb-btn-bg: #ffffff;
    --sb-btn-fg: #c92d23;
  }
  .mf-sb.is-live .mf-sb-count[data-live="true"] { background: rgba(0, 0, 0, 0.22); }

  /* ---- the category shelf: two full rows, equal columns (phones scroll the two rows sideways) ---- */
  .mf-shelf--rows {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--shelf-rows, 2), auto);
    grid-auto-columns: 92px;
    gap: 12px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 2px 20px;
  }
  .mf-shelf--rows .mf-shelf-item { flex: none; width: 92px; }
  @media (min-width: 768px) {
    .mf-shelf--rows {
      grid-auto-flow: row;
      grid-template-columns: repeat(var(--shelf-cols, 7), minmax(0, 1fr));
      grid-auto-columns: auto;
      gap: 16px 10px;
      overflow: visible;
      scroll-snap-type: none;
    }
    .mf-shelf--rows .mf-shelf-item { width: auto; min-width: 0; }
    .mf-shelf--rows .mf-shelf-art { width: 100%; max-width: 118px; height: auto; aspect-ratio: 1; }
    .mf-shelf--rows .mf-shelf-item span { max-width: 100%; }
  }
  @media (min-width: 1280px) {
    .mf-shelf--rows .mf-shelf-art { max-width: 124px; }
  }

  /* ---- categories page: four circles per row on every screen, a search box over them ---- */
  .mf-catpage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
  }
  .mf-cat-search {
    flex: 1 1 260px;
    max-width: 440px;
    height: 48px;
    position: relative;
  }
  .mf-cat-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 15px;
    color: var(--foreground);
  }
  .mf-cat-search input::-webkit-search-cancel-button { display: none; }
  .mf-cat-search-clear {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: var(--secondary);
    color: var(--muted);
    place-items: center;
    cursor: pointer;
    flex: none;
  }
  .mf-cat-search:focus-within .mf-cat-search-clear,
  .mf-cat-search input:not(:placeholder-shown) ~ .mf-cat-search-clear { display: grid; }
  .mf-cat-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 8px;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
  }
  .mf-cat-grid--four .mf-cat.mf-cat--circle { padding: 4px 0; }
  .mf-cat-grid--four .mf-catc-media { width: 72px; height: 72px; }
  .mf-cat-grid--four .mf-catc-name { font-size: 12.5px; }
  @media (min-width: 480px) {
    .mf-cat-grid--four .mf-catc-media { width: 88px; height: 88px; }
    .mf-cat-grid--four .mf-catc-name { font-size: 13.5px; }
  }
  @media (min-width: 768px) {
    .mf-cat-grid--four { gap: 22px 16px; }
    .mf-cat-grid--four .mf-catc-media { width: 112px; height: 112px; }
    .mf-cat-grid--four .mf-catc-name { font-size: 15px; }
  }
  @media (min-width: 1024px) {
    .mf-cat-grid--four .mf-catc-media { width: 128px; height: 128px; }
  }
  .mf-cat-grid--four .mf-cat[hidden] { display: none; }
  .mf-cat-grid.is-filtered .mf-cat { animation: mf-catc-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes mf-catc-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
  .mf-cat-more {
    justify-self: center;
    margin: 4px auto 0;
    display: inline-flex;
  }
  .mf-cat-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 16px;
    border-radius: 18px;
    background: var(--secondary);
    text-align: center;
  }
  .mf-cat-empty p { margin: 0; color: var(--muted); font-weight: 600; }
  .mf-cat-empty .mf-btn b { font-weight: 800; }
  [data-subcat-rail][hidden], [data-subcat-item][hidden] { display: none; }

  /* ---- stories on every screen (the viewer becomes a phone-shaped frame on laptops) ---- */
  /* the viewer shares its class name with the «story band» section, whose two-column grid pushed the frame aside on
     wide screens — the dialog keeps one centered column */
  .mf-story[role="dialog"] { grid-template-columns: 1fr; padding: 0; gap: 0; border-radius: 0; overflow: hidden; }
  @media (min-width: 1024px) {
    .mf-stories-host { display: block; padding: 10px 0 0; min-height: 118px; }
    .mf-stories { justify-content: center; gap: 22px; padding: 6px 16px 6px; overflow: visible; flex-wrap: wrap; }
    .mf-story-bubble { width: 86px; }
    .mf-story-ring { width: 78px; height: 78px; }
    .mf-story-label { font-size: 12px; max-width: 86px; }
    .mf-story-bubble:hover .mf-story-ring { transform: scale(1.07); }
    .mf-story { background: rgba(6, 18, 11, 0.9); backdrop-filter: blur(10px); }
    .mf-story-scene { max-width: 420px; height: min(calc(100dvh - 48px), 820px); border-radius: 30px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
    .mf-story-tap { cursor: pointer; }
  }
  .mf-story-poster--sun { background: linear-gradient(160deg, #f5b622, #b96d09); color: #2a2306; }
  .mf-story-poster--sun .mf-story-note { background: rgba(0, 0, 0, 0.12); }

  /* ---- the search box: «انتقال سريع» rows above the products ---- */
  .mf-sq--jump { padding-top: 10px; }
  .mf-jump-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
  }
  .mf-jump {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    padding-inline-start: 6px;
    padding-inline-end: 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--foreground);
    min-width: 0;
    animation: mf-jump-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes mf-jump-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .mf-jump:hover, .mf-jump:focus-visible { background: var(--tint); border-color: var(--primary); transform: translateY(-1px); text-decoration: none; }
  .mf-jump-ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tint);
    color: var(--primary-deep);
    overflow: hidden;
  }
  .mf-jump-ic svg { width: 20px; height: 20px; }
  .mf-jump-ic img { width: 100%; height: 100%; object-fit: cover; }
  .mf-jump-txt { display: grid; min-width: 0; line-height: 1.2; }
  .mf-jump-txt b { font-family: var(--font-display); font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mf-jump-txt small { font-size: 11px; color: var(--muted); }
  .mf-flash { animation: mf-flash 1.5s ease-out both; border-radius: 22px; }
  @keyframes mf-flash { 0% { box-shadow: 0 0 0 0 rgba(245, 182, 34, 0.9); } 100% { box-shadow: 0 0 0 18px rgba(245, 182, 34, 0); } }

  /* ---- the add-to-cart refusal, explained ---- */
  .mf-toast--warn {
    border-radius: 18px;
    align-items: flex-start;
    pointer-events: auto;
    background: #2a1512;
    max-width: min(420px, calc(100vw - 32px));
  }
  .mf-toast .warn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--deal);
    display: grid;
    place-items: center;
    flex: none;
    margin-top: 1px;
  }
  .mf-toast-body { display: grid; gap: 6px; min-width: 0; }
  .mf-toast-body b { font-weight: 700; line-height: 1.35; white-space: normal; }
  .mf-toast-acts { display: flex; flex-wrap: wrap; gap: 6px; }
  .mf-toast-act {
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 800;
    background: var(--accent);
    color: #2a2306;
    cursor: pointer;
  }
  .mf-toast-act:hover { background: #ffd76a; }

  @media (prefers-reduced-motion: reduce) {
    .mf-hs-count[data-live="true"], .mf-cat-grid.is-filtered .mf-cat, .mf-jump, .mf-flash { animation: none; }
  }
}

/* ==========================================================================
   v0.10.28 — store owner: six products per row everywhere, and a shorter product card
   («كبر الصنف لا يُطاق»: no category line, the price right under the name, tighter chrome)
   ========================================================================== */
/* ---- six per row on laptops: the old default of five (saved or not) becomes six; 2/3/4 stay as chosen.
   Unlayered on purpose: the platform's [data-grid] rule is unlayered too, and an unlayered rule always beats a layered one. ---- */
@media (min-width: 1024px) {
  html[data-cols-desktop="5"] .section-products [data-grid="grid"],
  html[data-cols-desktop="6"] .section-products [data-grid="grid"],
  html[data-cols-desktop="5"] [data-grid="four"],
  html[data-cols-desktop="6"] [data-grid="four"],
  html[data-cols-desktop="5"] .mf-grid,
  html[data-cols-desktop="6"] .mf-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
  /* twelve items = two full rows of six: nothing to hide any more */
  html[data-cols-desktop="5"] .section-products [data-grid="grid"] > :nth-child(n + 11) {
    display: block;
  }
  /* the full-width deals rail shows six whole cards; the band rails (fresh / bakery / oven) keep their own counts —
     four, four and three — because they share the row with the oven, the video or the market scene (v0.10.29: the
     first cut of 0.10.28 forced six on them too and squeezed the cards to 80–100 px) */
  html #mf-deals .mf-rail > * {
    flex-basis: calc((100% - 5 * 10px) / 6);
  }
  html #mf-deals .mf-rail {
    gap: 10px;
  }
}
@layer components {
  /* ---- the card: shorter ---- */
  .mf-card {
    gap: 4px;
    padding: 6px 6px 8px;
  }
  .mf-card-body {
    gap: 3px;
  }
  .mf-card-name {
    font-size: 12.5px;
    line-height: 1.35;
    min-height: 2.7em;
    font-weight: 600;
  }
  /* the brand / weight / category line under the name is gone (layout → «بطاقة المنتج» → «سطر الفئة» brings it back) */
  .mf-card-meta {
    display: none;
  }
  html[data-card-meta="on"] .mf-card-meta {
    display: block;
    font-size: 11px;
    min-height: 0;
  }
  /* the foot is a two-column grid: the price block and the round «+» beside it — the button never drops under the
     price; the quantity stepper (once a product is in the cart) takes the whole row under the price */
  .mf-card-foot {
    margin-top: 2px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 4px 6px;
    flex-wrap: nowrap;
  }
  .mf-card-actions.has-qty {
    grid-column: 1 / -1;
  }
  /* price block: now + was on one line; the saving pill and the per-unit line share the second line */
  .mf-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1px 6px;
    line-height: 1.1;
    min-width: 0;
  }
  .mf-price .mf-unit {
    display: inline;
    width: auto;
  }
  .mf-price-now {
    font-size: 15.5px;
  }
  .mf-price-was {
    font-size: 11px;
  }
  .mf-save {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 5px;
  }
  .mf-unit {
    font-size: 10.5px;
    margin-top: 0;
    line-height: 1.2;
  }
  .mf-card .flex.items-center.gap-1.text-xs {
    font-size: 10.5px;
    line-height: 1.2;
    margin-top: -2px;
  }
  @media (hover: hover) and (min-width: 1024px) {
    .mf-add {
      width: 36px;
      height: 36px;
    }
    .mf-add svg {
      width: 18px;
      height: 18px;
    }
  }
  /* the price sits right under the name on every card; a row keeps equal heights, and whatever is left over goes
     under the price instead of between the name and the price */
  .mf-card-body {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   v0.10.31 — the phone tidy-up (store owner's screenshots) + a Carrefour-height hero on laptops
   ========================================================================== */
@layer components {
  /* ---- laptops and iPads: the hero banner ~250 px tall (was 346 on laptops, 420 on an iPad held upright) —
     Carrefour's proportions ---- */
  @media (min-width: 768px) {
    .mf-canopy.mf-canopy--compact,
    .mf-canopy.mf-canopy--compact.has-pay,
    .mf-canopy.mf-canopy--compact.has-float,
    .mf-canopy.mf-canopy--compact.has-pay.has-float {
      min-height: 250px;
      padding: 44px 32px 26px !important;
      padding-inline-start: 40% !important;
      gap: 7px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-orbit { display: none; }
    .mf-canopy.mf-canopy--compact .mf-canopy-title {
      font-size: clamp(1.6rem, 2.4vw, 2.05rem);
      line-height: 1.18;
      max-width: 24ch;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-text {
      font-size: 14px;
      line-height: 1.5;
      max-width: 54ch;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-greetrow {
      font-size: 13px;
    }
    .mf-canopy.mf-canopy--compact .mf-btn {
      height: 40px;
      font-size: 14px;
      padding-inline: 16px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-float {
      width: 24%;
      max-width: 200px;
      padding: 10px 10px 12px;
      border-radius: 22px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-float b { font-size: 13.5px; }
    .mf-canopy.mf-canopy--compact .mf-canopy-float-price { font-size: 17px; }
    .mf-canopy.mf-canopy--compact .mf-canopy-pay { transform: scale(0.9); transform-origin: top; }
    /* a merchant picture beside the text: capped to the banner's height, never over the words */
    .mf-canopy.mf-canopy--compact .mf-canopy-art {
      width: 30%;
      max-width: 300px;
      max-height: 230px;
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      inset-inline-end: 3%;
      display: grid;
      place-items: center;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-art img { max-height: 230px; width: auto; max-width: 100%; }
    .mf-canopy.mf-canopy--compact.has-art:not(.has-cover) { padding-inline-start: 38% !important; }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .mf-canopy.mf-canopy--compact .mf-canopy-art { width: 27%; max-width: 230px; max-height: 210px; }
    .mf-canopy.mf-canopy--compact .mf-canopy-art img { max-height: 210px; }
    .mf-canopy.mf-canopy--compact.has-art:not(.has-cover) { padding-inline-start: 36% !important; }
    .mf-canopy.mf-canopy--compact .mf-canopy-title { max-width: 20ch; }
    .mf-hs-card { padding: 16px 44px; gap: 18px; }
    .mf-hs-title { font-size: 27px; }
    .mf-hs-text { font-size: 14px; max-width: 52ch; }
    .mf-hs-art { width: 132px; height: 132px; }
    .mf-hs-icon { width: 60px; height: 60px; }
    .mf-hs-btn { height: 40px; font-size: 14px; }
    .mf-hs-dots { bottom: 7px; }
    .mf-hs-card { padding-bottom: 24px; }
  }

  /* ---- phones: one slim strip for the cart instead of a tall floating pill ---- */
  @media (max-width: 1023px) {
    .mf-minibar {
      inset-inline: 0;
      bottom: var(--tabbar-space, 0px);
      border-radius: 16px 16px 0 0;
      padding: 6px 14px 6px 10px;
      padding-inline-start: 14px;
      padding-inline-end: 8px;
      gap: 8px;
      min-height: 40px;
      box-shadow: 0 -10px 24px -18px rgba(6, 55, 29, 0.7);
    }
    .mf-minibar .mf-minibar-sum {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
      flex: 1;
      line-height: 1.2;
    }
    .mf-minibar .mf-minibar-sum small {
      font-size: 11.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .mf-minibar .mf-minibar-sum b { font-size: 14px; flex: none; }
    .mf-minibar .mf-minibar-go { padding: 6px 12px; font-size: 12.5px; flex: none; }
    .mf-minibar-line { inset-inline-start: 14px; width: calc((100% - 28px) * var(--p, 0)); }
    body.mf-minibar-on .loyalty_button_footer { bottom: calc(50px + var(--tabbar-space, 0px)) !important; }
    body.mf-minibar-on .mf-toast-stack { bottom: calc(52px + var(--tabbar-space, 0px)); }
  }

  /* ---- phones: the offers clock as two full-width cards under each other (no half card peeking) ---- */
  @media (max-width: 767px) {
    .mf-oclock .mf-oclock-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      overflow: visible;
      padding: 0;
      margin-inline: 0;
    }
    .mf-oclock .mf-oclock-grid > .mf-oclock-card { flex: none; width: 100%; min-width: 0; }
    /* the shelf's names: always the same two-line box, so the second row never leans on the first */
    .mf-shelf--rows .mf-shelf-item span:last-child { height: 2.5em; line-height: 1.25; }
    /* the chips row of sections under the search bar: a hair smaller */
    .mf-spine-chip { font-size: 12.5px; }
  }
  /* an unfilled basket in the editor: the note in amber */
  .mf-basket-count--note { color: #b96d09; font-size: 11.5px; line-height: 1.4; white-space: normal; }
  html.mf-editor .mf-basket-card.is-unfilled { outline: 2px dashed rgba(245, 182, 34, 0.7); outline-offset: -2px; }
}

/* ==========================================================================
   v0.10.32 — the compact hero's floating product card (unlayered: the card's own rules are unlayered) and
   «الموكب»: the built-in slides fill their middle with floating product pictures; the delivery slide drives a van
   ========================================================================== */
@media (min-width: 768px) {
  .mf-canopy.mf-canopy--compact .mf-canopy-float,
  .mf-canopy.mf-canopy--compact.has-float .mf-canopy-float {
    width: 22%;
    max-width: 168px;
    padding: 8px 8px 9px;
    border-radius: 22px;
    gap: 4px;
    inset-inline-end: 6%;
    top: 50%;
  }
  .mf-canopy.mf-canopy--compact .mf-canopy-float b { display: none; }
  .mf-canopy.mf-canopy--compact .mf-canopy-float-img { border-radius: 16px; }
  .mf-canopy.mf-canopy--compact .mf-canopy-float-price { font-size: 15px; gap: 5px; }
  .mf-canopy.mf-canopy--compact .mf-canopy-float-price s { font-size: 11px; }
  .mf-canopy.mf-canopy--compact .mf-canopy-float::after { width: 24px; height: 24px; background-size: 13px; }
  .mf-canopy.mf-canopy--compact .mf-canopy-orbit { display: none !important; }
}
@layer components {
  /* the dotted pattern drifts slowly — nothing on a slide stands still */
  .mf-hs-slide.is-active .mf-hs-card::before {
    animation: mf-hs-drift 28s linear infinite;
  }
  @keyframes mf-hs-drift {
    from { background-position: 0 0; }
    to { background-position: 160px 96px; }
  }
  /* ---- the parade: three pictures in the empty middle of a built-in slide ---- */
  .mf-hs-parade {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 46%;
    width: 36%;
    pointer-events: none;
    z-index: 0;
    display: none;
  }
  .mf-hs-tile {
    position: absolute;
    display: grid;
    place-items: center;
    width: var(--tile, 100px);
    height: var(--tile, 100px);
    padding: 8px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 34px -18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    opacity: 0;
    transform: scale(0.6) rotate(var(--rot, 0deg));
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(0.25s + var(--i, 0) * 0.12s);
  }
  .mf-hs-tile img, .mf-hs-tile svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .mf-hs-tile--glyph { background: rgba(255, 255, 255, 0.85); color: var(--hs-btn-bg, #1f231f); }
  .mf-hs-tile--glyph svg { width: 62%; height: 62%; }
  .mf-hs-tile:nth-child(1) { --tile: 100px; --rot: -7deg; top: 14%; inset-inline-start: 0; }
  .mf-hs-tile:nth-child(2) { --tile: 114px; --rot: 5deg; top: 40%; inset-inline-start: 36%; }
  .mf-hs-tile:nth-child(3) { --tile: 90px; --rot: -4deg; top: 8%; inset-inline-start: 70%; }
  .mf-hs-slide.is-active .mf-hs-tile {
    opacity: 1;
    transform: scale(1) rotate(var(--rot, 0deg));
    animation: mf-hs-tile-float 5.5s ease-in-out infinite;
    animation-delay: calc(0.9s + var(--i, 0) * 0.7s);
  }
  @keyframes mf-hs-tile-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
  }
  /* ---- the road: a dashed line between the store and a house, the van drives it (RTL: right to left) ---- */
  .mf-hs-parade--road { display: none; }
  .mf-hs-road {
    position: absolute;
    top: 56%;
    inset-inline: 6%;
    height: 0;
    border-top: 3px dashed rgba(255, 255, 255, 0.45);
  }
  .mf-hs-pin {
    position: absolute;
    top: 56%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  }
  .mf-hs-pin svg { width: 22px; height: 22px; }
  .mf-hs-pin--a { inset-inline-start: 0; }
  .mf-hs-pin--b { inset-inline-end: 0; background: var(--accent); color: #2a2306; }
  .mf-hs-truck {
    position: absolute;
    top: 56%;
    inset-inline-start: 12%;
    width: 54px;
    height: 54px;
    margin-top: -31px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--primary-deep);
    box-shadow: 0 16px 26px -14px rgba(0, 0, 0, 0.55);
  }
  .mf-hs-truck svg { width: 30px; height: 30px; }
  .mf-hs-slide.is-active .mf-hs-truck { animation: mf-hs-drive 7s ease-in-out infinite; }
  @keyframes mf-hs-drive {
    0% { inset-inline-start: 12%; translate: 0 0; }
    8% { translate: 0 -3px; }
    45% { inset-inline-start: 72%; translate: 0 0; }
    52% { translate: 0 -3px; }
    58%, 100% { inset-inline-start: 72%; translate: 0 0; opacity: 1; }
  }
  @media (min-width: 768px) {
    .mf-hs-parade, .mf-hs-parade--road { display: block; }
    /* the delivery slide: the van on the road is the picture — no second truck in a circle */
    .mf-hs-slide[data-hs-parade="road"] .mf-hs-art { display: none; }
    .mf-hs-parade--road { inset-inline-start: 46%; width: 50%; }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .mf-hs-parade { inset-inline-start: 50%; width: 30%; }
    .mf-hs-tile:nth-child(1) { --tile: 84px; }
    .mf-hs-tile:nth-child(2) { --tile: 96px; }
    .mf-hs-tile:nth-child(3) { --tile: 72px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-hs-slide.is-active .mf-hs-card::before, .mf-hs-slide.is-active .mf-hs-tile, .mf-hs-slide.is-active .mf-hs-truck { animation: none; }
    .mf-hs-tile { transition: none; }
  }
}

/* ==========================================================================
   v0.10.33 — the customer's name, the free-delivery party, discount-code ticket + story, the recoloured app
   banner, a compact horizontal footer on phones/tablets, real products in the category scenes
   ========================================================================== */
@layer components {
  /* ---- confetti ---- */
  .mf-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1300;
    overflow: hidden;
  }
  .mf-confetti i {
    position: absolute;
    top: -14px;
    border-radius: 2px;
    animation: mf-confetti-fall 3s ease-in both;
  }
  @keyframes mf-confetti-fall {
    0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
    100% { transform: translate3d(var(--x, 0), 105vh, 0) rotate(var(--r, 360deg)); opacity: 0.9; }
  }
  .mf-toast--party { background: var(--primary-deep); border-radius: 18px; }
  .mf-toast--party .ok { background: var(--accent); }

  /* ---- the discount ticket (home page, once a day) ---- */
  .mf-ticket {
    position: fixed;
    inset-inline: 12px;
    bottom: calc(14px + var(--tabbar-space, 0px));
    z-index: 70;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 10px;
    border-radius: 18px;
    background: linear-gradient(120deg, #fff9e6, #fff);
    color: var(--foreground);
    box-shadow: 0 24px 50px -22px rgba(31, 35, 31, 0.6), 0 0 0 1px rgba(245, 182, 34, 0.5);
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
    max-width: 520px;
    margin-inline: auto;
  }
  body.mf-minibar-on .mf-ticket { bottom: calc(58px + var(--tabbar-space, 0px)); }
  .mf-ticket.is-in { transform: translateY(0); opacity: 1; }
  .mf-ticket::before, .mf-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--background);
    transform: translateY(-50%);
  }
  .mf-ticket::before { inset-inline-start: -7px; }
  .mf-ticket::after { inset-inline-end: -7px; }
  .mf-ticket-ic {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #2a2306;
    animation: mf-ticket-wiggle 2.6s ease-in-out infinite;
  }
  .mf-ticket-ic svg { width: 24px; height: 24px; }
  @keyframes mf-ticket-wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
  .mf-ticket-body { display: grid; gap: 1px; min-width: 0; }
  .mf-ticket-body small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
  .mf-ticket-body b { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mf-ticket-code {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1.5px dashed var(--primary);
    background: var(--tint);
    color: var(--primary-deep);
    cursor: pointer;
  }
  .mf-ticket-code span { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; }
  .mf-ticket-code i { font-style: normal; font-size: 10.5px; font-weight: 700; }
  .mf-ticket-x {
    position: absolute;
    top: -9px;
    inset-inline-start: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: var(--ink);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  @media (min-width: 1024px) {
    .mf-ticket { bottom: 24px; inset-inline-start: auto; inset-inline-end: 24px; margin-inline: 0; width: 420px; }
  }
  /* the coupon story slide */
  .mf-story-coupon .mf-story-poster-body { justify-items: center; text-align: center; width: 100%; }
  .mf-story-code {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 12px 26px;
    border-radius: 16px;
    border: 2px dashed rgba(42, 35, 6, 0.45);
    background: rgba(255, 255, 255, 0.7);
    color: #2a2306;
    cursor: pointer;
  }
  .mf-story-code span { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: 0.1em; }
  .mf-story-code i { font-style: normal; font-size: 12px; font-weight: 700; }
  .mf-story-code.is-done { background: #fff; border-color: var(--primary); }
  .mf-story-ends { font-size: 12.5px; opacity: 0.85; }
  .mf-story-foot--row { display: flex; gap: 8px; flex-wrap: wrap; }
  .mf-story-foot--row .mf-btn { flex: 1 1 auto; justify-content: center; }
  .mf-story-dl { color: #fff; border-color: rgba(255, 255, 255, 0.55); }

  /* ---- Zid's «get the app» banner in our colours ---- */
  .smartbanner.mf-sb-app {
    background: linear-gradient(120deg, var(--primary-deep), var(--primary)) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -16px rgba(6, 55, 29, 0.6) !important;
    border: 0 !important;
    font-family: var(--font-body, inherit) !important;
  }
  .smartbanner.mf-sb-app--sand { background: linear-gradient(120deg, #f7f0df, #efe4cc) !important; color: var(--foreground) !important; }
  .smartbanner.mf-sb-app--sun { background: linear-gradient(120deg, #ffd76a, #f5b622) !important; color: #2a2306 !important; }
  .smartbanner.mf-sb-app .smartbanner__info__title,
  .smartbanner.mf-sb-app .smartbanner__info__author,
  .smartbanner.mf-sb-app .smartbanner__info__price { color: inherit !important; text-shadow: none !important; }
  .smartbanner.mf-sb-app .smartbanner__info__title { font-weight: 800 !important; font-family: var(--font-display, inherit) !important; }
  .smartbanner.mf-sb-app .smartbanner__button {
    background: var(--accent) !important;
    color: #2a2306 !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .smartbanner.mf-sb-app .smartbanner__button__label { color: #2a2306 !important; background: transparent !important; }
  .smartbanner.mf-sb-app .smartbanner__icon { border-radius: 14px !important; background-color: #fff !important; }
  .smartbanner.mf-sb-app .smartbanner__exit { opacity: 0.8; }
  .smartbanner.mf-sb-app .smartbanner__exit::before, .smartbanner.mf-sb-app .smartbanner__exit::after { background: currentColor !important; }
  .mf-sb-app-line { display: inline-block; transition: opacity 0.22s ease, transform 0.22s ease; opacity: 0; transform: translateY(4px); }
  .mf-sb-app-line.is-in { opacity: 1; transform: none; }

  /* ---- category scenes: the real products across the top ---- */
  .mf-scene-prods {
    position: absolute;
    inset-inline: 0;
    top: 10px;
    height: 84px;
    z-index: 2;
    pointer-events: none;
  }
  .mf-scene-prod {
    position: absolute;
    top: 0;
    inset-inline-start: calc(3% + var(--i, 0) * (94% / var(--n, 6)));
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff;
    padding: 5px;
    box-shadow: 0 14px 24px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    pointer-events: auto;
    transform: rotate(calc((var(--i, 0) - 2) * 3deg));
    animation: mf-scene-prod-float 5s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.55s);
  }
  .mf-scene-prod img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .mf-scene-prod b {
    position: absolute;
    top: -8px;
    inset-inline-end: -6px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--deal);
    color: #fff;
  }
  @keyframes mf-scene-prod-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  .mf-page-hero.has-prods { padding-top: 104px; min-height: 196px; }
  .mf-page-hero.has-prods .mf-fridge-items,
  .mf-page-hero.has-prods .mf-crate svg,
  .mf-page-hero.has-prods .mf-bag,
  .mf-page-hero.has-prods .mf-nut,
  .mf-page-hero.has-prods .mf-can,
  .mf-page-hero.has-prods .mf-jar,
  .mf-page-hero.has-prods .mf-tag,
  .mf-page-hero.has-prods .mf-oven-tray { display: none !important; }
  @media (max-width: 479px) {
    .mf-scene-prod { width: 58px; height: 58px; padding: 4px; border-radius: 16px; }
    .mf-scene-prod:nth-child(n + 6) { display: none; }
    .mf-scene-prods { --n: 5; }
  }
  @media (min-width: 768px) {
    .mf-scene-prods { top: 16px; height: 96px; }
    .mf-scene-prod { width: 84px; height: 84px; border-radius: 22px; inset-inline-start: calc(6% + var(--i, 0) * (82% / var(--n, 6))); }
    .mf-page-hero.has-prods { padding-top: 126px; min-height: 230px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mf-scene-prod, .mf-ticket-ic, .mf-confetti i { animation: none; }
  }

  /* ---- footer on phones and tablets: smaller, side by side ---- */
  @media (max-width: 1023px) {
    .mf-footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 14px;
      padding: 16px 0 10px;
    }
    .mf-footer-grid > :first-child {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .mf-footer-logo-box, .mf-footer-logo-box--tile { width: auto; height: 52px; padding: 5px 9px; margin-bottom: 0; flex: none; border-radius: 12px; }
    .mf-footer-logo-box--circle { width: 56px; height: 56px; padding: 6px; }
    .mf-footer .mf-footer-logo-box .mf-footer-logo, .mf-footer .mf-footer-logo-box .mf-logo-svg { height: 40px; }
    .mf-footer .mf-footer-logo-box--circle .mf-logo-svg, .mf-footer .mf-footer-logo-box--circle .mf-footer-logo { height: 36px; }
    .mf-footer-logo { max-height: 44px; margin-bottom: 0; }
    .mf-footer-about {
      flex: 1 1 180px;
      margin: 0;
      font-size: 12px;
      line-height: 1.45;
      -webkit-line-clamp: 2;
    }
    .mf-footer-social { display: flex; gap: 6px; margin: 0; flex: none; }
    .mf-footer-social a { width: 34px; height: 34px; }
    .mf-footer-social a svg { width: 16px; height: 16px; }
    .mf-footer-grid h3 { font-size: 13px; margin-bottom: 6px; }
    .mf-footer-links { display: grid; gap: 5px; }
    .mf-footer-links a { font-size: 12px; line-height: 1.3; }
    .mf-footer-grid > :last-child {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .mf-footer-contact { display: contents; }
    .mf-footer-contact a, .mf-footer-contact span { font-size: 12px; gap: 5px; }
    .mf-footer-contact svg { width: 15px; height: 15px; }
    .mf-footer-doors { margin: 0; display: flex; gap: 6px; }
    .mf-footer-doors .mf-btn { height: 32px; padding: 0 11px; font-size: 12px; }
    .mf-footer-cta {
      flex: 1 1 100%;
      display: flex;
      align-items: center;
      gap: 8px 10px;
      flex-wrap: wrap;
      padding: 8px 10px;
      margin: 2px 0 0;
      border-radius: 14px;
    }
    .mf-footer-cta > b { font-size: 13px; margin-inline-end: auto; }
    .mf-footer-cta .mf-btn { height: 30px; padding: 0 10px; font-size: 11.5px; }
    .mf-footer-bottom { padding: 8px 0 10px; font-size: 11px; gap: 6px 10px; }
    .mf-footer-pay { gap: 4px; }
    .mf-footer-pay img { height: 20px; }
    .mf-footer-pay span { padding: 2px 6px; font-size: 10px; }
    .mf-footer-made { font-size: 10.5px; }
  }
  @media (min-width: 480px) and (max-width: 1023px) {
    .mf-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mf-footer-grid > :first-child, .mf-footer-grid > :last-child { grid-column: 1 / -1; }
  }
}

/* ==========================================================================
   v0.10.34 — «الجوال والتابلت»: a real tablet layer (iPad in portrait is not a stretched phone), app-like motion
   on phones (page transitions, a live tab bar, cards that answer the thumb) and the product sheet that opens in
   place. Laptops (≥1024) are untouched by every rule in this block.
   ========================================================================== */

/* ---- 1. tablet layer (768–1023) — unlayered on purpose: the platform's grid rules are unlayered too ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* product grids: four columns of ~180 px instead of three of 238 px */
  html [data-grid="four"],
  html [data-grid="grid"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
  }
  /* home product sections («الأكثر طلبًا», «وصل حديثًا»…): a rail of four whole cards, not a 1,500 px wall */
  html .section-products [data-grid="grid"] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 14px !important; /* the platform's [data-grid-root] gap is !important too */
    padding: 2px 0 6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  html .section-products [data-grid="grid"]::-webkit-scrollbar {
    display: none;
  }
  html .section-products [data-grid="grid"] > * {
    flex: 0 0 calc(25% - 10.5px); /* four whole cards with three 14 px gaps */
    min-width: 0;
    scroll-snap-align: start;
  }
}

@layer components {
  @media (min-width: 768px) and (max-width: 1023px) {
    /* every rail shows four whole cards (the laptop count of six made 120 px cards on the iPad) */
    .mf-rail > *,
    #mf-deals .mf-rail > * {
      flex-basis: calc(25% - 9px);
    }
    .mf-rail {
      gap: 12px;
    }
    /* the bands stack: the story on top as a wide head, the rail underneath at full width */
    .mf-fresh,
    .mf-bakery,
    .mf-live,
    .mf-mag {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      padding: 22px 22px 20px;
      align-items: stretch;
    }
    .mf-fresh-head,
    .mf-bakery-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "kicker kicker" "title btn" "text btn" "count count";
      column-gap: 18px;
      align-items: center;
      max-width: none;
    }
    .mf-fresh-kicker, .mf-bakery-kicker { grid-area: kicker; }
    .mf-fresh-title, .mf-bakery-title { grid-area: title; margin: 0; }
    .mf-fresh-text, .mf-bakery-text { grid-area: text; margin: 0; }
    .mf-fresh-count { grid-area: count; margin-top: 4px; }
    .mf-fresh-btn, .mf-bakery-head .mf-btn { grid-area: btn; align-self: center; margin: 0 !important; }
    /* the magazine head: one wide column; the page thumbnails become a row under the buttons */
    .mf-mag-head {
      max-width: none;
      grid-template-columns: minmax(0, 1fr);
    }
    .mf-mag-text {
      max-width: 60ch;
    }
    .mf-mag-thumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mf-bakery--oven .mf-bakery-head {
      padding-inline-end: 200px;
    }
    .mf-bakery-oven {
      inset-inline-end: 22px;
      top: 18px;
    }
    .mf-live {
      grid-template-columns: minmax(0, 1fr);
    }
    .mf-live-player {
      aspect-ratio: 16 / 7;
    }
    .mf-live-rail > * {
      flex-basis: calc(25% - 9px);
    }
    .mf-mag-stage {
      max-width: 620px;
      margin-inline: auto;
      width: 100%;
    }
    /* service banners: the body kept 115 px while the clock pill and the button took 480 — now the text owns the
       first row and the pill + button sit under it */
    .mf-sb {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "art body" "side side";
      gap: 10px 16px;
    }
    .mf-sb-side {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /* rail page dots on the iPad too (ui-polish counts four cards per page there) */
    .mf-rail-dots {
      display: flex;
    }
    /* bigger story bubbles on the iPad */
    .mf-story-bubble {
      width: 80px;
    }
    /* baskets and the offers clock: two per row (already) — equal heights */
    .mf-baskets {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* the hero's promise tiles: a comfortable row of three */
    .mf-canopy-tiles {
      gap: 10px;
    }
  }

  /* ---- 2. phone polish (≤767) ---- */
  @media (max-width: 767px) {
    /* band stories: two lines on a phone, the rest is in the page it links to */
    .mf-fresh-text, .mf-bakery-text, .mf-live-text, .mf-bt-text, .mf-sb-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* cards answer the thumb: a soft press, the «+» pops into the stepper, a shimmer while the picture loads */
    .mf-card {
      transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
    }
    .mf-card:active {
      transform: scale(0.97);
    }
    .mf-card-media.is-loading {
      background-image: linear-gradient(100deg, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(0, 0, 0, 0) 60%), var(--secondary, #f3efe6);
      background-size: 240% 100%, auto;
      animation: mf-shimmer 1.3s linear infinite;
    }
    .mf-card-media.is-loading img {
      opacity: 0;
    }
    .mf-card-media img {
      transition: opacity 0.3s ease;
    }
    @keyframes mf-shimmer {
      from { background-position: 120% 0, 0 0; }
      to { background-position: -120% 0, 0 0; }
    }
    .mf-card-actions.has-qty .mf-qty {
      animation: mf-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.4);
    }
    @keyframes mf-pop {
      0% { transform: scale(0.6); opacity: 0; }
      60% { transform: scale(1.06); opacity: 1; }
      100% { transform: none; }
    }

    /* the tab bar comes alive: a pill that slides to the active tab, the cart badge pops when the count changes */
    .mf-tabbar {
      --tab-x: 0px;
      --tab-w: 0px;
    }
    .mf-tabbar.has-pill .mf-tab[aria-current="page"]::before {
      display: none;
    }
    .mf-tabbar.has-pill::before {
      content: "";
      position: absolute;
      top: 4px;
      left: var(--tab-x);
      width: var(--tab-w);
      height: 34px;
      border-radius: 12px;
      background: var(--tint, #eaf6ee);
      transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      pointer-events: none;
      z-index: 0;
    }
    .mf-tabbar.has-pill .mf-tab {
      position: relative;
      z-index: 1;
    }
    .mf-tabbar .mf-tab:active {
      transform: scale(0.94);
    }
    .mf-tab {
      transition: color 0.15s, transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mf-tab-badge.is-pop {
      animation: mf-badge-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5);
    }
    @keyframes mf-badge-pop {
      0% { transform: scale(0.5); }
      55% { transform: scale(1.35); }
      100% { transform: none; }
    }

    /* the product page itself: tighter on a phone (reached from search engines and shared links) */
    body[data-template="product_details"] .mf-pd-gallery img {
      max-height: 46dvh;
    }
    body[data-template="product_details"] .mf-pd-title {
      font-size: 18px;
    }
  }

  /* ---- 3. page transitions (phones and tablets): the bars stay, the page glides ---- */
  @media (max-width: 1023px) {
    .mf-topbar {
      view-transition-name: mf-topbar;
    }
    .mf-tabbar {
      view-transition-name: mf-tabbar;
    }
    .mf-minibar {
      view-transition-name: mf-minibar;
    }
    body[data-template="product_details"] .mf-pd-gallery .product-gallery__slide:first-child img {
      view-transition-name: mf-product;
    }
  }
  @media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
      animation: mf-vt-out 0.22s ease both;
    }
    ::view-transition-new(root) {
      animation: mf-vt-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    html[data-vt="back"]::view-transition-new(root) {
      animation-name: mf-vt-in-back;
    }
    ::view-transition-group(mf-product) {
      animation-duration: 0.42s;
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    ::view-transition-old(mf-product),
    ::view-transition-new(mf-product) {
      animation: none;
      mix-blend-mode: normal;
      height: 100%;
      object-fit: contain;
    }
    ::view-transition-old(mf-topbar), ::view-transition-new(mf-topbar),
    ::view-transition-old(mf-tabbar), ::view-transition-new(mf-tabbar),
    ::view-transition-old(mf-minibar), ::view-transition-new(mf-minibar) {
      animation-duration: 0.1s;
    }
    @keyframes mf-vt-out {
      to { opacity: 0; transform: scale(0.985); }
    }
    @keyframes mf-vt-in {
      from { opacity: 0; transform: translateY(18px); }
    }
    @keyframes mf-vt-in-back {
      from { opacity: 0; transform: translateY(-14px); }
    }
  }
}

/* ---- unlayered on purpose: the tiles' phone rules and the dialog's utility classes sit outside @layer components ---- */
@media (max-width: 767px) {
  /* the hero's three promise tiles: icon in a tinted ring + the title only; the line of detail opens on a tap
     (two clamped lines of 10 px text were unreadable anyway) */
  .mf-canopy-tiles {
    gap: 6px;
    margin-top: 8px;
  }
  .mf-canopy-tile {
    padding: 8px 4px 7px;
    gap: 5px;
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .mf-canopy-tile svg {
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 50%;
    background: var(--tint, #eaf6ee);
    color: var(--primary-deep);
    box-sizing: border-box;
  }
  .mf-canopy-tile b {
    font-size: 11.5px;
    line-height: 1.2;
  }
  .mf-canopy-tile span {
    display: none;
  }
  .mf-canopy-tile.is-open {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    text-align: start;
    justify-items: start;
    column-gap: 10px;
    padding: 8px 12px;
    animation: mf-tile-open 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mf-canopy-tile.is-open svg {
    grid-row: span 2;
  }
  .mf-canopy-tile.is-open span {
    display: block;
    -webkit-line-clamp: unset;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted);
  }
  @keyframes mf-tile-open {
    from { opacity: 0.4; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }

  /* the product sheet: the quick-view window becomes a sheet that slides up from the bottom */
  #product-quick-view-modal > div.flex {
    align-items: flex-end;
    padding: 0;
    min-height: 100%;
  }
  #product-quick-view-modal el-dialog-panel {
    max-width: none;
    border-radius: 24px 24px 0 0;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, 0.5);
  }
  #product-quick-view-modal el-dialog-panel[data-closed] {
    transform: translateY(100%);
    opacity: 1;
  }
  /* the handle */
  #product-quick-view-modal el-dialog-panel::before {
    content: "";
    display: block;
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: var(--border);
    margin: 0 auto 6px;
  }
  #product-quick-view-modal el-dialog-panel > .mb-4 {
    margin-bottom: 4px;
    min-height: 0;
  }
  #product-quick-view-modal .mf-pd {
    gap: 12px;
  }
  #product-quick-view-modal .mf-pd-gallery img {
    max-height: 40dvh;
  }
  #product-quick-view-modal .mf-pd-title {
    font-size: 17px;
    line-height: 1.35;
  }
  #product-quick-view-modal #quick-view-footer {
    margin-top: 10px;
    padding-top: 10px;
  }
  #product-quick-view-modal #quick-view-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 700;
    color: var(--primary-deep);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--tint, #eaf6ee);
    font-size: 13px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* the quick-view window on the iPad: narrower, two columns inside */
  #product-quick-view-modal el-dialog-panel {
    max-width: 700px;
  }
}
@media (min-width: 1024px) {
  /* the product window on laptops: a little narrower than the options dialog */
  .mf-qv--sheet el-dialog-panel {
    max-width: 940px;
  }
}
/* opened from a card, the product's own name inside is the title — the dialog heading would repeat it */
.mf-qv--sheet #quick-view-title {
  display: none;
}

/* ==========================================================================
   v0.10.35 — the store owner on 0.10.34: «البانر على الجوال والتاب كبير جدًا», «صغّر الأشياء على الجوال», «أي بند فيه
   أكثر من شيء: نقاط تنقّل في الأسفل مثل السلايد»، «لا صورة مقصوصة حتى لو أستطيع السحب».
   A shorter banner on phones and iPads, a denser phone, and every row that scrolls shows whole items only with
   page dots underneath (the dots are buttons). Laptops untouched.
   ========================================================================== */
@layer components {
  /* ---- 1. the banner: ~200 px on phones (was 290), ~210 on the iPad (was 250 + tiles) ---- */
  @media (max-width: 767px) {
    .mf-canopy.mf-canopy--compact,
    .mf-canopy.mf-canopy--compact.has-pay,
    .mf-canopy.mf-canopy--compact.has-float,
    .mf-canopy.mf-canopy--compact.has-pay.has-float {
      min-height: 0;
      padding: 52px 16px 14px !important; /* the pay pill lives in the top band */
      gap: 5px;
    }
    .mf-canopy.mf-canopy--compact:not(.has-pay) {
      padding-top: 16px !important;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-orbit {
      display: none;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-title,
    .mf-canopy.mf-canopy--compact.has-float .mf-canopy-title {
      font-size: clamp(1.2rem, 5.4vw, 1.5rem);
      line-height: 1.2;
      max-width: none;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-greetrow {
      font-size: 12px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-cta .mf-btn {
      height: 38px;
      font-size: 13.5px;
      padding-inline: 14px;
    }
    /* a merchant slide on a phone: title, one line of text, the clock pill, the button — the kicker badge goes
       (the title says it) and nothing wraps twice, so the tallest slide is ~190 px */
    .mf-hs-card {
      padding: 16px 16px 22px;
      gap: 12px;
    }
    .mf-hs-body {
      gap: 5px;
    }
    .mf-hs-badge {
      display: none;
    }
    .mf-hs-title {
      font-size: 19px;
      line-height: 1.2;
    }
    .mf-hs-text {
      font-size: 12.5px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mf-hs-count {
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 11.5px;
      padding: 5px 10px;
    }
    .mf-hs-btn {
      height: 36px;
      font-size: 13px;
      margin-top: 2px;
      padding: 0 14px;
    }
    .mf-hs-art {
      width: 84px;
      height: 84px;
    }
    .mf-hs-icon {
      width: 44px;
      height: 44px;
    }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .mf-canopy.mf-canopy--compact,
    .mf-canopy.mf-canopy--compact.has-pay,
    .mf-canopy.mf-canopy--compact.has-float,
    .mf-canopy.mf-canopy--compact.has-pay.has-float {
      min-height: 200px;
      padding: 36px 28px 18px !important;
      padding-inline-start: 36% !important;
      gap: 5px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-title {
      font-size: clamp(1.3rem, 2.1vw, 1.55rem);
      line-height: 1.18;
      max-width: none;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-text {
      font-size: 13.5px;
      max-width: 60ch;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mf-canopy.mf-canopy--compact .mf-btn {
      height: 38px;
      font-size: 13.5px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-float {
      max-width: 150px;
      padding: 8px 8px 10px;
    }
    .mf-canopy.mf-canopy--compact .mf-canopy-art,
    .mf-canopy.mf-canopy--compact .mf-canopy-art img {
      max-height: 170px;
    }
    .mf-hs-card {
      padding: 14px 36px 22px;
      gap: 16px;
    }
    .mf-hs-body {
      gap: 6px;
    }
    .mf-hs-title {
      font-size: 22px;
      line-height: 1.2;
    }
    .mf-hs-text {
      font-size: 13.5px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mf-hs-count {
      font-size: 12px;
      padding: 5px 11px;
    }
    .mf-hs-art {
      width: 104px;
      height: 104px;
    }
    .mf-hs-icon {
      width: 50px;
      height: 50px;
    }
    .mf-hs-btn {
      height: 36px;
      font-size: 13.5px;
    }
  }

  /* ---- 2. a denser phone: sections, titles, bands, stories ---- */
  @media (max-width: 767px) {
    .mf-section {
      padding-block: 0.8rem;
    }
    .mf-section-head {
      margin-bottom: 0.55rem;
      gap: 0.4rem 0.8rem;
    }
    .mf-section-title {
      font-size: 1.12rem;
      gap: 8px;
    }
    .mf-section-sub,
    .mf-section-text {
      font-size: 12px;
    }
    .mf-more {
      padding: 6px 10px;
      font-size: 12px;
    }
    .mf-kicker {
      font-size: 11px;
      margin-bottom: 2px;
    }
    .mf-fresh,
    .mf-bakery,
    .mf-live,
    .mf-mag {
      padding: 14px 14px 12px;
      gap: 10px;
    }
    .mf-fresh-title,
    .mf-bakery-title,
    .mf-live-title,
    .mf-mag-title {
      font-size: 1.2rem;
    }
    .mf-fresh-text,
    .mf-bakery-text,
    .mf-live-text,
    .mf-mag-text {
      font-size: 12.5px;
      line-height: 1.45;
    }
    .mf-sb {
      padding: 12px 14px;
      gap: 8px 12px;
    }
    .mf-sb-art {
      width: 52px;
      height: 52px;
      border-radius: 16px;
    }
    .mf-sb-art svg {
      width: 26px;
      height: 26px;
    }
    .mf-sb-title {
      font-size: 17px;
      line-height: 1.2;
    }
    .mf-sb-text {
      font-size: 12.5px;
      line-height: 1.4;
    }
    .mf-sb-count {
      font-size: 11.5px;
      padding: 5px 10px;
    }
    .mf-search {
      height: 44px;
    }
    /* stories: five whole bubbles per screen, never a half one at the edge */
    .mf-stories {
      gap: 16px; /* = the side padding, so the sixth bubble never peeks into it */
      padding: 4px 16px 2px;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: 16px;
    }
    .mf-stories-host {
      min-height: 0;
    }
    .mf-story-bubble {
      width: calc((100% - 64px) / 5);
      gap: 4px;
    }
    .mf-story-ring {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      max-width: 60px;
    }
    .mf-story-label {
      max-width: 100%;
      font-size: 10.5px;
    }
    /* the baskets and the bento («عروض تستاهل»): one whole card per screen */
    .mf-basket-card {
      flex: 0 0 100%;
    }
    .mf-bento-item,
    .mf-bento-item--big,
    .mf-bento-item--tall,
    .mf-bento-item--small {
      flex: 0 0 100%;
      height: 150px;
    }
    .mf-bento,
    .mf-baskets {
      scroll-padding-inline-start: 2px;
    }
  }

  /* ---- 3. the iPad: a little denser too, stories eight whole bubbles per screen ---- */
  @media (min-width: 768px) and (max-width: 1023px) {
    .mf-section {
      padding-block: 1.2rem;
    }
    .mf-section-title {
      font-size: 1.45rem;
    }
    .mf-fresh,
    .mf-bakery,
    .mf-live,
    .mf-mag {
      padding: 18px 20px 16px;
    }
    .mf-stories {
      gap: 16px;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: 16px;
    }
    .mf-story-bubble {
      width: calc((100% - 112px) / 8);
    }
    .mf-story-ring {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      max-width: 72px;
    }
    .mf-story-label {
      max-width: 100%;
    }
    .mf-canopy-tile {
      padding: 10px 14px;
    }
  }

  /* ---- 4. page dots under every row that scrolls (phones + iPads) — buttons, like the banner's ---- */
  @media (max-width: 1023px) {
    .mf-rail-dots {
      display: flex;
      justify-content: center;
      gap: 2px;
      padding: 4px 0 0;
    }
    .mf-rail-dots > button {
      appearance: none;
      border: 0;
      margin: 0;
      width: 20px;
      height: 20px;
      padding: 6px;
      background: var(--border);
      background-clip: content-box;
      border-radius: 999px;
      cursor: pointer;
      transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .mf-rail-dots > button.is-on {
      width: 32px;
      background-color: var(--primary);
    }
    .mf-live .mf-rail-dots > button {
      background-color: rgba(255, 255, 255, 0.28);
    }
    .mf-live .mf-rail-dots > button.is-on {
      background-color: var(--accent);
    }
    .mf-shelf--rows + .mf-rail-dots {
      margin-top: -10px;
    }
  }
}

/* ---- unlayered: the shelf's phone rules and the floating hero card are unlayered in styles.css ---- */
@media (max-width: 767px) {
  /* home product sections: three whole cards — the basis assumed 8 px gaps while the grid's gap is 10 px (!important) */
  html .section-products [data-grid="grid"] > * {
    flex-basis: calc(33.3333% - 6.6667px);
  }
  /* the hero's floating product strip goes on phones (the deals rail is right under the banner) */
  .mf-canopy.mf-canopy--compact .mf-canopy-float {
    display: none;
  }
  /* the category shelf: four whole columns per screen, pages snap, nothing cut at the edge */
  .mf-shelf--rows {
    grid-auto-columns: calc((100% - 30px) / 4);
    gap: 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 2px;
    padding-bottom: 14px;
  }
  .mf-shelf--rows .mf-shelf-item {
    width: auto;
    min-width: 0;
    scroll-snap-align: none;
  }
  .mf-shelf--rows .mf-shelf-item:nth-child(8n + 1) {
    scroll-snap-align: start;
  }
  .mf-shelf--rows[style*="--shelf-rows: 3"] .mf-shelf-item {
    scroll-snap-align: none;
  }
  .mf-shelf--rows[style*="--shelf-rows: 3"] .mf-shelf-item:nth-child(12n + 1) {
    scroll-snap-align: start;
  }
  .mf-shelf--rows .mf-shelf-art {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 92px;
  }
  .mf-shelf--rows .mf-shelf-item span {
    max-width: 100%;
    font-size: 11.5px;
  }
}

/* ==========================================================================
   v0.10.36 — «ابحث داخل القسم»: a search box scoped to the category page + scope chips in the search dialog
   ========================================================================== */
@layer components {
  .mf-scope-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  .mf-scope-search-box {
    flex: 1;
    height: 46px;
  }
  .mf-scope-search-box input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--foreground);
    font-size: 14px;
  }
  .mf-scope-search-box input::-webkit-search-cancel-button {
    display: none;
  }
  .mf-scope-search-box .mf-cat-search-clear {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--muted);
    background: var(--secondary);
    flex: none;
  }
  .mf-scope-search-btn {
    height: 46px;
    flex: none;
  }
  .mf-scope-note {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--muted);
  }
  .mf-scope-note a {
    color: var(--primary-deep);
    font-weight: 700;
    text-decoration: underline;
  }
  .mf-scope-chips {
    display: flex;
    gap: 6px;
    margin-top: 10px;
  }
  .mf-scope-chips .mf-chip {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    cursor: pointer;
  }
  .mf-scope-chips .mf-chip.is-on {
    background: var(--primary-deep);
    color: #fff;
    border-color: var(--primary-deep);
  }
  @media (max-width: 767px) {
    .mf-scope-search-btn {
      display: none; /* the keyboard's «بحث» key submits */
    }
    .mf-scope-search-box {
      height: 44px;
    }
  }
}

/* ===================================================================================================
   v0.10.37 «لمس حيّ» — touch answers on phones & tablets (the laptop answers the pointer; here the finger):
   a ripple from the touch point, cards tilt toward the finger while pressed, tab icons bump. Unlayered so the
   pressed tilt beats the platform's :active rule. Transforms/opacity only. */
@media (max-width: 1023px) {
  .mf-rip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 6; }
  .mf-rip > b { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.18; transform: scale(0); animation: mf-rip 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  @keyframes mf-rip { to { transform: scale(1); opacity: 0; } }
  .mf-card, .mf-cat, .mf-basket-card, .mf-bento-item { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; }
  .mf-card.is-pressed, .mf-cat.is-pressed, .mf-basket-card.is-pressed { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(0.975) !important; transition-duration: 0.12s; }
  .mf-bento-item.is-pressed { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(0.985) !important; transition-duration: 0.12s; }
  .mf-tab.is-bump svg { animation: mf-tab-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes mf-tab-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3) translateY(-2px); } 100% { transform: scale(1); } }
  /* buttons & chips press (the laptop has hover lifts; the finger gets a press) */
  .mf-btn:active, .mf-pill:active, .mf-chip:active, .mf-story-bubble:active, .mf-canopy-tile:active, .mf-scope-chips .mf-chip:active { transform: scale(0.96); transition: transform 0.1s ease-out; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .mf-rip, .mf-tab.is-bump svg { animation: none; display: none; }
  .mf-card.is-pressed, .mf-cat.is-pressed, .mf-basket-card.is-pressed, .mf-bento-item.is-pressed { transform: none !important; }
}

/* v0.10.37 inside the app's WebView (html.mf-in-app — see layout.jinja): the app has its own bottom bar */
html.mf-in-app body { --tabbar-space: 0px; }
html.mf-in-app .mf-tabbar, html.mf-in-app .smartbanner, html.mf-in-app .mf-pwa-banner, html.mf-in-app .mf-a11y-tip { display: none !important; }
html.mf-in-app body { padding-bottom: 0 !important; }
/* v0.10.47 (Akram, from the Play internal test): inside the app every page already sits under the app's own top bar,
   bottom tabs and cart — so the store's chrome and the third-party floating widgets step aside on every in-app page:
   Zid's loyalty button, the Karamai chat bubble, the WhatsApp widget, the mini cart bar, the smart banner. */
html.mf-in-app #loyalty-floating-btn, html.mf-in-app karam-chat-widget, html.mf-in-app #whatsapp_widget,
html.mf-in-app .mf-minibar, html.mf-in-app .mf-topline, html.mf-in-app .js_smartbanner { display: none !important; }
html.mf-in-app body { --minibar-space: 0px; }
/* …and a static page (privacy, account deletion, terms) is read as a plain document: no header, breadcrumb or footer */
html.mf-in-app body[data-template="pages"] .mf-header, html.mf-in-app body[data-template="page_details"] .mf-header,
html.mf-in-app body[data-template="pages"] .mf-footer, html.mf-in-app body[data-template="page_details"] .mf-footer,
html.mf-in-app body[data-template="pages"] .mf-crumb, html.mf-in-app body[data-template="page_details"] .mf-crumb,
html.mf-in-app body[data-template="pages"] [data-intro], html.mf-in-app body[data-template="pages"] [data-mf-drawer] { display: none !important; }
html.mf-in-app body[data-template="pages"] #main > section:first-child, html.mf-in-app body[data-template="page_details"] #main > section:first-child { padding-top: 0 !important; padding-bottom: 0 !important; }
html.mf-in-app body[data-template="pages"] #main > section:nth-child(2), html.mf-in-app body[data-template="page_details"] #main > section:nth-child(2) { padding-top: 14px !important; padding-bottom: 28px !important; }
/* v0.10.48 (Akram: «الشاشة غريبة… الخط كبير… غير احترافية»): the in-app document reads like an app screen — a left-aligned title
   with the brand's underline, a highlighted lead line, 15px body with a calm rhythm, compact lists, no 65ch cap */
html.mf-in-app body[data-template="pages"] #main h1, html.mf-in-app body[data-template="page_details"] #main h1 {
  display: block !important; text-align: start !important; font-family: var(--font-display, inherit); font-size: 22px !important; line-height: 1.3; font-weight: 800;
  color: var(--primary-deep); margin: 2px 0 16px !important; padding-bottom: 12px; position: relative;
}
html.mf-in-app body[data-template="pages"] #main h1::after, html.mf-in-app body[data-template="page_details"] #main h1::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 54px; height: 4px; border-radius: 4px; background: var(--accent);
}
html.mf-in-app body[data-template="pages"] .prose, html.mf-in-app body[data-template="page_details"] .prose { font-size: 15px !important; line-height: 1.85 !important; max-width: none !important; color: var(--foreground); }
html.mf-in-app body[data-template="pages"] .prose > p:first-child, html.mf-in-app body[data-template="page_details"] .prose > p:first-child {
  background: var(--tint); color: var(--primary-deep); font-weight: 700; padding: 12px 14px; border-radius: 14px; margin: 0 0 16px !important;
}
html.mf-in-app body[data-template="pages"] .prose p, html.mf-in-app body[data-template="page_details"] .prose p { margin: 0 0 0.85em !important; }
html.mf-in-app body[data-template="pages"] .prose p:has(+ ol), html.mf-in-app body[data-template="pages"] .prose p:has(+ ul),
html.mf-in-app body[data-template="page_details"] .prose p:has(+ ol), html.mf-in-app body[data-template="page_details"] .prose p:has(+ ul) { font-weight: 800; color: var(--primary-deep); margin-top: 1.1em !important; }
html.mf-in-app body[data-template="pages"] .prose ol, html.mf-in-app body[data-template="pages"] .prose ul,
html.mf-in-app body[data-template="page_details"] .prose ol, html.mf-in-app body[data-template="page_details"] .prose ul { margin: 0.2em 0 1em !important; padding-inline-start: 1.35em !important; }
html.mf-in-app body[data-template="pages"] .prose li, html.mf-in-app body[data-template="page_details"] .prose li { margin: 0.3em 0 !important; padding-inline-start: 0.15em; }
html.mf-in-app body[data-template="pages"] .prose li::marker, html.mf-in-app body[data-template="page_details"] .prose li::marker { color: var(--primary); font-weight: 800; }
html.mf-in-app body[data-template="pages"] .prose a, html.mf-in-app body[data-template="page_details"] .prose a { color: var(--primary-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
html.mf-in-app body[data-template="pages"] .prose strong, html.mf-in-app body[data-template="page_details"] .prose strong { color: var(--primary-deep); }
/* Zid's own «إلى أين نشحن طلبك؟» dialog never inside the app — the app owns the city (the WebView now receives it through /locales anyway) */
html.mf-in-app .zid-kit-region-settings-dialog { display: none !important; }

/* ===================================================================================================
   v0.10.38 — product rows: one sliding row ends in a «المزيد» card (Akram): same footprint as a product card,
   a big arrow that slides on hover/press, the section's own «more» page behind it. */
.products-embla__slide--more { display: flex; }
.mf-more-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 100%; padding: 18px 12px; text-align: center; text-decoration: none; color: var(--primary-deep, #0A5C2E);
  border-radius: var(--mf-radius, 18px); border: 1.5px dashed color-mix(in srgb, var(--primary, #0F7B3F) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #E3F1E6) 80%, #fff) 0%, #fff 70%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.mf-more-card b { font-size: 1.05rem; font-weight: 800; }
.mf-more-card small { font-size: 0.78rem; color: var(--muted, #6D7268); }
.mf-more-card-ico {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary, #0F7B3F); color: #fff; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary, #0F7B3F) 60%, transparent);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mf-more-card-ico svg { transition: transform 0.3s ease; }
@media (hover: hover) {
  .mf-more-card:hover { transform: translateY(-3px); border-color: var(--primary, #0F7B3F); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.25); }
  .mf-more-card:hover .mf-more-card-ico svg { transform: translateX(3px); }
  [dir="rtl"] .mf-more-card:hover .mf-more-card-ico svg { transform: translateX(-3px) rotate(180deg); }
}
.mf-more-card:active { transform: scale(0.97); }
.mf-more-card .mf-more-card-ico { animation: mf-more-nudge 2.8s ease-in-out infinite; }
@keyframes mf-more-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .mf-more-card .mf-more-card-ico { animation: none; } }

/* ===================================================================================================
   v0.10.38 — the magazine as ONE banner (Akram): cover (a small stack of pages) + title/validity + «استعراض» and
   «تحميل». The book stage is hidden; the viewer opens from the cover or the button. Works on every screen: the cover
   sits at the start, the text flows beside it, the buttons wrap under the text. */
.mf-mag--banner {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px 18px !important;
  padding: 16px 16px 14px !important;
}
.mf-mag--banner .mf-mag-head { gap: 5px; }
.mf-mag--banner .mf-mag-title { font-size: 1.3rem; }
.mf-mag--banner .mf-mag-text { font-size: 0.9rem; max-width: 52ch; }
.mf-mag--banner .mf-mag-actions { margin-top: 8px; gap: 8px; }
.mf-mag--banner .mf-mag-actions .mf-btn { min-height: 38px; padding-inline: 14px; }
.mf-mag--banner .mf-mag-stage[hidden] { display: none !important; }
.mf-mag--banner .mf-mag-editor-note { grid-column: 1 / -1; }
.mf-mag-cover {
  position: relative; display: block; width: 104px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 10px; transform: rotate(-3deg); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.mf-mag-cover > img {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  box-shadow: 0 14px 26px -12px rgba(59, 42, 15, 0.55), 0 2px 4px rgba(59, 42, 15, 0.12);
  background: #fff;
}
.mf-mag-cover-stack { position: absolute; inset: 0; z-index: 1; }
.mf-mag-cover-stack i { position: absolute; inset: 0; border-radius: 10px; background: #fff; border: 1px solid #7850141f; }
.mf-mag-cover-stack i:first-child { transform: rotate(5deg) translate(4px, 3px); }
.mf-mag-cover-stack i:last-child { transform: rotate(10deg) translate(9px, 6px); opacity: 0.8; }
.mf-mag-cover-n {
  position: absolute; z-index: 3; bottom: -8px; inset-inline-start: -8px; padding: 3px 8px; border-radius: 999px;
  background: var(--primary-deep, #0A5C2E); color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.4);
}
.mf-mag-cover-sheen {
  position: absolute; inset: 0; z-index: 3; border-radius: 10px; overflow: hidden; pointer-events: none;
}
.mf-mag-cover-sheen::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 45%; inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-18deg); animation: mf-mag-sheen 5.5s ease-in-out infinite;
}
@keyframes mf-mag-sheen { 0%, 60% { inset-inline-start: -60%; } 100% { inset-inline-start: 130%; } }
@media (hover: hover) { .mf-mag-cover:hover { transform: rotate(-1deg) scale(1.04); } }
.mf-mag-cover:active { transform: rotate(-2deg) scale(0.97); }
@media (max-width: 767px) {
  /* phones: the banner keeps the title, the validity and the two buttons — the paragraph waits inside the viewer */
  .mf-mag--banner .mf-mag-text { display: none; }
  .mf-mag--banner .mf-mag-title { font-size: 1.12rem; }
  .mf-mag--banner .mf-mag-kicker { font-size: 11px; }
  .mf-mag--banner .mf-mag-actions .mf-btn { min-height: 36px; padding-inline: 11px; font-size: 12.5px; }
  .mf-mag--banner .mf-mag-valid { font-size: 11.5px; }
}
@media (min-width: 768px) {
  .mf-mag-cover { width: 136px; }
  .mf-mag--banner { padding: 20px 22px 18px !important; }
  .mf-mag--banner .mf-mag-title { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .mf-mag-cover { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .mf-mag-cover-sheen::after { animation: none; } }

/* ===================================================================================================
   v0.10.38 — «دليل حقيقي» on the product card: one small line under the name, from the platform's numbers only
   (sold count, remaining stock, the sale's end, the listing date). Keeps a fixed height so cards align. */
.mf-card-proof { min-height: 18px; display: flex; align-items: center; margin-top: 2px; }
.mf-proof {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--tint, #E3F1E6); color: var(--primary-deep, #0A5C2E);
  animation: mf-proof-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mf-proof svg { flex: none; width: 11px; height: 11px; }
/* v0.10.41: the text sits in its own span so a too-long line ends in «…» instead of a cut letter (text-overflow needs a
   block child inside the inline-flex pill); ui-polish.js fitProofs() first tries the shorter wording per card width. */
.mf-proof-txt { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-proof--low { background: color-mix(in srgb, var(--deal, #DF382D) 12%, #fff); color: var(--deal, #DF382D); }
.mf-proof--low svg { animation: mf-proof-flame 1.1s ease-in-out infinite alternate; }
.mf-proof--ends { background: color-mix(in srgb, var(--accent, #F5B622) 22%, #fff); color: #7a4a00; }
.mf-proof--ends svg { animation: mf-proof-tick 2s steps(8) infinite; }
.mf-proof--new { background: var(--accent, #F5B622); color: #2a2306; }
.mf-proof--new svg { animation: mf-proof-twinkle 1.6s ease-in-out infinite; }
@keyframes mf-proof-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mf-proof-flame { from { transform: scale(0.9) rotate(-4deg); } to { transform: scale(1.12) rotate(4deg); } }
@keyframes mf-proof-tick { to { transform: rotate(360deg); } }
@keyframes mf-proof-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } }
@media (min-width: 1024px) { .mf-proof { font-size: 11.5px; } .mf-card-proof { min-height: 20px; } }
@media (prefers-reduced-motion: reduce) { .mf-proof, .mf-proof svg { animation: none; } }

/* ===================================================================================================
   v0.10.38 — the campaign popup (cashback / contest / surprise code / announcement): a dialog that drops in with a
   bounce, animated art per type, a scratch foil over the code, confetti on reveal. */
.mf-camp-section { padding: 0 !important; }
.mf-camp-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; }
.mf-camp-preview small { color: var(--muted, #6D7268); font-size: 12px; }
.mf-camp {
  width: min(440px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 26px; overflow: hidden;
  background: #fff; color: var(--foreground, #1F231F); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
  animation: mf-camp-in 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.mf-camp::backdrop { background: rgba(6, 55, 29, 0.55); backdrop-filter: blur(6px); animation: mf-camp-bd 0.4s ease both; }
@keyframes mf-camp-in { from { opacity: 0; transform: translateY(40px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes mf-camp-bd { from { opacity: 0; } to { opacity: 1; } }
.mf-camp-close {
  position: absolute; z-index: 5; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #333; font-size: 16px; font-weight: 800; cursor: pointer; backdrop-filter: blur(4px);
}
.mf-camp-art {
  position: relative; height: 170px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(70% 90% at 50% 100%, rgba(255, 255, 255, 0.25), transparent 60%), linear-gradient(160deg, var(--primary, #0F7B3F) 0%, var(--primary-deep, #0A5C2E) 100%);
  color: #fff;
}
.mf-camp--contest .mf-camp-art { background: radial-gradient(70% 90% at 50% 100%, rgba(255, 255, 255, 0.25), transparent 60%), linear-gradient(160deg, #6b2fb3 0%, #3b1a6e 100%); }
.mf-camp--code .mf-camp-art { background: radial-gradient(70% 90% at 50% 100%, rgba(255, 255, 255, 0.25), transparent 60%), linear-gradient(160deg, var(--deal, #DF382D) 0%, #a31f16 100%); }
.mf-camp--announce .mf-camp-art { background: linear-gradient(160deg, #1d3557 0%, #0d1b2a 100%); }
.mf-camp-art img { width: 100%; height: 100%; object-fit: cover; }
.mf-camp-glyph { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.08); animation: mf-camp-breathe 2.6s ease-in-out infinite; }
.mf-camp-glyph svg { width: 60px; height: 60px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)); }
.mf-camp-glyph--trophy svg { color: #ffd766; }
.mf-camp-glyph--gift svg { color: #ffe9a8; animation: mf-camp-wobble 2.4s ease-in-out infinite; }
@keyframes mf-camp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mf-camp-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.mf-camp-coin { position: absolute; color: #ffd766; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); animation: mf-camp-float 3.2s ease-in-out infinite; }
.mf-camp-coin--1 { left: 18%; top: 22%; }
.mf-camp-coin--2 { right: 16%; top: 28%; animation-delay: -1.1s; }
.mf-camp-coin--3 { left: 30%; bottom: 14%; animation-delay: -2s; }
@keyframes mf-camp-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
.mf-camp-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.12) 0deg 12deg, transparent 12deg 24deg); animation: mf-camp-spin 18s linear infinite; }
@keyframes mf-camp-spin { to { transform: rotate(360deg); } }
.mf-camp-spark { position: absolute; color: #fff; animation: mf-camp-twinkle 1.8s ease-in-out infinite; }
.mf-camp-spark--1 { left: 22%; top: 24%; }
.mf-camp-spark--2 { right: 20%; top: 30%; animation-delay: -0.6s; }
.mf-camp-spark--3 { right: 30%; bottom: 20%; animation-delay: -1.2s; }
@keyframes mf-camp-twinkle { 0%, 100% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1.2); opacity: 1; } }
.mf-camp-body { padding: 18px 20px 18px; display: grid; gap: 8px; }
.mf-camp-kicker { color: var(--primary-deep, #0A5C2E); font-size: 12px; font-weight: 800; }
.mf-camp-title { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.25; font-weight: 800; color: var(--ink, #06371D); }
.mf-camp-text { font-size: 0.92rem; line-height: 1.6; color: var(--foreground, #1F231F); }
.mf-camp-ends { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--deal, #DF382D) 12%, #fff); color: var(--deal, #DF382D); font-size: 12.5px; font-weight: 800; }
.mf-camp-scratch { position: relative; height: 118px; border-radius: 16px; overflow: hidden; border: 1.5px dashed color-mix(in srgb, var(--primary, #0F7B3F) 40%, transparent); background: var(--tint, #E3F1E6); }
.mf-camp-prize { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.mf-camp-prize small { color: var(--muted, #6D7268); font-weight: 700; font-size: 12px; }
.mf-camp-prize b { font-size: 1.6rem; letter-spacing: 0.12em; color: var(--primary-deep, #0A5C2E); font-weight: 900; }
.mf-camp-prize .mf-btn { min-height: 32px; padding-inline: 12px; font-size: 12.5px; }
.mf-camp-foil { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity 0.5s ease; }
.mf-camp-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; color: #444; font-weight: 800; font-size: 14px; text-shadow: 0 1px 0 #fff; transition: opacity 0.3s; }
.mf-camp-hint svg { animation: mf-camp-twinkle 1.6s ease-in-out infinite; }
.mf-camp-hint.is-off { opacity: 0; }
.mf-camp-scratch.is-revealed .mf-camp-foil { opacity: 0; pointer-events: none; }
.mf-camp-scratch.is-revealed .mf-camp-prize b { animation: mf-camp-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mf-camp-pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
.mf-camp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mf-camp-actions .mf-btn { flex: 1; min-height: 44px; }
.mf-camp-actions .mf-btn--ghost { flex: 0 0 auto; }
.mf-btn.is-done { background: var(--primary-deep, #0A5C2E) !important; color: #fff !important; }
@media (min-width: 768px) { .mf-camp { width: min(480px, calc(100vw - 32px)); } .mf-camp-art { height: 190px; } }
@media (prefers-reduced-motion: reduce) { .mf-camp, .mf-camp::backdrop, .mf-camp-glyph, .mf-camp-glyph--gift svg, .mf-camp-coin, .mf-camp-rays, .mf-camp-spark, .mf-camp-hint svg { animation: none; } }

/* ===================================================================================================
   v0.10.38 — the offers are alive: a pulsing pill next to the deals title while an offer runs, and (phones) a floating
   flame chip above the tab bar that opens the offers category. */
.mf-live-pill { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; vertical-align: middle; white-space: nowrap; }
.mf-live-pill.is-live { background: color-mix(in srgb, var(--deal, #DF382D) 12%, #fff); color: var(--deal, #DF382D); }
.mf-live-pill.is-soon { background: var(--tint, #E3F1E6); color: var(--primary-deep, #0A5C2E); }
.mf-live-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); animation: mf-live-dot 1.6s ease-out infinite; }
@keyframes mf-live-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.mf-live-chip {
  /* v0.10.41: --tabbar-space already includes the safe area on phones (no double inset); the chip slides up whenever the
     cart bar is on screen so it never covers the items count / total (store owner's note). */
  position: fixed; z-index: 58; inset-inline-start: 12px; bottom: calc(var(--tabbar-space, 66px) + 12px);
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px 8px 12px; border-radius: 999px; text-decoration: none;
  background: var(--deal, #DF382D); color: #fff; font-size: 12.5px; font-weight: 800; box-shadow: 0 12px 28px -10px rgba(223, 56, 45, 0.7);
  animation: mf-live-chip-in 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  transition: bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.mf-minibar-on .mf-live-chip { bottom: calc(var(--tabbar-space, 66px) + 56px); }
/* v0.10.41 folded state: a 44px flame at the edge; the label and the ✕ slide shut (max-width/opacity), nothing jumps */
.mf-live-chip b, .mf-live-chip button { transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease, padding 0.35s ease; max-width: 240px; overflow: hidden; white-space: nowrap; }
.mf-live-chip.is-mini { gap: 0; padding: 13px; }
.mf-live-chip.is-mini b, .mf-live-chip.is-mini button { max-width: 0; opacity: 0; margin: 0; padding: 0; pointer-events: none; }
.mf-live-chip svg { animation: mf-proof-flame 1.1s ease-in-out infinite alternate; }
.mf-live-chip b { font-weight: 800; }
.mf-live-chip button { border: 0; background: rgba(255, 255, 255, 0.2); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; cursor: pointer; margin-inline-start: 2px; }
.mf-live-chip-ring { position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--deal, #DF382D); opacity: 0; animation: mf-live-ring 2.2s ease-out infinite; }
@keyframes mf-live-ring { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes mf-live-chip-in { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) { .mf-live-chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .mf-live-pill i, .mf-live-chip svg, .mf-live-chip-ring { animation: none; } }

/* ===================================================================================================
   v0.10.38 — voice: «ابحث في المتجر عن …» and «افتح قسم …» rows on top of the matches (search anything by voice). */
.mf-voice-row--go { cursor: pointer; background: var(--tint, #E3F1E6); border-color: color-mix(in srgb, var(--primary, #0F7B3F) 30%, transparent); }
.mf-voice-row--go .mf-voice-name b { color: var(--primary-deep, #0A5C2E); }
.mf-voice-thumb--go { display: grid; place-items: center; background: var(--primary, #0F7B3F); color: #fff; }
.mf-voice-go-arrow { flex: none; color: var(--primary-deep, #0A5C2E); margin-inline-start: auto; animation: mf-more-nudge 2.4s ease-in-out infinite; }
@media (hover: hover) { .mf-voice-row--go:hover { background: color-mix(in srgb, var(--tint, #E3F1E6) 70%, #fff); } }
.mf-voice-row--go:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) { .mf-voice-go-arrow { animation: none; } }

/* v0.10.38 — sign-language entry in the phone menu */
.mf-drawer-sign { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.mf-sign-glyph { font-size: 18px; line-height: 1; animation: mf-sign-wave 2.6s ease-in-out infinite; transform-origin: 70% 90%; }
@keyframes mf-sign-wave { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .mf-sign-glyph { animation: none; } }

/* ========================================================
   v0.10.39 — substitutes per cart line + the order note (Akram: «المشابه يفترض يقترح أصنافًا» / «أين تظهر لنا كأدمن؟»)
   The chip sits under the item name; the picker is a bottom sheet of the same aisle; the note product renders as
   a quiet line (no counter, no heart). */
.mf-subpref-text { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--foreground, #1F231F); cursor: pointer; padding-top: 2px; }
.mf-subpref-text input { width: 17px; height: 17px; accent-color: var(--primary, #0F7B3F); margin: 0; }
.mf-subline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12px; }
.mf-subline-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed color-mix(in srgb, var(--primary, #0F7B3F) 55%, transparent); color: var(--primary-deep, #0A5C2E); background: color-mix(in srgb, var(--tint, #E3F1E6) 55%, #fff); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 30px; }
.mf-subline-btn:active { transform: scale(0.97); }
.mf-subline-has { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-deep, #0A5C2E); font-weight: 600; }
.mf-subline-has b { font-weight: 800; }
.mf-subline .mf-linkbtn { font-size: 12px; }
.mf-note-row .qty-input, .mf-note-row [data-wishlist-btn], .mf-note-row [data-action="product-remove"], .mf-note-row .text-muted { display: none !important; }
.mf-note-row { opacity: 0.92; }
.mf-note-row-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--primary-deep, #0A5C2E); }
/* the picker */
.mf-subs { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; margin: 0; inset: 0; }
.mf-subs::backdrop { background: rgba(6, 40, 20, 0.45); backdrop-filter: blur(2px); }
.mf-subs-panel { position: fixed; inset-inline: 0; bottom: 0; background: var(--surface, #fff); border-radius: 22px 22px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); max-height: 82dvh; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.25); animation: mf-subs-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes mf-subs-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.mf-subs-panel .mf-scan-head b { font-size: 1rem; line-height: 1.3; }
.mf-subs-sub { margin: 0; color: var(--muted, #6D7268); font-size: 12.5px; }
.mf-subs-list { overflow: auto; display: grid; gap: 6px; padding-top: 6px; -webkit-overflow-scrolling: touch; }
.mf-subs-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 1px solid var(--border, #E6DECC); background: var(--background, #FBF8F1); border-radius: 14px; padding: 8px 10px; cursor: pointer; min-height: 56px; }
.mf-subs-item:active { transform: scale(0.985); }
.mf-subs-item img, .mf-subs-item > i { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; flex: none; }
.mf-subs-item span { display: grid; gap: 1px; min-width: 0; }
.mf-subs-item b { font-size: 13px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mf-subs-item small { color: var(--primary-deep, #0A5C2E); font-weight: 800; font-size: 12.5px; }
.mf-subs-empty { margin: 10px 0; color: var(--muted, #6D7268); text-align: center; font-size: 13px; }
@media (min-width: 768px) { .mf-subs-panel { inset-inline: auto; left: 50%; transform: translateX(-50%); width: 480px; border-radius: 22px; bottom: 6vh; } @keyframes mf-subs-up { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } } .mf-subs-list { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .mf-subs-panel { animation: none; } }
.mf-note-glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 26px; }

/* ===================================================================================================
   v0.10.42 — the header cart: the items count sits ABOVE the free-delivery ring. The ring (an SVG drawn after the
   badge, on the button's edge) turns green once the threshold is reached and was painted over the red count, so
   the number looked cut by the button (store owner's screenshot). The badge also moves a touch outward so the
   ring passes under its border, not through the digit. */
.mf-icon-btn .mf-ring { z-index: 1; }
.mf-icon-btn .mf-badge-count { z-index: 2; top: -7px; inset-inline-start: -7px; }
.mf-tab--cart .mf-tab-badge { z-index: 2; }

/* v0.10.42 — «نبهني» / «اختر الخيارات» on laptops: the 36px laptop size above (v0.10.2x) also squeezed the WIDE
   buttons into a circle, so their label hung outside the button and was cut by the card edge (store owner's
   screenshot). The wide variant keeps its label, inside the card, with an ellipsis when a card is really narrow. */
@media (min-width: 1024px) {
  /* a wide button («نبّهني عند التوفر», «اختر الخيارات») takes its own full row under the price — like the quantity
     stepper does — instead of squeezing the price beside it */
  .mf-card .mf-card-actions:has(> .mf-add--wide) { grid-column: 1 / -1; min-width: 0; }
  .mf-card .mf-add.mf-add--wide { width: 100%; height: 36px; padding: 0 12px; font-size: 13px; justify-content: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mf-card .mf-add.mf-add--wide span { overflow: hidden; text-overflow: ellipsis; min-width: 0; white-space: nowrap; }
}

/* ===================================================================================================
   v0.10.42 — «أقرب فرع»: the on-brand location sheet (assets/js/mf-branch.js). While it is up on a first visit,
   Zid's own «إلى أين نشحن طلبك؟» dialog stays out of sight; ✕ brings it back. Same bottom-sheet language as the
   substitutes picker (.mf-subs); a centred card from 768px. */
html.mf-geo-live .MuiDialog-root.zid-kit-region-settings-dialog { display: none !important; }
/* v0.10.42 — Zid's «get the app» smart banner and the PWA install banner are off unless the merchant turns them on */
html[data-appbanner="off"] .smartbanner, html[data-appbanner="off"] .js_smartbanner { display: none !important; }
html[data-appbanner="off"] { margin-top: 0 !important; }
/* the dialog is the whole viewport and never scrolls (a modal <dialog> is overflow:auto by default, and a scroll of it
   dragged the sheet off-screen); the panel is absolute inside it and scrolls its own content when a list is long */
.mf-geo { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.mf-geo::backdrop { background: rgba(6, 40, 20, 0.5); backdrop-filter: blur(2px); }
.mf-geo-panel { position: absolute; inset-inline: 0; bottom: 0; background: var(--surface, #fff); border-radius: 22px 22px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 86dvh; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.25); animation: mf-subs-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); overflow: auto; }
.mf-geo-head { display: flex; align-items: flex-start; gap: 12px; }
.mf-geo-pin { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--tint, #E3F1E6); color: var(--primary-deep, #0A5C2E); }
.mf-geo-pin svg { animation: mf-geo-pin 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes mf-geo-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.mf-geo-titles { min-width: 0; flex: 1; }
.mf-geo-titles b { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; color: var(--foreground, #1F231F); }
.mf-geo-titles p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted, #6D7268); }
.mf-geo-close { width: 36px; height: 36px; flex: none; }
.mf-geo-body { display: grid; gap: 8px; }
.mf-geo-current { margin: 0 0 2px; font-size: 13px; color: var(--primary-deep, #0A5C2E); font-weight: 700; }
.mf-geo-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border, #E6DECC); background: var(--background, #FBF8F1); color: var(--foreground, #1F231F); font-weight: 700; font-size: 15px; cursor: pointer; }
.mf-geo-btn.is-primary { background: var(--primary, #0F7B3F); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -12px rgba(15, 123, 63, 0.9); }
.mf-geo-btn.is-primary svg { width: 20px; height: 20px; }
.mf-geo-btn > span, .mf-geo-btn.is-primary > span { color: inherit; font: inherit; } /* a theme rule paints spans inside buttons muted */
.mf-geo-btn:active { transform: scale(0.98); }
.mf-geo-note { margin: 2px 0 0; font-size: 11.5px; color: var(--muted, #6D7268); text-align: center; }
.mf-geo-wait { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; color: var(--muted, #6D7268); font-weight: 600; }
.mf-geo-found { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--tint, #E3F1E6); animation: mf-geo-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes mf-geo-in { from { transform: scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.mf-geo-ok { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary, #0F7B3F); color: #fff; }
.mf-geo-found small { display: block; font-size: 12px; color: var(--primary-deep, #0A5C2E); }
.mf-geo-found b { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--primary-deep, #0A5C2E); }
/* the «continue» button fills from the start edge while the auto-continue runs (2.8s in the script) */
.mf-geo-progress { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, 0.55); transform-origin: 0 50%; animation: mf-geo-fill 2.8s linear forwards; }
[dir="rtl"] .mf-geo-progress { transform-origin: 100% 50%; }
@keyframes mf-geo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mf-geo-cities { display: grid; gap: 6px; max-height: 46dvh; overflow: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.mf-geo-city { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--border, #E6DECC); background: var(--background, #FBF8F1); color: var(--foreground, #1F231F); font-size: 15px; font-weight: 700; text-align: start; cursor: pointer; }
.mf-geo-city svg { width: 18px; height: 18px; color: var(--primary, #0F7B3F); flex: none; }
.mf-geo-city span { flex: 1; min-width: 0; }
.mf-geo-city em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--primary-deep, #0A5C2E); background: var(--tint, #E3F1E6); border-radius: 999px; padding: 3px 8px; }
.mf-geo-city.is-current { border-color: var(--primary, #0F7B3F); background: color-mix(in srgb, var(--tint, #E3F1E6) 60%, #fff); }
.mf-geo-city:active { transform: scale(0.985); }
.mf-geo-far { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent, #F5B622) 18%, #fff); color: var(--foreground, #1F231F); font-size: 13px; line-height: 1.5; }
.mf-geo-link { border: 0; background: none; color: var(--primary-deep, #0A5C2E); font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; justify-self: center; }
@media (min-width: 768px) { .mf-geo-panel { inset-inline: auto; left: 50%; transform: translateX(-50%); width: 440px; border-radius: 22px; bottom: 8vh; animation: none; } }
@media (prefers-reduced-motion: reduce) { .mf-geo-panel, .mf-geo-pin svg, .mf-geo-found { animation: none; } .mf-geo-progress { animation-duration: 0.01s; } }

/* ===================================================================================================
   v0.10.43 — ONE quantity stepper (Akram, laptop screenshot: «التناسق صفر … مجرد رقم لا يحتاج كل ذلك»). The cart rows come
   from Zid's partial (vitrin:v2/cart/products_list.jinja) with the platform's .qty-input box: 48px tall, as wide as its
   column, and its <input type=number> sized by Chrome from the DIGITS of the product's max stock (max="40" → 48px,
   max="10576" → 50px, max="999999" → 58px), so every row had its own width. The partial's laptop classes (lg:w-48,
   lg:flex-col, gap-2.5 …) are not in the theme's Tailwind build either, so the «الكمية» header never lined up.
   Now: the same green pill as the cards (.mf-qty), fixed 120×36 — 36px buttons and a 48px number cell that shows
   «1000» (it grows for longer numbers where the browser supports field-sizing) — identical in every row, on the
   laptop and the phone; the app's cart (1.1.9) draws the same pill. */
.cart-product-item .qty-input {
  display: inline-grid; grid-template-columns: 36px 48px 36px; align-items: center; justify-items: stretch;
  width: 120px; min-width: 120px; max-width: none; height: 36px; padding: 0; gap: 0; flex: none;
  border: 0; border-radius: 999px; background: var(--primary, #0F7B3F); color: #fff; overflow: hidden;
  box-shadow: 0 8px 16px -8px rgba(15, 123, 63, 0.7); transition: box-shadow 0.15s ease;
}
.cart-product-item .qty-input:hover, .cart-product-item .qty-input:focus-within { box-shadow: 0 8px 16px -8px rgba(15, 123, 63, 0.7), 0 0 0 3px var(--tint, #E3F1E6); }
.cart-product-item .qty-input-btn { width: 36px; height: 36px; border-radius: 0; background: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cart-product-item .qty-input-btn:hover { background: rgba(255, 255, 255, 0.14); }
.cart-product-item .qty-input-btn:disabled { color: rgba(255, 255, 255, 0.45); cursor: not-allowed; }
.cart-product-item .qty-input-btn svg { width: 14px; height: 14px; }
.cart-product-item .qty-input-field {
  width: 48px; min-width: 0; max-width: 100%; height: 100%; padding: 0 2px; margin: 0; flex: none; justify-self: center;
  border: 0; background: transparent; color: #fff; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 36px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.cart-product-item .qty-input-field:focus { outline: none; }
/* a 5- or 6-digit quantity still shows whole: the number cell grows with its content (Chrome 123+, Safari 18+) */
@supports (field-sizing: content) {
  .cart-product-item .qty-input { grid-template-columns: 36px minmax(48px, max-content) 36px; width: auto; }
  .cart-product-item .qty-input-field { field-sizing: content; width: auto; min-width: 48px; max-width: 96px; }
}
/* the laptop columns the partial asks for (lg:w-48 lg:flex-col lg:items-start lg:gap-2, gap-2.5) but the theme's
   Tailwind build never emitted — a fixed 8rem quantity column, and the header row (templates/cart.jinja, same gap)
   sits exactly over it */
@media (min-width: 1024px) {
  .cart-product-item .lg\:w-48 { width: 8rem; flex: 0 0 8rem; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.5rem; }
  .cart-product-item .lg\:w-full { width: 100%; }
  .cart-product-item .gap-2\.5 { gap: 0.625rem; }
  .mf-cart-th-qty { width: 8rem; flex: 0 0 8rem; }
}

/* v0.10.43 — «خارج نطاق توصيلنا حاليًا» inside the branch sheet (mf-branch.js stepFar): the animated zone scene, the cities
   we deliver to as tappable chips, «locate me again» / WhatsApp, and the «change it any time» note */
.mf-geo-art { border-radius: 20px; overflow: hidden; background: var(--tint, #E3F1E6); animation: mf-geo-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.mf-geo-scene { display: block; width: 100%; height: auto; font-family: var(--font-display); }
.mf-geo-serve { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--foreground, #1F231F); }
.mf-geo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-geo-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1.5px solid var(--primary, #0F7B3F); background: var(--surface, #fff); color: var(--primary-deep, #0A5C2E); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; animation: mf-geo-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.mf-geo-chip svg { width: 16px; height: 16px; color: var(--primary, #0F7B3F); flex: none; }
.mf-geo-chip:nth-child(2) { animation-delay: 0.05s; } .mf-geo-chip:nth-child(3) { animation-delay: 0.1s; } .mf-geo-chip:nth-child(4) { animation-delay: 0.15s; } .mf-geo-chip:nth-child(5) { animation-delay: 0.2s; } .mf-geo-chip:nth-child(n+6) { animation-delay: 0.25s; }
.mf-geo-chip:hover { background: var(--tint, #E3F1E6); box-shadow: 0 8px 18px -10px rgba(15, 123, 63, 0.7); }
.mf-geo-chip:active { transform: scale(0.96); }
.mf-geo-chip:focus-visible { outline: 3px solid var(--tint, #E3F1E6); outline-offset: 1px; }
.mf-geo-far-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
.mf-geo-far-actions .mf-geo-link { padding: 6px 4px; }
@media (prefers-reduced-motion: reduce) { .mf-geo-art, .mf-geo-chip { animation: none; } }

/* v0.10.44 — «يبدو أنك الآن في أبها — ننقلك إلى فرعها؟»: the switch bar (mf-branch.js recheck → switchBar) rides the toast
   stack, so it already sits above the tab bar and the mini cart bar; a pulsing pin, two pills, no dialog */
.mf-toast--switch { border-radius: 18px; align-items: flex-start; pointer-events: auto; background: var(--primary-deep, #0A5C2E); max-width: min(440px, calc(100vw - 32px)); padding: 12px 14px; gap: 10px; }
.mf-switch-pin { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent, #F5B622); color: #2a2306; display: grid; place-items: center; margin-top: 1px; }
.mf-switch-pin svg { width: 16px; height: 16px; }
.mf-switch-pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent, #F5B622); animation: mf-switch-pulse 1.6s ease-out infinite; }
@keyframes mf-switch-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }
.mf-toast--switch .mf-toast-body b { font-size: 13.5px; }
.mf-toast-act--ghost { background: rgba(255, 255, 255, 0.14); color: #fff; }
.mf-toast-act--ghost:hover { background: rgba(255, 255, 255, 0.24); }
@media (prefers-reduced-motion: reduce) { .mf-switch-pin::after { animation: none; } }

/* v0.10.45 — the cart rows on a TABLET (768–1023px): Zid's partial only switches to its column layout at 1024px, so an
   iPad showed the phone layout stretched over 800px (price alone at the far edge, an empty middle). From 768px the rows
   take the laptop columns — image + name | quantity | total + actions — and the header row shows over them. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .cart-product-item.lg\:gap-6 { gap: 1.5rem; }
  .cart-product-item .lg\:flex-row { flex-direction: row; }
  .cart-product-item .lg\:gap-6 { gap: 1.5rem; }
  .cart-product-item .lg\:block { display: block; }
  .cart-product-item .lg\:hidden { display: none; }
  .cart-product-item .lg\:flex { display: flex; }
  .cart-product-item .lg\:flex-none { flex: none; }
  .cart-product-item .lg\:w-full { width: 100%; }
  .cart-product-item .lg\:w-48 { width: 8rem; flex: 0 0 8rem; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.5rem; }
  .cart-product-item .gap-2\.5 { gap: 0.625rem; }
  .cart-product-item .w-48 { width: 12rem; flex: 0 0 12rem; }
  .mf-cart-head { display: flex; gap: 1.5rem; }
  .mf-cart-th-qty { width: 8rem; flex: 0 0 8rem; }
}