/*
 * customer.css — extracted from customer.html in fm361.
 * Three former inline <style> blocks concatenated.
 * Loaded as a single <link> in customer.html so the HTML can
 * parse + paint in one pass while CSS streams in parallel and
 * gets cached by the CDN/browser independently.
 */

/* ─── Block 1: design system + storefront layout (was lines 12-3857) ─── */
    /* ═════════════════════════════════════════════════════════════════
       MAKKAH MEDICAL · PHARMACY STOREFRONT
       Design system: "Quiet Medical Premium"
       Foundation: white surface · navy chrome · sage accent · spacious
       Inspirations: Capsule · Forward · One Medical · Linear
       ═════════════════════════════════════════════════════════════════ */

    /* ───────── DESIGN TOKENS ───────── */
    :root {
      /* fm55406 Phase 5 — the storefront referenced --text-* / --w-* /
         --lh-* / --font-display tokens but never declared them. The
         browser silently fell back to inherit (usually 16 px + normal
         weight), so every rule that read `font-size: var(--text-sm)`
         did nothing visible. Declared here so the rest of the file
         actually applies. Sizes chosen to match design.css intent. */
      --font-display: 'Tajawal', system-ui, sans-serif;
      --text-xs:   12px;
      --text-sm:   14px;
      --text-base: 15px;
      --text-md:   16px;
      --text-lg:   18px;
      --text-xl:   22px;
      --text-2xl:  28px;
      --w-medium:    500;
      --w-semibold:  600;
      --w-bold:      700;
      --w-extrabold: 800;
      --lh-tight:   1.15;
      --lh-snug:    1.35;
      --lh-normal:  1.55;
      --lh-relaxed: 1.75;

      /* Foreground */
      --fg: #0a0e1a;
      --fg-soft: #2d3548;
      --fg-muted: #5a6273;
      --fg-subtle: #8b91a0;
      --fg-disabled: #b8bcc7;

      /* Surface */
      --bg: #f8f9fb;
      --surface: #ffffff;
      --surface-2: #f3f4f7;
      --surface-3: #e9ebf0;

      /* Border */
      --border: #e5e8ed;
      --border-strong: #d1d6dd;

      /* Brand (deep navy — chrome, headings, primary text) */
      --brand: #0d2647;
      --brand-hover: #143560;
      --brand-soft: #e8edf4;

      /* Accent (sage teal — primary actions, success, trust) */
      --accent: #1e8a76;
      --accent-hover: #176d5d;
      --accent-soft: #e8f4f1;
      --accent-soft-2: #d4ebe5;

      /* Semantic */
      --warn: #b8651b;
      --warn-soft: #fef3e6;
      --danger: #c12a30;
      --danger-soft: #fde8e9;
      --info: #1d4ed8;
      --info-soft: #eef2ff;

      /* VIBRANT PALETTE — soft backgrounds + jewel accents */
      --mint-bg:     #ecfdf5;
      --mint-bg-2:   #d1fae5;
      --mint:        #059669;
      --mint-deep:   #047857;

      --sky-bg:      #eff6ff;
      --sky-bg-2:    #dbeafe;
      --sky:         #2563eb;
      --sky-deep:    #1d4ed8;

      --blush-bg:    #fdf2f8;
      --blush-bg-2:  #fce7f3;
      --blush:       #db2777;
      --blush-deep:  #be185d;

      --peach-bg:    #fff7ed;
      --peach-bg-2:  #ffedd5;
      --peach:       #ea580c;
      --peach-deep:  #c2410c;

      --lavender-bg:   #f5f3ff;
      --lavender-bg-2: #ede9fe;
      --lavender:      #7c3aed;
      --lavender-deep: #6d28d9;

      --sunshine-bg:   #fefce8;
      --sunshine-bg-2: #fef9c3;
      --sunshine:      #ca8a04;
      --sunshine-deep: #a16207;

      /* Hero diagonal — soft, joyful, premium */
      --hero-gradient: linear-gradient(135deg, #fdf2f8 0%, #fff7ed 30%, #ecfdf5 70%, #eff6ff 100%);
      --rx-gradient:   linear-gradient(150deg, #fdf2f8 0%, #fff7ed 100%);
      --pharm-gradient:linear-gradient(135deg, #eff6ff 0%, #ecfdf5 100%);
      --cat-gradient:  linear-gradient(180deg, #f5f3ff 0%, #fdf2f8 100%);

      /* Spacing (4-pt grid) */
      --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
      --s-5: 20px; --s-6: 24px;  --s-7: 28px;  --s-8: 32px;  --s-10: 40px;
      --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

      /* Radius */
      --r-sm: 6px;
      --r-md: 10px;
      --r-lg: 16px;
      --r-xl: 24px;
      --r-full: 9999px;

      /* Elevation (no colored shadows) */
      --shadow-sm: 0 1px 2px rgba(10,14,26,.04), 0 1px 1px rgba(10,14,26,.02);
      --shadow-md: 0 4px 16px rgba(10,14,26,.06), 0 2px 4px rgba(10,14,26,.03);
      --shadow-lg: 0 16px 40px rgba(10,14,26,.10), 0 4px 8px rgba(10,14,26,.04);
      --shadow-focus: 0 0 0 3px rgba(30,138,118,.25);

      /* Motion */
      --ease: cubic-bezier(.32,.72,0,1);
      --quick: 120ms;
      --base: 220ms;
      --slow: 360ms;

      /* Layout */
      --container: 1240px;
      --header-h: 64px;
      --nav-h: 48px;
      /* Pre-module fallback only; ResizeObserver replaces both with measured pixels. */
      --customer-header-height: var(--header-h);
      --customer-nav-height: var(--nav-h);
      --customer-sticky-gap: 12px;
      --customer-sticky-offset: calc(var(--customer-header-height) + var(--customer-nav-height) + var(--customer-sticky-gap));
    }

    /* ───────── RESET / BASE ───────── */
    *,*::before,*::after { box-sizing: border-box; }
    html {
      -webkit-text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
    }
    body {
      margin: 0;
      /* fm55406 Phase 5 — the pre-Phase-5 body{} rule was EMPTY on
         the font line (line 154 was just whitespace), so the
         storefront inherited from the HTML element (which set
         font-family:inherit) and ultimately fell back to the
         browser default. Now Tajawal wins. */
      font-family: var(--font-display, 'Tajawal', system-ui, sans-serif);
      font-feature-settings: "kern", "ss01";
      background: var(--bg);
      color: var(--fg);

       /* Arabic-appropriate */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* Numerals tabular for prices, stats */
    .num, .price, .price-old, .stat-value {
      font-family: var(--font-display);
      font-feature-settings: "tnum", "lnum";
      font-variant-numeric: tabular-nums lining-nums;
    }
    a { color: inherit; text-decoration: none; }
    button {
      font-family: inherit;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      color: inherit;
    }
    img { display: block; max-width: 100%; }
    input, select, textarea { font-family: inherit; }

    /* Accessibility: focus ring */
    :focus-visible {
      outline: none;
      box-shadow: var(--shadow-focus);
      border-color: var(--accent) !important;
    }
    /* Skip link */
    .skip-link {
      position: absolute;
      inset-inline-start: -9999px;
      top: 0;
      background: var(--brand);
      color: #fff;
      padding: var(--s-3) var(--s-4);
      border-radius: 0 0 var(--r-md) var(--r-md);
      z-index: 1000;
    }
    .skip-link:focus { inset-inline-start: 50%; transform: translateX(50%); }
    [dir="rtl"] .skip-link:focus { transform: translateX(-50%); }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }

    /* ───────── LAYOUT ───────── */
    .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
    @media (max-width: 768px) { .container { padding: 0 var(--s-4); } }

    /* ───────── TYPOGRAPHY ───────── */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-size: var(--text-xs);
      font-weight: var(--w-bold);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
      font-family: var(--font-display);
    }
    .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }
    h1, h2, h3, h4 {
      font-weight: var(--w-extrabold);
      color: var(--fg);
      line-height: var(--lh-tight);
      letter-spacing: -.01em;
      margin: 0;
    }
    h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); }
    h2 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); }
    h3 { font-size: var(--text-lg); }
    h4 { font-size: var(--text-base); }

    .display {
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      font-weight: var(--w-extrabold);
      line-height: var(--lh-tight);
      letter-spacing: -.02em;
    }

    .lede {
      font-size: var(--text-md);
      color: var(--fg-muted);
      line-height: var(--lh-relaxed);
      max-width: 64ch;
    }

    .small { font-size: var(--text-sm); }
    .xs { font-size: var(--text-xs); }
    .muted { color: var(--fg-muted); }
    .subtle { color: var(--fg-subtle); }

    /* ───────── HEADER (slim white) ───────── */
    .header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 90;
    }
    .header-row {
      height: var(--header-h);
      display: flex;
      align-items: center;
      gap: var(--s-5);
    }
    .brand-link {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      flex-shrink: 0;
      transition: opacity var(--quick) var(--ease);
    }
    .brand-link:hover { opacity: .85; }
    .brand-mark {
      width: 38px;
      height: 38px;
      background: var(--brand);
      border-radius: var(--r-md);
      padding: 4px;
      display: grid;
      place-items: center;
    }
    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .brand-name { line-height: var(--lh-tight); display: none; }
    .brand-name strong {
      display: block;
      font-size: var(--text-base);
      font-weight: var(--w-extrabold);
      color: var(--brand);
    }
    .brand-name small {
      display: block;
      font-size: var(--text-xs);
      font-weight: var(--w-bold);
      letter-spacing: .12em;
      color: var(--fg-subtle);
      font-family: var(--font-display);
    }
    @media (min-width: 640px) { .brand-name { display: block; } }

    .header-search {
      flex: 1;
      max-width: 480px;
      display: flex;
      align-items: center;
      gap: var(--s-2);
      background: var(--surface-2);
      border: 1px solid transparent;
      border-radius: var(--r-md);
      padding: 0 var(--s-3);
      height: 40px;
      transition: all var(--quick) var(--ease);
    }
    .header-search:focus-within {
      background: var(--surface);
      border-color: var(--accent);
      box-shadow: var(--shadow-focus);
    }
    .header-search svg { color: var(--fg-subtle); flex-shrink: 0; }
    .header-search input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      font-size: var(--text-base);
      color: var(--fg);
      width: 100%;
    }
    .header-search input::placeholder { color: var(--fg-subtle); }
    @media (max-width: 640px) {
      .header-search { display: none; }
      .header-search.mobile-open { display: flex; }
    }
    /* fm413 — live-suggestions dropdown below the search input */
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .search-suggest {
      position: absolute; top: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0;
      background: #fff; border: 1px solid var(--border, #e5e7eb);
      border-radius: 14px; box-shadow: 0 24px 60px -16px rgba(15,23,42,.22);
      z-index: 2000; max-height: 480px; overflow-y: auto; padding: 6px;
    }
    .search-suggest[hidden] { display: none; }
    .search-suggest .sugg-empty { padding: 18px; text-align: center; color: var(--fg-subtle, #64748b); font-size: .92rem; }
    .search-suggest .sugg-foot  { padding: 8px 12px; border-top: 1px dashed var(--border, #e5e7eb); color: var(--fg-subtle, #64748b); font-size: .82rem; text-align: center; }
    .search-suggest .sugg-item {
      display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
      padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: start;
      width: 100%; background: transparent; border: 0; color: inherit;
    }
    .search-suggest .sugg-item:hover, .search-suggest .sugg-item.active { background: #f3f4f6; }
    .search-suggest .sugg-item .thumb { width: 44px; height: 44px; border-radius: 10px; background: #f3f4f6; display: grid; place-items: center; overflow: hidden; }
    .search-suggest .sugg-item .thumb img { width: 100%; height: 100%; object-fit: contain; }
    .search-suggest .sugg-item .body { min-width: 0; }
    .search-suggest .sugg-item .name { font-weight: 800; color: var(--fg); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-suggest .sugg-item .meta { font-size: .78rem; color: var(--fg-subtle, #64748b); margin-top: 2px; }
    .search-suggest .sugg-item .price { font-weight: 900; color: var(--brand, #0d2647); white-space: nowrap; }
    .search-suggest .sugg-item .stock-pill { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-inline-start: 6px; }
    .search-suggest .sugg-item .stock-pill.ok   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    .search-suggest .sugg-item .stock-pill.out  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

    .header-actions {
      display: flex;
      align-items: center;
      gap: var(--s-1);
      margin-inline-start: auto;
    }

    /* Arabic storefront action order, from right to left:
       upload prescription → cart group → account. The Rx cart remains
       beside the shopping cart because it is a separate, working cart;
       only visual order changes, never the DOM or button contracts. */
    html[dir="rtl"] .header-actions { direction: rtl; }
    html[dir="rtl"] .header-actions > .header-rx-cta { order: 1; }
    html[dir="rtl"] .header-actions > #cartBtn,
    html[dir="rtl"] .header-actions > #rxCartBtn { order: 2; }
    html[dir="rtl"] .header-actions > #authCta { order: 3; }

    .icon-btn {
      width: 40px;
      height: 40px;
      border-radius: var(--r-md);
      display: grid;
      place-items: center;
      color: var(--fg-soft);
      position: relative;
      transition: background var(--quick) var(--ease);
    }
    .icon-btn:hover { background: var(--surface-2); color: var(--brand); }
    /* fm312a — pressed state for the favorites filter toggle */
    .icon-btn.active { background: rgba(255, 35, 91, .08); color: #e11d48; }
    .icon-btn-badge {
      position: absolute;
      top: 4px;
      inset-inline-end: 4px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: var(--accent);
      color: #fff;
      font-size: var(--text-xs);
      font-weight: var(--w-extrabold);
      border-radius: var(--r-full);
      display: grid;
      place-items: center;
      font-family: var(--font-display);
    }
    .icon-btn-badge.empty { display: none; }

    /* ═════════════════════════════════════════════════════════════
       fm553g — Unified cart pair (shopping + Rx)
       Owner ask: "اريد الاتنين رمز عربيه تسوق ثم الوصفه تكون بلون
                   ذهبي وممكن حرف rx"
       Both buttons share the shopping-cart glyph. Rx variant gets the
       pharmacy gold token (--color-gold) plus a ℞ (Unicode PRESCRIPTION TAKE,
       U+211E) glyph in the top-inline-start corner. ℞ is the
       international pharmacy symbol — read universally, no
       translation required.
       ═════════════════════════════════════════════════════════════ */
    .cart-btn { position: relative; }
    .cart-btn--shopping { color: var(--fg-soft); }
    .cart-btn--shopping:hover { color: var(--brand); background: var(--surface-2); }

    .cart-btn--rx {
      /* Pharmacy gold from the shared design.css palette; lines up
         with the fly-to-cart animation. */
      color: var(--color-gold);
    }
    .cart-btn--rx:hover {
      background: color-mix(in srgb, var(--color-gold) 10%, transparent);
      color: #a67c30;
    }
    .cart-btn__rx-mark {
      position: absolute;
      top: 4px;
      inset-inline-start: 4px;
      min-width: 16px;
      height: 16px;
      padding: 0 3px;
      background: #fff;
      color: var(--color-gold);
      border: 1px solid var(--color-gold);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 900;
      line-height: 14px;
      text-align: center;
      font-family: 'Times New Roman', 'Amiri', serif; /* serif renders ℞ crisper */
      box-shadow: 0 1px 2px color-mix(in srgb, var(--color-gold) 25%, transparent);
      pointer-events: none;
    }
    .cart-btn__badge--rx {
      background: var(--color-gold) !important;
      box-shadow: 0 0 0 2px #fff;
    }
    /* Optional: soft pulse when the Rx cart has items so the owner /
       buyer notices which one carries prescription items. */
    @keyframes rxCartGlow {
      0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-gold) 0%, transparent); }
      50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-gold) 18%, transparent); }
    }
    .cart-btn--rx:has(.cart-btn__badge--rx:not(.empty)) {
      animation: rxCartGlow 2.4s ease-in-out infinite;
      border-radius: var(--r-md);
    }

    /* ═════════════════════════════════════════════════════════════
       fm553g — Drawer tab strip
       Fixes the audit-caught bug where renderCart() only ever showed
       the regular cart's items regardless of which button opened the
       drawer. Tabs are now real DOM elements with aria-selected +
       distinct active/inactive styles, and the Rx tab carries the
       ℞ mark plus gold theme so it's unmistakable.
       ═════════════════════════════════════════════════════════════ */
    .drawer-tabs {
      display: flex;
      gap: 6px;
      padding: 8px 12px 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .drawer-tab {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 12px 12px;
      border: 0;
      background: transparent;
      color: var(--fg-soft);
      font-weight: 800;
      font-size: .88rem;
      font-family: inherit;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: background var(--quick), color var(--quick), border-color var(--quick);
      position: relative;
    }
    .drawer-tab:hover { background: var(--surface-2); color: var(--fg); }
    .drawer-tab[aria-selected="true"] {
      color: var(--fg);
      background: var(--surface-2);
      border-bottom-color: var(--brand);
    }
    .drawer-tab--rx { color: #a67c30; }
    .drawer-tab--rx:hover { background: color-mix(in srgb, var(--color-gold) 10%, transparent); color: #8a6323; }
    .drawer-tab--rx[aria-selected="true"] {
      color: #a67c30;
      background: linear-gradient(180deg, rgba(255, 251, 235, 1), rgba(254, 243, 199, .55));
      border-bottom-color: var(--color-gold);
    }
    .drawer-tab__count {
      min-width: 20px;
      padding: 1px 6px;
      border-radius: 10px;
      background: var(--surface-2);
      color: var(--fg-soft);
      font-size: 11px;
      font-weight: 900;
      line-height: 16px;
      text-align: center;
      font-family: var(--font-display);
    }
    .drawer-tab[aria-selected="true"] .drawer-tab__count {
      background: var(--brand);
      color: #fff;
    }
    .drawer-tab--rx .drawer-tab__count {
      background: color-mix(in srgb, var(--color-gold) 15%, transparent);
      color: #a67c30;
    }
    .drawer-tab--rx[aria-selected="true"] .drawer-tab__count {
      background: var(--color-gold);
      color: #fff;
    }
    .drawer-tab__rx-mark {
      display: inline-block;
      min-width: 16px;
      padding: 0 3px;
      background: #fff;
      color: var(--color-gold);
      border: 1px solid var(--color-gold);
      border-radius: 5px;
      font-family: 'Times New Roman', 'Amiri', serif;
      font-size: 12px;
      font-weight: 900;
      line-height: 14px;
      text-align: center;
    }

    /* Rx-themed cart line variant used inside the drawer body. */
    .cart-line--rx {
      background: linear-gradient(180deg, rgba(255, 251, 235, 1), rgba(254, 243, 199, .40));
      border-inline-start: 3px solid var(--color-gold);
      border-radius: 8px;
      padding-inline-start: 8px;
    }

    /* fm238 — fly-to-cart visual */
    .fly-to-cart {
      position: fixed;
      width: 44px; height: 44px;
      border-radius: 50%;
      background-size: cover; background-position: center;
      box-shadow: 0 8px 24px color-mix(in srgb, var(--color-gold) 40%, transparent), 0 0 0 3px color-mix(in srgb, var(--color-gold) 25%, transparent);
      z-index: 9999;
      pointer-events: none;
      transition: transform .7s cubic-bezier(.55,-0.05,.5,1.1), opacity .7s ease-out;
      will-change: transform, opacity;
    }
    @keyframes cartBump {
      0%   { transform: scale(1); }
      30%  { transform: scale(1.45); background: var(--color-gold); }
      60%  { transform: scale(.92); }
      100% { transform: scale(1); }
    }
    .icon-btn-badge.cart-bump { animation: cartBump .55s ease-out; }
    @keyframes cartShake {
      0%, 100% { transform: rotate(0); }
      25%  { transform: rotate(-9deg); }
      50%  { transform: rotate(7deg); }
      75%  { transform: rotate(-4deg); }
    }
    #cartBtn.cart-shake svg,
    #rxCartBtn.cart-shake svg { animation: cartShake .45s ease-out; transform-origin: center; }

    /* fm241 — guest checkout subtle login/signup hint */
    .guest-hint {
      background: linear-gradient(135deg, #faf7f2 0%, #fff7ed 100%);
      border: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
      border-radius: 12px;
      padding: 12px 16px;
      margin-bottom: 16px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .guest-hint-text {
      display: flex; align-items: flex-start; gap: 8px;
      color: #78350f; font-size: .88rem; line-height: 1.6;
    }
    .guest-hint-text svg { color: var(--color-gold); flex-shrink: 0; margin-top: 3px; }
    .guest-hint-actions {
      display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
      padding-inline-start: 24px;
    }
    .guest-hint-btn {
      background: none; border: 0; padding: 4px 8px;
      color: var(--color-primary); font: inherit; font-weight: 800; font-size: .88rem;
      cursor: pointer; border-radius: 6px;
      transition: background .15s;
    }
    .guest-hint-btn:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
    .guest-hint-sep { color: #9ca3af; font-weight: 700; }
    .guest-hint-continue { color: #6b7280; font-size: .82rem; margin-inline-start: auto; font-weight: 700; }

    .header-cta {
      padding: 0 var(--s-4);
      height: 38px;
      background: var(--brand);
      color: #fff;
      border-radius: var(--r-md);
      font-size: var(--text-sm);
      font-weight: var(--w-bold);
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      transition: background var(--quick) var(--ease);
    }
    .header-cta:hover { background: var(--brand-hover); }
    @media (max-width: 540px) { .header-cta span { display: none; } .header-cta { width: 40px; padding: 0; justify-content: center; } }

    /* fm553eeee — Primary "ارفع وصفتك" CTA in the header. Gold pill so
       the customer's eye lands on it within 3 seconds of page load
       (owner's north-star KPI). Owner asked: "المريض خلال 3 ثواني
       يعرف أين يرفع الوصفة". */
    .header-rx-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, var(--color-gold), #a37f38);
      color: #fff;
      padding: 0 16px;
      height: 40px;
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--color-gold) 55%, transparent);
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
      white-space: nowrap;
    }
    .header-rx-cta:hover {
      background: linear-gradient(135deg, #a37f38, #8a6a2e);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--color-gold) 65%, transparent);
      text-decoration: none;
      color: #fff;
    }
    .header-rx-cta:focus-visible {
      outline: 2px solid #ffd8a3;
      outline-offset: 3px;
    }
    /* Small phones: keep the icon + label visible but shrink the pill
       so the essential 4-item row still fits (upload | cart | rx-cart
       | account). At <420px hide the label and let the icon carry it. */
    @media (max-width: 540px) {
      .header-rx-cta { padding: 0 12px; font-size: .82rem; height: 38px; }
    }
    @media (max-width: 420px) {
      .header-rx-cta span { display: none; }
      .header-rx-cta { padding: 0; width: 40px; justify-content: center; }
    }

    /* fm553ffff — Two-path landing (Rx vs Store).
       Owner brief: "اجعل الصفحة الرئيسية لها مسارين واضحين". Sits
       above the hero, mobile-first (stacks), with big tap targets. */
    .rx-two-path { padding: 20px 0 0; }
    .rx-two-path-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .rx-path-card {
      display: flex; align-items: center; gap: 14px;
      padding: 20px 22px;
      background: #fff;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
      text-decoration: none; color: #0d2647;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      box-shadow: 0 4px 14px -8px rgba(15,23,42,.15);
    }
    .rx-path-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 32px -18px rgba(15,23,42,.25);
      text-decoration: none;
    }
    .rx-path-card--rx { border-color: #a7f3d0; background: linear-gradient(135deg, #ecfdf5, #fff); }
    .rx-path-card--rx:hover { border-color: #059669; }
    .rx-path-card--shop { border-color: #cbd5e1; background: linear-gradient(135deg, #f8fafc, #fff); }
    .rx-path-card--shop:hover { border-color: #b8935a; }
    .rx-path-icon {
      font-size: 2.4rem; flex-shrink: 0;
      width: 62px; height: 62px; border-radius: 16px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #fff; border: 1px solid #e5e7eb;
    }
    .rx-path-card--rx .rx-path-icon { background: #ecfdf5; border-color: #a7f3d0; }
    .rx-path-body { flex: 1; min-width: 0; }
    .rx-path-body strong {
      display: block; font-size: 1.05rem; font-weight: 900;
      color: #0d2647; margin-bottom: 4px;
    }
    .rx-path-body p { margin: 0; color: #475569; font-size: .88rem; line-height: 1.6; }
    .rx-path-cta {
      font-size: 1.6rem; color: #b8935a; font-weight: 900;
      transform: scaleX(-1);   /* flip arrow for RTL */
    }
    @media (max-width: 640px) {
      .rx-two-path-grid { grid-template-columns: 1fr; gap: 12px; }
      .rx-path-card { padding: 16px 18px; }
      .rx-path-icon { width: 54px; height: 54px; font-size: 2rem; }
    }

    /* ───────── SMART STICKY NAVIGATION ───────── */
    [data-smart-sticky-nav] {
      position: sticky;
      top: var(--customer-header-height);
      z-index: 80;
      width: 100%;
      max-width: 100%;
      background: rgba(255, 253, 249, .97);
      border-bottom: 1px solid transparent;
      transform: translateY(0);
      transition: transform var(--base) var(--ease), box-shadow var(--quick) ease, border-color var(--quick) ease;
      will-change: transform;
    }
    .smart-nav-shell.is-stuck {
      border-bottom: 1px solid rgba(13, 38, 71, .1);
      box-shadow: 0 5px 12px -12px rgba(13, 38, 71, .42);
    }
    @supports (backdrop-filter: blur(8px)) {
      .smart-nav-shell.is-stuck {
        background: rgba(255, 253, 249, .9);
        backdrop-filter: blur(8px) saturate(110%);
      }
    }
    .smart-nav-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-auto-flow: column;
      grid-auto-columns: auto;
      align-items: center;
      gap: var(--s-2);
      min-width: 0;
      padding: 5px 0;
    }
    .nav-strip {
      position: static;
      min-width: 0;
      max-width: 100%;
      background: transparent;
    }
    [data-smart-nav-categories] {
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      white-space: nowrap;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline proximity;
    }
    [data-smart-nav-categories]::-webkit-scrollbar { display: none; }
    .nav-row {
      display: flex;
      align-items: center;
      gap: var(--s-1);
      width: max-content;
      min-width: 100%;
      min-height: 44px;
    }
    .nav-link,
    [data-smart-nav-category] {
      min-height: 44px;
      padding: var(--s-2) var(--s-3);
      font-size: var(--text-base);
      font-weight: var(--w-semibold);
      color: var(--fg-muted);
      white-space: nowrap;
      border-radius: var(--r-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-2);
      flex: 0 0 auto;
      scroll-snap-align: center;
      transition: color var(--quick) var(--ease), background var(--quick) var(--ease), border-color var(--quick) var(--ease);
    }
    .nav-link:hover { background: var(--surface-2); color: var(--fg); }
    .nav-link.active,
    [data-smart-nav-category][aria-current="page"] {
      color: var(--brand);
      background: var(--brand-soft);
      box-shadow: inset 0 -2px 0 rgba(13, 38, 71, .5);
    }
    .smart-nav-actions {
      display: flex;
      align-items: center;
      gap: var(--s-2);
      padding-inline-start: var(--s-2);
      border-inline-start: 1px solid var(--border);
      min-width: 0;
    }
    [data-smart-nav-action] {
      min-height: 44px;
      padding: 0 var(--s-3);
      border: 1px solid transparent;
      border-radius: var(--r-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-2);
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: var(--text-base);
      font-weight: var(--w-bold);
      transition: color var(--quick) ease, background var(--quick) ease, border-color var(--quick) ease;
    }
    .smart-nav-action--primary {
      color: #182437;
      background: #d5b678;
      border-color: #c6a664;
    }
    .smart-nav-action--primary:hover { background: #c9a966; }
    #catalog,
    #catalog-results,
    main section[id] {
      scroll-margin-top: calc(var(--customer-header-height) + var(--customer-nav-height) + var(--customer-sticky-gap));
    }

    #rx-upload .btn {
      max-width: 100%;
      height: auto;
      min-height: 44px;
      padding-block: var(--s-2);
      white-space: normal;
      text-align: center;
    }

    @media (max-width: 47.99rem), (max-height: 31rem) and (max-width: 64rem) {
      .smart-nav-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        grid-auto-columns: initial;
        gap: 4px;
        min-width: 0;
        padding: 4px 0 6px;
      }
      [data-smart-nav-categories] {
        min-width: 0;
        width: 100%;
      }
      .smart-nav-actions {
        min-width: 0;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        border-inline-start: 0;
        border-top: 1px solid rgba(13, 38, 71, .08);
        padding: 4px 0 0;
      }
      .smart-nav-actions::-webkit-scrollbar { display: none; }
      .smart-nav-actions [data-smart-nav-action] { flex: 1 0 auto; }
      .smart-nav-layout > .nav-link { display: none; }
      [data-smart-sticky-nav].is-smart-hidden {
        transform: translateY(calc(-100% - 1px));
        pointer-events: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      [data-smart-sticky-nav] { transition: none !important; }
    }

    /* ───────── BUTTONS ───────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-2);
      padding: 0 var(--s-5);
      height: 44px;
      border-radius: var(--r-md);
      font-size: var(--text-base);
      font-weight: var(--w-bold);
      transition: all var(--quick) var(--ease);
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn-sm { height: 36px; padding: 0 var(--s-4); font-size: var(--text-sm); }
    .btn-lg { height: 52px; padding: 0 var(--s-6); font-size: var(--text-base); }
    .btn-primary {
      background: var(--accent);
      color: #fff;
    }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-brand {
      background: var(--brand);
      color: #fff;
    }
    .btn-brand:hover { background: var(--brand-hover); }
    .btn-ghost {
      background: transparent;
      color: var(--fg-soft);
      border-color: var(--border-strong);
    }
    .btn-ghost:hover { background: var(--surface-2); color: var(--fg); border-color: var(--fg-muted); }
    .btn-text {
      background: transparent;
      color: var(--accent);
      padding: 0 var(--s-2);
    }
    .btn-text:hover { color: var(--accent-hover); text-decoration: underline; }
    .btn-block { width: 100%; }
    .btn:disabled {
      background: var(--surface-3) !important;
      color: var(--fg-disabled) !important;
      cursor: not-allowed;
      border-color: transparent !important;
    }

    /* ───────── HERO ───────── */
    .hero {
      padding: var(--s-16) 0 var(--s-12);
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: var(--s-12);
      align-items: center;
    }
    @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); } }

    .hero-content { max-width: 540px; }
    .hero h1 {
      font-size: clamp(1.875rem, 4vw, 2.875rem);
      font-weight: var(--w-extrabold);
      line-height: var(--lh-tight);
      letter-spacing: -.02em;
      margin-top: var(--s-4);
      margin-bottom: var(--s-4);
    }
    .hero h1 em {
      font-style: normal;
      color: var(--accent);
    }
    .hero .lede { margin-bottom: var(--s-6); }

    .hero-actions {
      display: flex;
      gap: var(--s-3);
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: var(--s-8);
    }
    .hero-trust {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      padding-top: var(--s-6);
      border-top: 1px solid var(--border);
    }
    .hero-trust-avatars {
      display: flex;
    }
    .hero-trust-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent);
      display: grid;
      place-items: center;
      font-weight: var(--w-bold);
      font-size: var(--text-sm);
      border: 2px solid var(--surface);
      margin-inline-start: -8px;
    }
    .hero-trust-avatar:first-child { margin-inline-start: 0; }
    .hero-trust-text {
      font-size: var(--text-sm);
      color: var(--fg-muted);
    }
    .hero-trust-text strong { color: var(--fg); font-weight: var(--w-bold); }

    /* Hero visual — soft composition with stat cards */
    .hero-visual {
      position: relative;
      aspect-ratio: 1/1;
      max-width: 480px;
      margin: 0 auto;
    }
    .hero-visual-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, var(--accent-soft) 0%, var(--brand-soft) 100%);
      border-radius: var(--r-xl);
    }
    .hero-floating {
      position: absolute;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-4);
      box-shadow: var(--shadow-md);
    }
    .hero-float-1 {
      top: 8%;
      inset-inline-start: 8%;
      display: flex;
      align-items: center;
      gap: var(--s-3);
    }
    .hero-float-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--r-md);
      background: var(--accent-soft);
      color: var(--accent);
      display: grid;
      place-items: center;
    }
    .hero-float-1 .meta strong { display: block; font-size: var(--text-sm); font-weight: var(--w-bold); }
    .hero-float-1 .meta small { color: var(--fg-muted); font-size: var(--text-xs); }

    .hero-float-2 {
      bottom: 10%;
      inset-inline-end: 4%;
      min-width: 200px;
    }
    .hero-float-2 .num {
      font-size: var(--text-2xl);
      font-weight: var(--w-extrabold);
      color: var(--brand);
      letter-spacing: -.02em;
    }
    .hero-float-2 .label {
      font-size: var(--text-sm);
      color: var(--fg-muted);
      font-weight: var(--w-semibold);
    }

    .hero-float-3 {
      top: 40%;
      inset-inline-end: -2%;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      gap: var(--s-2);
      font-weight: var(--w-bold);
      font-size: var(--text-sm);
      padding: var(--s-3) var(--s-4);
    }
    .hero-float-3 svg { color: var(--accent-soft); }

    /* Hero stats below */
    .hero-stats {
      margin-top: var(--s-10);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s-4);
      padding-top: var(--s-8);
      border-top: 1px solid var(--border);
    }
    @media (max-width: 640px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
    .stat-value {
      display: block;
      font-size: var(--text-xl);
      font-weight: var(--w-extrabold);
      color: var(--brand);
      letter-spacing: -.02em;
      line-height: var(--lh-tight);
      margin-bottom: var(--s-2);
    }
    .stat-label {
      font-size: var(--text-sm);
      color: var(--fg-muted);
      line-height: var(--lh-snug);
    }

    /* ───────── SECTION ───────── */
    section.section { padding: var(--s-16) 0; }
    @media (max-width: 768px) { section.section { padding: var(--s-12) 0; } }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--s-4);
      margin-bottom: var(--s-8);
      flex-wrap: wrap;
    }
    .section-head h2 {
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      letter-spacing: -.02em;
    }
    .section-head .lede { margin-top: var(--s-2); margin-bottom: 0; font-size: var(--text-base); }

    /* ───────── HOW IT WORKS ───────── */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-5);
    }
    @media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
    .step {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-6);
      position: relative;
      transition: all var(--base) var(--ease);
    }
    .step:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .step-number {
      position: absolute;
      top: var(--s-5);
      inset-inline-end: var(--s-5);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--surface-2);
      color: var(--fg-muted);
      display: grid;
      place-items: center;
      font-weight: var(--w-extrabold);
      font-size: var(--text-sm);
      font-family: var(--font-display);
    }
    .step-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--r-md);
      background: var(--accent-soft);
      color: var(--accent);
      display: grid;
      place-items: center;
      margin-bottom: var(--s-4);
    }
    .step h3 { margin-bottom: var(--s-2); }
    .step p { margin: 0; color: var(--fg-muted); font-size: var(--text-base); }

    /* ───────── CATEGORIES (circular icons strip) ───────── */
    .cats {
      display: grid;
      /* fm55412 — minmax(0,1fr): plain 1fr cells refuse to shrink below
         their longest category label, overflowing the page 8px at 360px. */
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: var(--s-3);
    }
    @media (max-width: 920px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 480px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .cat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--s-3);
      padding: var(--s-4) var(--s-2);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      text-align: center;
      transition: all var(--base) var(--ease);
    }
    .cat:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    .cat.active {
      background: var(--brand);
      border-color: var(--brand);
    }
    .cat.active .cat-label { color: #fff; }
    .cat.active .cat-icon { background: rgba(255,255,255,.1); color: #fff; }
    .cat-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent);
      display: grid;
      place-items: center;
      font-size: var(--text-xl);
      transition: all var(--base) var(--ease);
    }
    .cat-label {
      font-weight: var(--w-bold);
      font-size: var(--text-sm);
      color: var(--fg-soft);
    }

    /* ───────── CATALOG (sidebar + grid) ───────── */
    .plp {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: var(--s-6);
    }
    @media (max-width: 980px) { .plp { grid-template-columns: 1fr; } }

    /* Sidebar */
    .sidebar {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      align-self: start;
      position: sticky;
      top: var(--customer-sticky-offset);
      /* The facet list grew taller than the viewport; a sticky element
         with hidden overflow pins and permanently cuts off its bottom.
         Bound it to the visible height and let it scroll internally. */
      max-height: calc(100dvh - var(--customer-sticky-offset) - 16px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    @media (max-width: 980px) {
      /* fm55474 — the mobile filter is now a SIDE PANEL (not a full-screen
         inset:0 sheet). The dark area beside it is a real, tappable
         backdrop that closes the filter — fixing "أضغط يمين ويسار ولا
         يحصل شيء". Mirrors the proven cart-drawer + mask pattern. */
      .filter-backdrop { display: block; }
      .filter-backdrop.open { opacity: 1; pointer-events: auto; }
      .sidebar {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: min(88%, 380px);
        z-index: 200;
        border-radius: 0;
        overflow-y: auto;
        max-height: none;
        box-shadow: var(--shadow-lg);
        /* reserve room so the sticky apply bar never covers the last
           facet, and honour the safe-area on notched phones. */
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
      }
      #sidebar.mobile-open { display: block; }
      #sidebar.mobile-open .filter-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface);
      }
      /* fm55474 — REVEAL the ✕ + apply bar via #id.mobile-open so their
         specificity (0,1,2,0) BEATS the desktop `.filter-*{display:none}`
         default (0,0,1,0) regardless of source order. The fm55473 bug was
         two SAME-specificity rules where the later display:none silently
         won on mobile, so both controls stayed hidden and the shopper was
         trapped. Specificity — not order — is the durable fix. */
      #sidebar.mobile-open .filter-close-mobile { display: inline-flex; }
      #sidebar.mobile-open .filter-apply-bar { display: block; }
    }
    /* fm55473 — mobile-only controls; hidden on desktop where the sidebar
       is a sticky column that never traps the user. */
    .filter-close-mobile {
      display: none;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      font-size: var(--text-base);
      font-weight: var(--w-bold);
      line-height: 1;
    }
    .filter-close-mobile:hover { background: var(--surface-2, #f1f5f9); }
    .filter-apply-bar {
      display: none;
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: 201;
      padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
      background: var(--surface);
      border-top: 1px solid var(--border);
      box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, .4);
    }
    .filter-apply-bar .btn { width: 100%; }
    /* fm55474 — clickable dark backdrop behind the mobile filter panel.
       Hidden on desktop; shown (display:block) inside the mobile query. */
    .filter-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 199;
      background: rgba(10, 14, 26, .5);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--base, .2s) var(--ease, ease);
    }
    /* fm55474 — ONE scroll-lock owner. Both the filter panel and the cart
       drawer add this class; body scroll unlocks only when NEITHER is open
       (was: each toggled body.style.overflow independently, so closing one
       could unlock while the other was still open). */
    body.storefront-overlay-open { overflow: hidden; }
    .filter-head {
      padding: var(--s-4) var(--s-5);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .filter-head h3 {
      font-size: var(--text-base);
      font-weight: var(--w-bold);
      color: var(--fg);
    }
    .filter-head button { color: var(--accent); font-size: var(--text-sm); font-weight: var(--w-bold); }
    .filter-head button:hover { text-decoration: underline; }

    /* Each facet is a softly tinted card — the eye separates sections
       by colour before reading a single word. Tints reuse the same
       family as the category dots and product-card backgrounds (one
       visual language), mixed toward white so they whisper, never
       shout. Browsers without color-mix keep the plain token tint. */
    .filter-group {
      border-bottom: none;
      margin: 0 var(--s-3) var(--s-2);
      border-radius: var(--r-md);
      overflow: hidden;
      background: var(--surface-2);
    }
    .filter-group:first-of-type { margin-top: var(--s-3); }
    .filter-group:last-child { margin-bottom: var(--s-3); }
    .filter-group[data-facet="cat"]        { background: var(--mint-bg);     background: color-mix(in srgb, var(--mint-bg) 55%, #fff); }
    .filter-group[data-facet="demand"]     { background: var(--sky-bg);      background: color-mix(in srgb, var(--sky-bg) 55%, #fff); }
    .filter-group[data-facet="rxtype"]     { background: var(--blush-bg);    background: color-mix(in srgb, var(--blush-bg) 45%, #fff); }
    .filter-group[data-facet="price"]      { background: var(--peach-bg);    background: color-mix(in srgb, var(--peach-bg) 45%, #fff); }
    .filter-group[data-facet="ingredient"] { background: var(--lavender-bg); background: color-mix(in srgb, var(--lavender-bg) 50%, #fff); }
    .filter-group[data-facet="brand"]      { background: var(--surface-2);   background: color-mix(in srgb, var(--surface-2) 70%, #fff); }
    .filter-group summary {
      padding: var(--s-3) var(--s-5);
      font-weight: var(--w-bold);
      font-size: var(--text-sm);
      color: var(--fg);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      user-select: none;
    }
    .filter-group summary::-webkit-details-marker { display: none; }
    .filter-group summary::after {
      content: '';
      width: 8px;
      height: 8px;
      border-right: 1.5px solid var(--fg-subtle);
      border-bottom: 1.5px solid var(--fg-subtle);
      transform: rotate(45deg);
      transition: transform var(--quick) var(--ease);
      margin-top: -3px;
    }
    .filter-group[open] summary::after { transform: rotate(-135deg); margin-top: 0; }
    .filter-group .body { padding: 0 var(--s-5) var(--s-4); }

    .filter-opt {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      padding: var(--s-1) 0;
      font-size: var(--text-sm);
      color: var(--fg-soft);
      cursor: pointer;
      transition: color var(--quick) var(--ease);
    }
    .filter-opt:hover { color: var(--brand); }
    .filter-opt input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--accent);
      cursor: pointer;
      margin: 0;
    }
    .filter-opt-count {
      margin-inline-start: auto;
      font-size: var(--text-xs);
      color: var(--fg-subtle);
      font-weight: var(--w-semibold);
      font-family: var(--font-display);
    }
    .price-range {
      display: flex;
      gap: var(--s-2);
      align-items: center;
    }
    .price-range input {
      width: 100%;
      padding: var(--s-2) var(--s-3);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      font-size: var(--text-sm);
      outline: none;
      background: var(--surface);
    }
    .price-range input:focus { border-color: var(--accent); }

    /* Dual-handle price slider — two native ranges overlaid on one
       track; only the thumbs receive pointer events so the handles
       never fight each other. */
    .price-slider {
      position: relative;
      height: 28px;
      margin: var(--s-1) 2px var(--s-2);
    }
    .price-slider-track {
      position: absolute;
      inset-inline: 0;
      top: 12px;
      height: 4px;
      border-radius: 999px;
      background: var(--border);
    }
    .price-slider-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 999px;
      background: var(--accent);
    }
    .price-slider input[type="range"] {
      position: absolute;
      inset-inline: 0;
      top: 4px;
      width: 100%;
      margin: 0;
      background: none;
      pointer-events: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .price-slider input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--surface);
      border: 2px solid var(--accent);
      box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
      cursor: grab;
      pointer-events: auto;
    }
    .price-slider input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--surface);
      border: 2px solid var(--accent);
      box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
      cursor: grab;
      pointer-events: auto;
    }
    .price-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* Skeleton cards — the grid's final shape appears instantly while
       the catalog request is in flight; shimmer reuses the media
       animation so loading feels like one continuous system. */
    .product-skeleton { pointer-events: none; }
    .product-skeleton .sk-media {
      aspect-ratio: 1/1;
      background: linear-gradient(100deg, rgba(226,232,240,.55) 40%, rgba(248,250,252,.9) 50%, rgba(226,232,240,.55) 60%);
      background-size: 200% 100%;
      animation: product-media-shimmer 1.1s linear infinite;
    }
    .product-skeleton .sk-body { padding: var(--s-4); display: grid; gap: var(--s-3); }
    .product-skeleton .sk-line {
      height: 12px;
      border-radius: 6px;
      background: linear-gradient(100deg, rgba(226,232,240,.7) 40%, rgba(248,250,252,1) 50%, rgba(226,232,240,.7) 60%);
      background-size: 200% 100%;
      animation: product-media-shimmer 1.1s linear infinite;
    }
    .product-skeleton .sk-line--price { height: 16px; }
    @media (prefers-reduced-motion: reduce) {
      .product-skeleton .sk-media, .product-skeleton .sk-line { animation: none; }
    }

    /* Category colour identity in the filter bar — a quiet tinted dot
       per shelf, and the row takes the same soft tint when selected.
       Colours reuse the exact per-category tokens the product cards
       already carry, so the filter and the grid speak one language. */
    .cat-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex: 0 0 10px;
      background: var(--surface-2);
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
    }
    .cat-dot[data-cat-dot="otc"]       { background: var(--mint); }
    .cat-dot[data-cat-dot="rx"]        { background: var(--blush); }
    .cat-dot[data-cat-dot="vitamins"]  { background: var(--peach); }
    .cat-dot[data-cat-dot="women"]     { background: var(--blush); }
    .cat-dot[data-cat-dot="men"]       { background: var(--fg-subtle); }
    .cat-dot[data-cat-dot="hair"]      { background: var(--peach); }
    .cat-dot[data-cat-dot="skin"]      { background: var(--lavender); }
    .cat-dot[data-cat-dot="oral"]      { background: var(--sky); }
    .cat-dot[data-cat-dot="eye"]       { background: var(--mint); }
    .cat-dot[data-cat-dot="baby"]      { background: var(--sky); }
    .cat-dot[data-cat-dot="devices"]   { background: var(--fg-subtle); }
    .cat-dot[data-cat-dot="first-aid"] { background: #ef8a8a; }
    .filter-opt[data-cat-opt]:has(input:checked) { border-radius: var(--r-sm); }
    .filter-opt[data-cat-opt="otc"]:has(input:checked)       { background: var(--mint-bg); }
    .filter-opt[data-cat-opt="rx"]:has(input:checked)        { background: var(--blush-bg); }
    .filter-opt[data-cat-opt="vitamins"]:has(input:checked)  { background: var(--peach-bg); }
    .filter-opt[data-cat-opt="women"]:has(input:checked)     { background: var(--blush-bg); }
    .filter-opt[data-cat-opt="men"]:has(input:checked)       { background: var(--surface-2); }
    .filter-opt[data-cat-opt="hair"]:has(input:checked)      { background: var(--peach-bg); }
    .filter-opt[data-cat-opt="skin"]:has(input:checked)      { background: var(--lavender-bg); }
    .filter-opt[data-cat-opt="oral"]:has(input:checked)      { background: var(--sky-bg); }
    .filter-opt[data-cat-opt="eye"]:has(input:checked)       { background: var(--mint-bg); }
    .filter-opt[data-cat-opt="baby"]:has(input:checked)      { background: var(--sky-bg); }
    .filter-opt[data-cat-opt="devices"]:has(input:checked)   { background: var(--surface-2); }
    .filter-opt[data-cat-opt="first-aid"]:has(input:checked) { background: #fef2f2; }

    /* Best-sellers rail — a horizontal shelf of the SAME product cards
       the grid uses; snap scrolling, momentum on touch. */
    .reco-rail {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: clamp(210px, 24vw, 264px);
      gap: var(--s-4);
      overflow-x: auto;
      padding: var(--s-1) var(--s-1) var(--s-3);
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .reco-rail .product { scroll-snap-align: start; }

    /* Type-to-find inside long facets (ingredients / brands) */
    .facet-search {
      width: 100%;
      margin-bottom: var(--s-2);
      padding: var(--s-2) var(--s-3);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      font-size: var(--text-sm);
      outline: none;
      background: var(--surface);
    }
    .facet-search:focus { border-color: var(--accent); }

    /* Toolbar */
    .toolbar {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-3) var(--s-4);
      margin-bottom: var(--s-4);
      display: flex;
      align-items: center;
      gap: var(--s-3);
      flex-wrap: wrap;
    }
    .toolbar .count {
      font-size: var(--text-sm);
      color: var(--fg-muted);
    }
    .toolbar .actions {
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      gap: var(--s-2);
    }
    .sort-select {
      padding: var(--s-2) var(--s-3);
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: var(--r-md);
      font-size: var(--text-sm);
      color: var(--fg);
      cursor: pointer;
      font-weight: var(--w-semibold);
      transition: border-color var(--quick) var(--ease);
    }
    .sort-select:hover { border-color: var(--border-strong); }
    .sort-select:focus { outline: none; border-color: var(--accent); }
    .view-toggle {
      display: flex;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 2px;
      background: var(--surface);
    }
    .view-toggle button {
      padding: var(--s-2) var(--s-3);
      border-radius: var(--r-sm);
      color: var(--fg-subtle);
      display: grid;
      place-items: center;
      transition: all var(--quick) var(--ease);
    }
    .view-toggle button.active {
      background: var(--brand);
      color: #fff;
    }
    .mobile-filter-btn {
      display: none;
      gap: var(--s-2);
      align-items: center;
    }
    @media (max-width: 980px) { .mobile-filter-btn { display: inline-flex; } }

    /* Active filters chips */
    .active-chips {
      display: flex;
      gap: var(--s-2);
      flex-wrap: wrap;
      margin-bottom: var(--s-4);
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      padding: var(--s-2) var(--s-3);
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: var(--r-full);
      font-size: var(--text-sm);
      font-weight: var(--w-bold);
    }
    .chip button {
      color: var(--accent);
      opacity: .6;
      padding: 0;
      width: 14px;
      height: 14px;
      display: grid;
      place-items: center;
    }
    .chip button:hover { opacity: 1; }

    /* ───────── PRODUCT GRID ───────── */
    .grid-products {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-4);
    }
    @media (max-width: 1200px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 980px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 760px) { .grid-products { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }
    @media (max-width: 380px) { .grid-products { grid-template-columns: 1fr; } }

    .grid-products.list-view { grid-template-columns: 1fr; }
    .grid-products.list-view .product { flex-direction: row; align-items: stretch; }
    .grid-products.list-view .product-media { width: 200px; flex-shrink: 0; aspect-ratio: 1/1; }
    .grid-products.list-view .product-body { padding: var(--s-5); }

    .product {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: all var(--base) var(--ease);
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .product:hover {
      border-color: var(--border-strong);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .product-media {
      position: relative;
      aspect-ratio: 1/1;
      background: var(--surface-2);
      overflow: hidden;
    }
    /* Mobile-smooth loading: real photos fade in over a quiet shimmer
       instead of popping into an empty tile. The shimmer lives on
       ::after (z-index 1 — under the z-index 2 tags/heart) and is
       removed by :has() the moment the image reports load. */
    .product-media img[data-product-image] {
      opacity: 0;
      transition: opacity .28s var(--ease);
    }
    .product-media img[data-product-image].is-loaded { opacity: 1; }
    .product-media:has(> img[data-product-image]:not(.is-loaded))::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(100deg, rgba(226,232,240,.55) 40%, rgba(248,250,252,.9) 50%, rgba(226,232,240,.55) 60%);
      background-size: 200% 100%;
      animation: product-media-shimmer 1.1s linear infinite;
    }
    @keyframes product-media-shimmer { to { background-position: -200% 0; } }
    @media (prefers-reduced-motion: reduce) {
      .product-media:has(> img[data-product-image]:not(.is-loaded))::after { animation: none; }
      .product-media img[data-product-image] { transition: none; }
    }
    /* fm55431 — premium product presentation. A soft studio-light
       highlight from the top + a grounding shadow under the product make
       EVERY photo read as a professional floating product shot — whether
       it is on a white background or a transparent cutout — without ever
       touching the real image. Works over the per-category tint below. */
    .product-media::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(118% 82% at 50% 16%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.35) 42%, rgba(255,255,255,0) 68%);
    }
    /* fm55424 — "صورة توضيحية" honesty ribbon on AI-illustrated images.
       The correct name + strength are always shown in the card body
       below; this only flags that the picture is representative. */
    .product-illus-ribbon {
      position: absolute;
      top: 8px;
      inset-inline-start: 8px;
      z-index: 3;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: .68rem;
      font-weight: 800;
      color: #f4e9d4;
      background: rgba(9, 29, 56, .72);
      border: 1px solid rgba(184, 147, 90, .6);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      pointer-events: none;
    }
    .product-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 15%;
      position: relative;
      z-index: 2;
      /* fm55431 — soft depth shadow lifts the product off the surface */
      filter: drop-shadow(0 12px 16px rgba(13, 38, 76, .16));
      transition: transform var(--slow) var(--ease);
    }
    .product:hover .product-media img { transform: scale(1.04); }

    .product-placeholder {
      --placeholder-ink: #0d2647;
      --placeholder-soft: #e9eef5;
      width: 100%;
      height: 100%;
      min-width: 0;
      padding: clamp(14px, 8%, 24px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      text-align: center;
      color: var(--placeholder-ink);
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.82) 0 10%, transparent 11%),
        linear-gradient(145deg, #fffdf9, var(--placeholder-soft));
      isolation: isolate;
    }
    .product-placeholder[data-placeholder-kind="tube"] { --placeholder-ink: #49675d; --placeholder-soft: #e5f0eb; }
    .product-placeholder[data-placeholder-kind="capsule"] { --placeholder-ink: #294b6f; --placeholder-soft: #e5edf6; }
    .product-placeholder[data-placeholder-kind="bottle"] { --placeholder-ink: #755c32; --placeholder-soft: #f3ead8; }
    .product-placeholder[data-placeholder-kind="supplement"] { --placeholder-ink: #7b5a25; --placeholder-soft: #f4e8cf; }
    .product-placeholder[data-placeholder-kind="device"] { --placeholder-ink: #40566c; --placeholder-soft: #e8edf2; }
    .product-placeholder[data-placeholder-kind="baby-care"] { --placeholder-ink: #4c6578; --placeholder-soft: #e8f1f4; }
    .product-placeholder__icon {
      width: clamp(50px, 36%, 72px);
      aspect-ratio: 1;
      border-radius: 22px;
      display: grid;
      place-items: center;
      color: var(--placeholder-ink);
      background: rgba(255,255,255,.76);
      border: 1px solid color-mix(in srgb, var(--placeholder-ink) 18%, transparent);
      box-shadow: 0 10px 24px -20px rgba(13,38,71,.7);
    }
    .product-placeholder__icon svg { width: 68%; height: 68%; }
    .product-placeholder__eyebrow {
      margin-top: 3px;
      color: color-mix(in srgb, var(--placeholder-ink) 72%, #fff);
      font-size: .74rem;
      font-weight: 750;
    }
    .product-placeholder strong {
      max-width: 100%;
      font-size: clamp(.86rem, 1.8vw, 1rem);
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .product-placeholder small {
      max-width: 100%;
      color: color-mix(in srgb, var(--placeholder-ink) 68%, #fff);
      font-size: .76rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .product-placeholder--compact {
      padding: 4px;
      border-radius: inherit;
      background: var(--placeholder-soft);
    }
    .product-placeholder--compact .product-placeholder__icon {
      width: 82%;
      max-width: 44px;
      border: 0;
      border-radius: 10px;
      box-shadow: none;
    }

    .product-tags {
      position: absolute;
      top: var(--s-3);
      inset-inline-start: var(--s-3);
      display: flex;
      flex-direction: column;
      gap: var(--s-1);
      z-index: 2;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px var(--s-2);
      border-radius: var(--r-sm);
      font-size: var(--text-xs);
      font-weight: var(--w-bold);
      letter-spacing: .02em;
      font-family: var(--font-display);
    }
    .tag-rx {
      background: rgba(193,42,48,.10);
      color: var(--danger);
      border: 1px solid rgba(193,42,48,.18);
    }
    .tag-otc {
      background: var(--accent-soft);
      color: var(--accent);
      border: 1px solid rgba(30,138,118,.18);
    }
    .tag-discount {
      background: var(--brand);
      color: #fff;
      font-family: var(--font-display);
    }
    .tag-low {
      background: var(--warn-soft);
      color: var(--warn);
      border: 1px solid rgba(184,101,27,.2);
    }
    .tag-out {
      background: var(--surface-3);
      color: var(--fg-muted);
    }

    .product-heart {
      position: absolute;
      top: var(--s-3);
      inset-inline-end: var(--s-3);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      color: var(--fg-subtle);
      transition: all var(--quick) var(--ease);
      z-index: 2;
    }
    .product-heart:hover { color: var(--danger); border-color: var(--danger); }
    .product-heart.active { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

    .product-body {
      padding: var(--s-4);
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }
    .product-brand {
      font-size: var(--text-xs);
      font-weight: var(--w-bold);
      letter-spacing: .12em;
      color: var(--fg-subtle);
      text-transform: uppercase;
      font-family: var(--font-display);
      margin-bottom: var(--s-1);
    }
    .product-name {
      font-size: var(--text-base);
      font-weight: var(--w-bold);
      line-height: var(--lh-snug);
      color: var(--fg);
      margin: 0 0 var(--s-2);
      min-height: 2.5em;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-name__link { color: inherit; text-decoration: none; }
    .product-name__link:focus-visible {
      border-radius: 4px;
      outline: 3px solid color-mix(in srgb, var(--color-gold) 62%, transparent);
      outline-offset: 3px;
    }
    .product-meta {
      font-size: var(--text-sm);
      color: var(--fg-muted);
      margin-bottom: var(--s-3);
      min-height: 1.4em;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-rating {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-xs);
      color: var(--fg-muted);
      font-family: var(--font-display);
      margin-bottom: var(--s-3);
    }
    .product-rating .star { color: #f59e0b; }
    .product-price-row {
      display: flex;
      align-items: baseline;
      gap: var(--s-2);
      flex-wrap: wrap;
      margin-bottom: var(--s-3);
    }
    .product-price {
      font-size: var(--text-lg);
      font-weight: var(--w-extrabold);
      color: var(--fg);
      font-family: var(--font-display);
    }
    .product-price-unit {
      font-size: var(--text-xs);
      font-weight: var(--w-semibold);
      color: var(--fg-muted);
      margin-inline-start: 2px;
    }
    .product-price-old {
      font-size: var(--text-sm);
      color: var(--fg-subtle);
      text-decoration: line-through;
      font-family: var(--font-display);
    }
    .product-purchase {
      margin-top: auto;
      min-width: 0;
      min-height: 44px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 5px;
    }
    .product-add {
      width: 100%;
      padding: var(--s-2) var(--s-3);
      background: var(--surface);
      color: var(--brand);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-md);
      font-weight: var(--w-bold);
      font-size: var(--text-sm);
      transition: all var(--quick) var(--ease);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-2);
      min-height: 44px;
      height: 44px;
    }
    .product-add:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
    .product-add__icon { width: 18px; height: 18px; flex: 0 0 auto; }
    .product-add:disabled { background: var(--surface-2); color: var(--fg-disabled); border-color: var(--border); cursor: not-allowed; }
    .product-add:disabled:hover { background: var(--surface-2); color: var(--fg-disabled); }

    .product-quantity {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      display: grid;
      grid-template-columns: 44px minmax(32px, 1fr) 44px;
      align-items: stretch;
      overflow: hidden;
      color: var(--brand);
      background: #fffdf9;
      border: 1px solid rgba(13,38,71,.2);
      border-radius: var(--r-md);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }
    .product-quantity__button {
      min-width: 44px;
      min-height: 44px;
      display: grid;
      place-items: center;
      color: var(--brand);
      background: transparent;
      border: 0;
      font: 800 1.25rem/1 var(--font-display);
      transition: color var(--quick) ease, background var(--quick) ease, transform var(--quick) ease;
    }
    .product-quantity__button:hover { color: #fff; background: var(--brand); }
    .product-quantity__button:active { transform: scale(.92); }
    .product-quantity__button:disabled { color: var(--fg-disabled); background: var(--surface-2); cursor: not-allowed; }
    .product-quantity__value {
      min-width: 0;
      display: grid;
      place-items: center;
      color: var(--brand);
      background: rgba(255,255,255,.72);
      border-inline: 1px solid rgba(13,38,71,.1);
      font: 850 var(--text-base)/1 var(--font-display);
      font-variant-numeric: tabular-nums;
    }
    .product-quantity__note {
      min-height: 0;
      margin: 0;
      color: #806235;
      font-size: var(--text-sm);
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
    }
    .product-quantity__note:empty { display: none; }

    @keyframes product-card-success {
      0%, 100% { box-shadow: 0 1px 3px rgba(10,14,26,.04); }
      45% { border-color: rgba(184,147,90,.72); box-shadow: 0 12px 30px -18px rgba(184,147,90,.9); }
    }
    @keyframes product-quantity-pop {
      0% { transform: scale(.88); opacity: .65; }
      100% { transform: scale(1); opacity: 1; }
    }
    .product.is-cart-feedback { animation: product-card-success .65s ease both; }
    .product-quantity__value.is-updated { animation: product-quantity-pop .2s ease-out both; }

    /* List view body */
    .grid-products.list-view .product-name { font-size: var(--text-md); }
    .grid-products.list-view .product-meta { font-size: var(--text-sm); }
    .grid-products.list-view .product-add { width: auto; padding: 0 var(--s-5); }

    /* Skeleton loader */
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: .6; }
    }
    .skel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      animation: pulse 1.5s var(--ease) infinite;
    }
    .skel-media {
      aspect-ratio: 1/1;
      background: var(--surface-2);
    }
    .skel-body { padding: var(--s-4); }
    .skel-line { height: 12px; background: var(--surface-3); border-radius: var(--r-sm); margin-bottom: var(--s-2); }
    .skel-line.short { width: 40%; }
    .skel-line.medium { width: 70%; }

    /* Empty state */
    .empty-state {
      grid-column: 1 / -1;
      text-align: center;
      padding: var(--s-12) var(--s-6);
      background: var(--surface);
      border: 1px dashed var(--border-strong);
      border-radius: var(--r-lg);
    }
    .empty-state-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto var(--s-4);
      border-radius: 50%;
      background: var(--surface-2);
      color: var(--fg-subtle);
      display: grid;
      place-items: center;
    }
    .empty-state h3 { font-size: var(--text-md); margin-bottom: var(--s-2); }
    .empty-state p { color: var(--fg-muted); margin: 0 0 var(--s-4); }

    /* ───────── TRUST STRIP ───────── */
    .trust-strip {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-6);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s-5);
    }
    @media (max-width: 880px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .trust-strip { grid-template-columns: 1fr; } }
    .trust-item {
      display: flex;
      gap: var(--s-3);
      align-items: flex-start;
    }
    .trust-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: var(--r-md);
      background: var(--accent-soft);
      color: var(--accent);
      display: grid;
      place-items: center;
    }
    .trust-item strong { display: block; font-size: var(--text-base); font-weight: var(--w-bold); margin-bottom: 2px; }
    .trust-item span { font-size: var(--text-sm); color: var(--fg-muted); }

    /* ───────── PRESCRIPTION ───────── */
    .rx {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
    }
    @media (max-width: 880px) { .rx { grid-template-columns: 1fr; } }

    .rx-side {
      padding: var(--s-8);
      background: var(--brand);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .rx-side::after {
      content: '';
      position: absolute;
      bottom: -40%;
      inset-inline-end: -20%;
      width: 70%;
      aspect-ratio: 1/1;
      background: radial-gradient(circle, rgba(30,138,118,.4), transparent 60%);
      pointer-events: none;
    }
    .rx-side .eyebrow {
      color: var(--accent-soft);
      margin-bottom: var(--s-4);
    }
    .rx-side .eyebrow::before { background: var(--accent-soft); }
    .rx-side h2 {
      font-size: var(--text-2xl);
      color: #fff;
      line-height: var(--lh-tight);
      margin-bottom: var(--s-4);
    }
    .rx-side h2 em {
      font-style: normal;
      color: var(--accent-soft);
    }
    .rx-side > p {
      opacity: .85;
      font-size: var(--text-base);
      margin-bottom: var(--s-6);
      position: relative;
    }
    .rx-side ul {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
    }
    .rx-side li {
      display: flex;
      gap: var(--s-3);
      align-items: flex-start;
      padding: var(--s-2) 0;
      font-size: var(--text-base);
    }
    .rx-side li svg { color: var(--accent-soft); flex-shrink: 0; margin-top: 4px; }

    .rx-form { padding: var(--s-8); }
    .rx-form h3 { margin-bottom: var(--s-1); }
    .rx-form > p { color: var(--fg-muted); font-size: var(--text-base); margin-bottom: var(--s-5); }

    .dropzone {
      border: 2px dashed var(--border-strong);
      border-radius: var(--r-lg);
      padding: var(--s-8) var(--s-5);
      text-align: center;
      background: var(--surface-2);
      transition: all var(--quick) var(--ease);
      cursor: pointer;
      margin-bottom: var(--s-4);
    }
    .dropzone:hover, .dropzone.dragover {
      border-color: var(--accent);
      background: var(--accent-soft);
    }
    .dropzone-icon {
      width: 56px;
      height: 56px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      display: grid;
      place-items: center;
      color: var(--accent);
      margin: 0 auto var(--s-3);
    }
    .dropzone p { margin: 0; }
    .dropzone .main { font-weight: var(--w-bold); font-size: var(--text-base); color: var(--fg); margin-bottom: var(--s-1); }
    .dropzone .sub { font-size: var(--text-sm); color: var(--fg-muted); }

    .dz-files {
      margin-top: var(--s-3);
      display: grid;
      gap: var(--s-2);
    }
    .dz-file {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      padding: var(--s-3);
      background: var(--surface);
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      text-align: start;
    }
    .dz-thumb {
      width: 40px;
      height: 40px;
      border-radius: var(--r-sm);
      object-fit: cover;
      background: var(--surface-2);
      flex-shrink: 0;
    }
    .dz-file-icon {
      width: 40px;
      height: 40px;
      background: var(--brand-soft);
      color: var(--brand);
      border-radius: var(--r-md);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .dz-file .meta { flex: 1; min-width: 0; }
    .dz-file .meta strong {
      display: block;
      font-size: var(--text-sm);
      font-weight: var(--w-bold);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--fg);
    }
    .dz-file .meta span { font-size: var(--text-xs); color: var(--fg-muted); }
    .dz-rm {
      width: 28px;
      height: 28px;
      border-radius: var(--r-sm);
      color: var(--fg-subtle);
      transition: all var(--quick) var(--ease);
      display: grid;
      place-items: center;
    }
    .dz-rm:hover { background: var(--danger-soft); color: var(--danger); }

    .rx-note {
      background: var(--warn-soft);
      border-radius: var(--r-md);
      padding: var(--s-3) var(--s-4);
      font-size: var(--text-sm);
      color: var(--warn);
      margin-bottom: var(--s-5);
      display: flex;
      gap: var(--s-3);
      align-items: flex-start;
      line-height: var(--lh-normal);
    }
    .rx-note svg { flex-shrink: 0; margin-top: 2px; }

    /* Form fields */
    .field { margin-bottom: var(--s-4); }
    .field label {
      display: block;
      font-weight: var(--w-semibold);
      font-size: var(--text-sm);
      color: var(--fg-soft);
      margin-bottom: var(--s-2);
    }
    .input, .field select, .field textarea {
      width: 100%;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: var(--r-md);
      padding: var(--s-3) var(--s-4);
      font-size: var(--text-base);
      color: var(--fg);
      transition: all var(--quick) var(--ease);
      font-family: inherit;
    }
    .input:hover { border-color: var(--border-strong); }
    .input:focus, .field select:focus, .field textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: var(--shadow-focus);
    }
    .field textarea { min-height: 88px; resize: vertical; }
    .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
    @media (max-width: 480px) { .field-grid { grid-template-columns: 1fr; } }

    /* ───────── ALERTS ───────── */
    .alert {
      padding: var(--s-3) var(--s-4);
      border-radius: var(--r-md);
      font-weight: var(--w-medium);
      font-size: var(--text-base);
      margin: var(--s-3) 0;
      line-height: var(--lh-normal);
      display: flex;
      gap: var(--s-3);
      align-items: flex-start;
    }
    .alert-info { background: var(--info-soft); color: var(--info); }
    .alert-ok { background: var(--accent-soft); color: var(--accent-hover); }
    .alert-warn { background: var(--warn-soft); color: var(--warn); }
    .alert-err { background: var(--danger-soft); color: var(--danger); }
    .alert svg { flex-shrink: 0; margin-top: 2px; }

    .sev { display: inline-block; padding: 2px var(--s-2); border-radius: var(--r-sm); font-weight: var(--w-bold); font-size: var(--text-xs); }
    .sev-fatal { background: #450a0a; color: #fff; }
    .sev-critical { background: var(--danger); color: #fff; }
    .sev-major { background: var(--warn); color: #fff; }
    .sev-minor { background: var(--warn-soft); color: var(--warn); }
    .sev-info { background: var(--info-soft); color: var(--info); }

    .finding {
      padding: var(--s-3);
      border-radius: var(--r-md);
      background: var(--surface-2);
      border: 1px solid var(--border);
      margin-bottom: var(--s-2);
    }
    .finding strong { display: block; margin: var(--s-1) 0; color: var(--fg); font-size: var(--text-base); }

    /* Contextual confirmation card used only after placing this order. */
    .order-success-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-6);
    }

    /* ───────── FAQ ───────── */
    .faq-list { display: grid; gap: var(--s-3); }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .faq-item summary {
      padding: var(--s-4) var(--s-5);
      font-weight: var(--w-bold);
      font-size: var(--text-base);
      color: var(--fg);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      list-style: none;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      font-size: var(--text-xl);
      color: var(--fg-subtle);
      transition: transform var(--quick) var(--ease);
    }
    .faq-item[open] summary::after { content: '−'; }
    .faq-item .answer {
      padding: 0 var(--s-5) var(--s-5);
      color: var(--fg-muted);
      font-size: var(--text-base);
      line-height: var(--lh-relaxed);
    }

    /* ───────── CART DRAWER ───────── */
    .mask {
      position: fixed;
      inset: 0;
      background: rgba(10,14,26,.5);
      z-index: 150;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--base) var(--ease);
    }
    .mask.open { opacity: 1; pointer-events: all; }
    .drawer {
      position: fixed;
      top: 0;
      bottom: 0;
      inset-inline-end: 0;
      width: 420px;
      max-width: 95vw;
      background: var(--bg);
      box-shadow: var(--shadow-lg);
      z-index: 160;
      display: flex;
      flex-direction: column;
      transform: translateX(-100%);
      transition: transform var(--slow) var(--ease);
    }
    [dir="ltr"] .drawer { transform: translateX(100%); }
    .drawer.open { transform: translateX(0); }
    .drawer-head {
      padding: var(--s-4) var(--s-5);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: var(--s-3);
      background: var(--surface);
    }
    .drawer-head h3 { margin: 0; font-size: var(--text-base); font-weight: var(--w-bold); flex: 1; }
    .drawer-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      color: var(--fg-soft);
      display: grid;
      place-items: center;
      transition: background var(--quick) var(--ease);
    }
    .drawer-close:hover { background: var(--surface-2); }
    .drawer-body { flex: 1; overflow-y: auto; padding: var(--s-4); }
    .drawer-foot { padding: var(--s-4) var(--s-5); background: var(--surface); border-top: 1px solid var(--border); }

    .cart-line {
      display: flex;
      gap: var(--s-3);
      padding: var(--s-3);
      background: var(--surface);
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      margin-bottom: var(--s-2);
    }
    .cart-line .img {
      width: 56px;
      height: 56px;
      border-radius: var(--r-md);
      object-fit: contain;
      background: var(--surface-2);
      padding: 4px;
      flex-shrink: 0;
      border: 1px solid var(--border);
    }
    .cart-line .info { flex: 1; min-width: 0; }
    .cart-line .info strong {
      display: block;
      font-size: var(--text-sm);
      font-weight: var(--w-bold);
      line-height: var(--lh-snug);
      margin-bottom: 2px;
    }
    .cart-line .info .priceline { font-size: var(--text-xs); color: var(--fg-muted); }
    .qty {
      display: inline-flex;
      align-items: center;
      background: var(--surface-2);
      border-radius: var(--r-md);
      padding: 2px;
      margin-top: var(--s-2);
      border: 1px solid var(--border);
    }
    .qty button {
      width: 26px;
      height: 26px;
      border-radius: var(--r-sm);
      font-weight: var(--w-bold);
      color: var(--fg-soft);
      transition: background var(--quick) var(--ease);
    }
    .qty button:hover { background: var(--surface); }
    .qty strong { min-width: 26px; text-align: center; font-size: var(--text-sm); font-family: var(--font-display); }
    .rm {
      background: transparent;
      color: var(--fg-subtle);
      padding: var(--s-1);
      font-size: var(--text-sm);
    }
    .rm:hover { color: var(--danger); }

    .totals-row {
      display: flex;
      justify-content: space-between;
      padding: var(--s-1) 0;
      font-size: var(--text-base);
      color: var(--fg-muted);
    }
    .totals-row.grand {
      padding-top: var(--s-3);
      margin-top: var(--s-2);
      border-top: 1px solid var(--border);
      font-size: var(--text-md);
      font-weight: var(--w-extrabold);
      color: var(--fg);
    }
    .totals-row.grand strong {
      color: var(--brand);
      font-family: var(--font-display);
    }
    .totals-row strong { font-family: var(--font-display); }

    .empty {
      text-align: center;
      padding: var(--s-12) var(--s-5);
      color: var(--fg-muted);
    }
    .empty .emoji-wrap {
      width: 64px;
      height: 64px;
      margin: 0 auto var(--s-3);
      border-radius: 50%;
      background: var(--surface-2);
      color: var(--fg-subtle);
      display: grid;
      place-items: center;
    }
    .empty h4 { margin-bottom: var(--s-2); }

    /* ───────── STICKY MOBILE CART BAR ───────── */
    .mobile-cart-bar {
      display: none;
      position: fixed;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: var(--s-3) var(--s-4);
      box-shadow: var(--shadow-lg);
      z-index: 70;
    }
    .mobile-cart-trigger {
      width: 100%;
      background: var(--brand);
      color: #fff;
      padding: var(--s-3) var(--s-4);
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      gap: var(--s-3);
      font-weight: var(--w-bold);
    }
    .mobile-cart-trigger:hover { background: var(--brand-hover); }
    .m-icon {
      position: relative;
      display: grid;
      place-items: center;
    }
    .m-count {
      position: absolute;
      top: -6px;
      inset-inline-end: -6px;
      background: var(--accent);
      min-width: 16px;
      height: 16px;
      border-radius: var(--r-full);
      font-size: var(--text-xs);
      padding: 0 4px;
      display: grid;
      place-items: center;
      font-family: var(--font-display);
    }
    .m-text { display: flex; flex-direction: column; align-items: flex-start; line-height: var(--lh-tight); }
    .m-text small { opacity: .8; font-size: var(--text-xs); font-weight: var(--w-medium); }
    .m-price {
      margin-inline-start: auto;
      font-family: var(--font-display);
    }
    @media (max-width: 768px) {
      .mobile-cart-bar.visible { display: block; }
      body.cart-bar-visible { padding-bottom: 80px; }
    }

    /* ───────── FOOTER ───────── */
    .footer {
      background: var(--brand);
      color: rgba(255,255,255,.75);
      padding: var(--s-16) 0 var(--s-6);
      margin-top: var(--s-16);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: var(--s-8);
      margin-bottom: var(--s-10);
    }
    @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
    @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
    .footer h4 {
      color: #fff;
      font-size: var(--text-sm);
      font-weight: var(--w-bold);
      letter-spacing: .04em;
      margin-bottom: var(--s-4);
    }
    .footer ul { list-style: none; padding: 0; margin: 0; }
    .footer li { padding: var(--s-1) 0; font-size: var(--text-base); }
    .footer li a { transition: color var(--quick) var(--ease); }
    .footer li a:hover { color: #fff; }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      margin-bottom: var(--s-4);
    }
    .footer-brand .brand-mark { background: rgba(255,255,255,.12); }
    .footer-brand strong { color: #fff; font-size: var(--text-base); font-weight: var(--w-extrabold); }
    .footer-brand small { color: rgba(255,255,255,.55); font-size: var(--text-xs); letter-spacing: .12em; font-family: var(--font-display); font-weight: var(--w-semibold); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: var(--s-4);
      text-align: center;
      font-size: var(--text-sm);
      color: rgba(255,255,255,.5);
    }

    /* ───────── UTILS ───────── */
    .hide { display: none; }
    .text-center { text-align: center; }
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* ───────── ROUND 2: New components ───────── */

    /* Hero v2 — photo-driven, no floating-card pattern */
    .hero-v2 { padding: var(--s-12) 0 var(--s-10); background: var(--surface); border-bottom: 1px solid var(--border); }
    .hero-v2-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-12); align-items: center; }
    @media (max-width: 880px) { .hero-v2-grid { grid-template-columns: 1fr; gap: var(--s-8); } }
    .hero-v2 h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: var(--w-extrabold); line-height: var(--lh-tight); letter-spacing: -.025em; margin: var(--s-4) 0 var(--s-4); }
    .hero-v2 h1 em { font-style: normal; color: var(--accent); }
    .hero-v2 .lede { margin-bottom: var(--s-6); max-width: 52ch; }
    .hero-v2-cta { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

    .hero-photo {
      position: relative;
      aspect-ratio: 5/6;
      border-radius: var(--r-xl);
      overflow: hidden;
      background: var(--surface-2);
    }
    .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
    .hero-photo-overlay {
      position: absolute;
      inset: auto var(--s-4) var(--s-4) var(--s-4);
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(20px);
      border-radius: var(--r-lg);
      padding: var(--s-4);
      display: flex; align-items: center; gap: var(--s-3);
      box-shadow: var(--shadow-md);
    }
    .hero-photo-overlay .avatar {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--accent-soft); color: var(--accent);
      display: grid; place-items: center;
      font-weight: var(--w-extrabold); font-size: var(--text-md); flex-shrink: 0;
      background-size: cover; background-position: center;
    }
    .hero-photo-overlay .meta strong { display: block; font-size: var(--text-base); font-weight: var(--w-extrabold); color: var(--fg); }
    .hero-photo-overlay .meta span { display: block; font-size: var(--text-xs); color: var(--fg-muted); }
    .hero-photo-overlay .pulse {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px rgba(30,138,118,.2);
      margin-inline-start: auto;
      flex-shrink: 0;
      animation: pulseDot 2s infinite;
    }
    @keyframes pulseDot {
      0%, 100% { box-shadow: 0 0 0 3px rgba(30,138,118,.2); }
      50% { box-shadow: 0 0 0 6px rgba(30,138,118,.05); }
    }

    /* Rx Fast Lane — 3 entry paths */
    .rx-paths {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-4);
    }
    @media (max-width: 880px) { .rx-paths { grid-template-columns: 1fr; gap: var(--s-3); } }
    .rx-path {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-6);
      text-align: start;
      display: flex; flex-direction: column; gap: var(--s-3);
      transition: all var(--base) var(--ease);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .rx-path:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .rx-path-icon {
      width: 44px; height: 44px;
      border-radius: var(--r-md);
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .rx-path-icon.upload { background: var(--accent-soft); color: var(--accent); }
    .rx-path-icon.camera { background: var(--brand-soft); color: var(--brand); }
    .rx-path-icon.whatsapp { background: #dcf8c6; color: #128c7e; }
    .rx-path h3 { font-size: var(--text-base); font-weight: var(--w-extrabold); margin: 0; }
    .rx-path p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--lh-normal); }
    .rx-path-arrow {
      display: inline-flex; align-items: center; gap: var(--s-1);
      font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--accent);
      margin-top: var(--s-1);
    }
    .rx-path.camera .rx-path-arrow { color: var(--brand); }
    .rx-path.whatsapp .rx-path-arrow { color: #128c7e; }
    .rx-path-badge {
      position: absolute; top: var(--s-3); inset-inline-end: var(--s-3);
      padding: 2px var(--s-2);
      background: var(--accent);
      color: #fff;
      font-size: var(--text-xs); font-weight: var(--w-extrabold);
      border-radius: var(--r-sm);
      letter-spacing: .05em;
    }

    /* Section subtle */
    .section-tight { padding: var(--s-8) 0; }

    /* Pharmacist banner */
    .pharm-banner {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: var(--s-5);
      display: flex;
      align-items: center;
      gap: var(--s-5);
      flex-wrap: wrap;
    }
    .pharm-banner-photo {
      width: 64px; height: 64px;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      background: var(--accent-soft);
      display: grid; place-items: center;
      color: var(--accent);
      font-weight: var(--w-extrabold);
      font-size: var(--text-lg);
    }
    .pharm-banner-photo img { width: 100%; height: 100%; object-fit: cover; }
    .pharm-banner-info { flex: 1; min-width: 200px; }
    .pharm-banner-info .live {
      display: inline-flex; align-items: center; gap: var(--s-2);
      padding: 3px var(--s-2);
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: var(--r-sm);
      font-size: var(--text-xs);
      font-weight: var(--w-extrabold);
      letter-spacing: .05em;
      text-transform: uppercase;
      font-family: var(--font-display);
      margin-bottom: var(--s-2);
    }
    .pharm-banner-info .live::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulseDot 2s infinite;
    }
    .pharm-banner-info strong { display: block; font-size: var(--text-base); font-weight: var(--w-extrabold); color: var(--fg); }
    .pharm-banner-info span { display: block; font-size: var(--text-sm); color: var(--fg-muted); margin-top: 2px; }
    .pharm-banner-stats {
      display: flex; gap: var(--s-5);
      padding-inline-start: var(--s-5);
      border-inline-start: 1px solid var(--border);
    }
    @media (max-width: 600px) {
      .pharm-banner-stats { width: 100%; padding-inline-start: 0; border-inline-start: none; padding-top: var(--s-4); border-top: 1px solid var(--border); }
    }
    .pharm-stat strong { display: block; font-size: var(--text-md); font-weight: var(--w-extrabold); color: var(--brand); font-family: var(--font-display); }
    .pharm-stat span { font-size: var(--text-xs); color: var(--fg-muted); }

    /* Product card v2 — pharmacy-specific */
    .product-meta-row {
      display: flex; align-items: center; gap: var(--s-2);
      font-size: var(--text-xs); color: var(--fg-muted);
      margin-bottom: var(--s-3);
      flex-wrap: wrap;
    }
    .product-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
    .product-meta-row .pick {
      display: inline-flex; align-items: center; gap: 3px;
      color: var(--accent); font-weight: var(--w-bold);
    }

    /* ═══════════════ R3: VIBRANT COLOR ZONES ═══════════════ */
    /* Each section becomes a "room" with its own warmth */

    .body-bg { background: var(--bg); }

    /* Hero room — soft sunrise gradient */
    .hero-v2 {
      border-bottom: none !important;
      position: relative;
      overflow: hidden;
    }
    .hero-v2::before {
      content: '';
      position: absolute;
      top: -20%;
      inset-inline-end: -10%;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(219,39,119,.08), transparent 60%);
      pointer-events: none;
    }
    .hero-v2::after {
      content: '';
      position: absolute;
      bottom: -20%;
      inset-inline-start: -10%;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(5,150,105,.08), transparent 60%);
      pointer-events: none;
    }
    .hero-v2 .container { position: relative; z-index: 1; }
    .hero-v2 .eyebrow {
      background: rgba(255,255,255,.7);
      backdrop-filter: blur(10px);
      padding: 6px var(--s-3);
      border-radius: var(--r-full);
      border: 1px solid rgba(255,255,255,.8);
    }
    .hero-photo-overlay {
    }

    /* Rx Fast Lane room — clean white with COLORFUL cards */
    #rx-fast-lane {
      background: var(--surface);
      position: relative;
    }
    /* Wave divider on top */
    #rx-fast-lane::before {
      content: '';
      position: absolute;
      top: -1px; left: 0; right: 0;
      height: 40px;
      background: var(--surface);
      mask: radial-gradient(40px at 50% 0, transparent 39px, #000 40px);
      -webkit-mask: radial-gradient(40px at 50% 0, transparent 39px, #000 40px);
    }

    /* Vibrant Rx Path cards */
    .rx-path:nth-child(1) {
      background: var(--mint-bg);
      border-color: var(--mint-bg-2);
    }
    .rx-path:nth-child(1):hover {
      border-color: var(--mint);
      background: var(--mint-bg-2);
    }
    .rx-path:nth-child(2) {
      background: var(--sky-bg);
      border-color: var(--sky-bg-2);
    }
    .rx-path:nth-child(2):hover {
      border-color: var(--sky);
      background: var(--sky-bg-2);
    }
    .rx-path:nth-child(3) {
      background: #f0fdf4;
      border-color: #dcfce7;
    }
    .rx-path:nth-child(3):hover {
      border-color: #25d366;
      background: #dcfce7;
    }
    .rx-path-icon.upload { background: var(--mint-bg-2); color: var(--mint-deep); }
    .rx-path-icon.camera { background: var(--sky-bg-2); color: var(--sky-deep); }
    .rx-path-icon.whatsapp { background: #dcfce7; color: #128c7e; }
    .rx-path:nth-child(1) .rx-path-arrow { color: var(--mint-deep); }
    .rx-path:nth-child(2) .rx-path-arrow { color: var(--sky-deep); }
    .rx-path:nth-child(3) .rx-path-arrow { color: #128c7e; }
    .rx-path-badge {
      background: var(--mint) !important;
      box-shadow: 0 4px 12px rgba(5,150,105,.3);
    }

    /* Pharmacist banner — soft sky background */
    .pharm-banner {
      background: var(--pharm-gradient) !important;
      border-color: var(--sky-bg-2) !important;
      padding: var(--s-6) !important;
    }
    .pharm-banner-info .live {
      background: var(--mint-bg-2) !important;
      color: var(--mint-deep) !important;
    }
    .pharm-banner-info .live::before { background: var(--mint) !important; }
    .pharm-banner-stats { border-inline-start-color: var(--sky-bg-2) !important; }

    /* Categories room — soft lavender */
    .cats-room {
      background: var(--cat-gradient);
    }

    /* Category bubbles — each unique color */
    .cat[data-cat=""]      .cat-icon { background: var(--sunshine-bg-2); color: var(--sunshine-deep); }
    .cat[data-cat="otc"]   .cat-icon { background: var(--mint-bg-2); color: var(--mint-deep); }
    .cat[data-cat="rx"]    .cat-icon { background: var(--blush-bg-2); color: var(--blush-deep); }
    .cat[data-cat="vitamins"] .cat-icon { background: var(--peach-bg-2); color: var(--peach-deep); }
    .cat[data-cat="women"] .cat-icon { background: var(--blush-bg-2); color: var(--blush-deep); }
    .cat[data-cat="men"]   .cat-icon { background: var(--brand-soft, #e5e7eb); color: var(--brand); }
    .cat[data-cat="hair"]  .cat-icon { background: var(--peach-bg-2); color: var(--peach-deep); }
    .cat[data-cat="skin"]  .cat-icon { background: var(--lavender-bg-2); color: var(--lavender-deep); }
    .cat[data-cat="oral"]  .cat-icon { background: var(--sky-bg-2); color: var(--sky-deep); }
    .cat[data-cat="eye"]   .cat-icon { background: var(--mint-bg-2); color: var(--mint-deep); }
    .cat[data-cat="baby"]  .cat-icon { background: var(--sky-bg-2); color: var(--sky-deep); }
    .cat[data-cat="devices"] .cat-icon { background: var(--surface-3); color: var(--brand); }
    .cat[data-cat="first-aid"] .cat-icon { background: #fff; color: #ce1126; border: 1.5px solid rgba(206,17,38,.18); }
    .cat[data-cat="first-aid"] .cat-icon svg { filter: drop-shadow(0 1px 1px rgba(206,17,38,.25)); }

    .cat {
      background: var(--surface) !important;
      border-color: var(--border) !important;
    }
    .cat:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-md) !important; }
    .cat.active {
      background: var(--surface) !important;
      border-color: var(--brand) !important;
      box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-md) !important;
    }
    .cat.active .cat-icon { transform: scale(1.05); }

    /* Catalog room */
    #catalog {
      background: var(--bg);
    }

    /* Product card — premium color hint per category */
    .product[data-cat="otc"] .product-media { background: var(--mint-bg); }
    .product[data-cat="rx"] .product-media { background: var(--blush-bg); }
    .product[data-cat="vitamins"] .product-media { background: var(--peach-bg); }
    .product[data-cat="women"] .product-media { background: var(--blush-bg); }
    .product[data-cat="men"] .product-media { background: var(--surface-2); }
    .product[data-cat="hair"] .product-media { background: var(--peach-bg); }
    .product[data-cat="skin"] .product-media { background: var(--lavender-bg); }
    .product[data-cat="oral"] .product-media { background: var(--sky-bg); }
    .product[data-cat="eye"] .product-media { background: var(--mint-bg); }
    .product[data-cat="baby"] .product-media { background: var(--sky-bg); }
    .product[data-cat="devices"] .product-media { background: var(--surface-2); }
    .product[data-cat="first-aid"] .product-media { background: #fef2f2; }

    /* Sidebar — soft cream */
    .sidebar { background: var(--surface) !important; }

    /* Rx form room — soft blush */
    #rx-upload {
      background: var(--rx-gradient);
      position: relative;
    }
    /* Decorative blob */
    #rx-upload::before {
      content: '';
      position: absolute;
      top: 10%;
      inset-inline-end: 5%;
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(234,88,12,.08), transparent 60%);
      pointer-events: none;
    }
    .rx { box-shadow: 0 24px 60px rgba(219,39,119,.08); position: relative; z-index: 1; }
    .rx-side {
      background: linear-gradient(160deg, var(--brand), var(--brand-hover) 60%, var(--lavender-deep)) !important;
    }

    /* Hero CTA pop */
    .btn-primary {
      background: linear-gradient(135deg, var(--accent) 0%, var(--mint-deep) 100%) !important;
      box-shadow: 0 8px 20px rgba(5,150,105,.25) !important;
    }
    .btn-primary:hover {
      box-shadow: 0 12px 28px rgba(5,150,105,.35) !important;
      transform: translateY(-1px);
    }

    /* Better section spacing rhythm */
    .section-tight {
      padding: var(--s-12) 0 !important;
    }

    /* Add personality to product cards */
    .product:hover .product-media {
      filter: brightness(1.02);
    }

    /* Tag colors more vibrant */
    .tag-rx {
      background: var(--blush-bg-2) !important;
      color: var(--blush-deep) !important;
      border: 1px solid rgba(219,39,119,.3) !important;
    }
    .tag-otc {
      background: var(--mint-bg-2) !important;
      color: var(--mint-deep) !important;
      border: 1px solid rgba(5,150,105,.3) !important;
    }
    .tag-discount {
      background: linear-gradient(135deg, var(--blush), var(--blush-deep)) !important;
      color: #fff !important;
      box-shadow: 0 4px 10px rgba(219,39,119,.3);
    }
    .tag-low {
      background: var(--peach-bg-2) !important;
      color: var(--peach-deep) !important;
      border: 1px solid rgba(234,88,12,.3) !important;
    }

    /* Pharmacist photo border ring */
    .pharm-banner-photo {
      box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--mint);
    }

    /* Sticky cart bar more vibrant */
    .mobile-cart-trigger {
      background: linear-gradient(135deg, var(--accent), var(--mint-deep)) !important;
      box-shadow: 0 8px 24px rgba(5,150,105,.4);
    }

    /* Filter chips vibrant */
    .chip {
      background: var(--mint-bg-2) !important;
      color: var(--mint-deep) !important;
    }

    /* Section headings ─ bigger breathing */
    .section-head { margin-bottom: var(--s-10) !important; }
    @media (max-width: 768px) { .section-head { } }

    /* ═══════════════ R4: COMPOSED RHYTHM + MOTION + DEPTH ═══════════════ */

    /* Mesh gradient hero — magical layered radial blooms */
    .hero-v2 {
      background:
        radial-gradient(60% 80% at 12% 8%, rgba(219,39,119,.14), transparent 60%),
        radial-gradient(50% 70% at 92% 14%, rgba(234,88,12,.12), transparent 60%),
        radial-gradient(55% 75% at 90% 95%, rgba(37,99,235,.10), transparent 60%),
        radial-gradient(60% 70% at 8% 92%, rgba(5,150,105,.10), transparent 60%),
        radial-gradient(45% 50% at 50% 50%, rgba(124,58,237,.06), transparent 60%),
        #fefcfb !important;
    }
    .hero-v2::before, .hero-v2::after { display: none; }

    /* HERO — precise vertical rhythm */
    .hero-v2 .container { position: relative; z-index: 2; }

    .hero-v2 .eyebrow {
      background: rgba(255,255,255,.85) !important;
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      padding: 7px 14px !important;
      border-radius: var(--r-full) !important;
      border: 1px solid rgba(255,255,255,.9) !important;
      box-shadow: 0 2px 8px rgba(10,14,26,.04), inset 0 1px 0 rgba(255,255,255,.6);
      color: var(--brand) !important;
      font-size: var(--text-xs);
      letter-spacing: .06em;
    }
    .hero-v2 .eyebrow::before {
      background: var(--mint);
      box-shadow: 0 0 0 3px rgba(5,150,105,.2);
    }

    /* Two-tier H1 with proper hierarchy */
    .hero-v2 h1 {
      margin: var(--s-5) 0 var(--s-5) !important;
      font-weight: var(--w-extrabold);
      color: var(--brand) !important;
    }
    .hero-v2 h1 em {
      display: block;
      margin-top: var(--s-3);
      font-size: var(--text-xs);
      font-weight: var(--w-bold);
      letter-spacing: -.02em;
      line-height: var(--lh-snug);
      color: var(--mint-deep) !important;
      font-style: normal;
    }

    .hero-v2 .lede {
      margin-top: 0 !important;
      margin-bottom: var(--s-8) !important;
      font-size: var(--text-md);
      line-height: var(--lh-relaxed);
      color: var(--fg-soft);
      max-width: 52ch;
    }
    .hero-v2 .lede strong { color: var(--brand); font-weight: var(--w-bold); }

    .hero-v2-cta {
      display: flex;
      gap: var(--s-3);
      align-items: center;
      flex-wrap: wrap;
    }
    .hero-v2-cta .btn-primary {
      padding: 0 var(--s-7, 28px);
      height: 52px;
      font-size: var(--text-base);
      letter-spacing: -.01em;
    }
    .hero-v2-cta .btn-ghost {
      padding: 0 var(--s-3);
      height: 52px;
      background: transparent !important;
      border: none !important;
      color: var(--brand) !important;
      font-weight: var(--w-bold);
    }
    .hero-v2-cta .btn-ghost:hover {
      color: var(--brand-hover) !important;
      transform: translateX(-3px);
    }
    [dir="rtl"] .hero-v2-cta .btn-ghost:hover { transform: translateX(3px); }

    /* Hero photo — magazine cover treatment */
    .hero-photo {
      box-shadow:
        0 30px 60px -20px rgba(10,14,26,.25),
        0 18px 36px -18px rgba(219,39,119,.18),
        inset 0 0 0 1px rgba(255,255,255,.5);
      border-radius: 28px !important;
      transform: rotate(-1.5deg);
      transition: transform var(--slow) var(--ease);
    }
    .hero-photo:hover { transform: rotate(0deg) translateY(-4px); }
    .hero-photo img {
      border-radius: 28px;
      transition: transform var(--slow) var(--ease);
    }

    /* Refined glass overlay — like an Apple watch face */
    .hero-photo-overlay {
      inset: auto var(--s-4) var(--s-4) var(--s-4) !important;
      background: rgba(255,255,255,.92) !important;
      backdrop-filter: blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
      padding: var(--s-3) var(--s-4) !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255,255,255,.7) !important;
      box-shadow:
        0 20px 48px rgba(10,14,26,.18),
        inset 0 1px 0 rgba(255,255,255,.7) !important;
      display: grid !important;
      grid-template-columns: auto 1fr auto;
      gap: var(--s-3);
      align-items: center;
    }
    .hero-photo-overlay .avatar {
      width: 44px !important;
      height: 44px !important;
      background: linear-gradient(135deg, var(--mint), var(--mint-deep)) !important;
      color: #fff !important;
      box-shadow:
        0 6px 14px rgba(5,150,105,.35),
        inset 0 1px 0 rgba(255,255,255,.25),
        0 0 0 3px #fff,
        0 0 0 4px rgba(5,150,105,.3);
      font-weight: var(--w-extrabold);
    }
    .hero-photo-overlay .meta strong {
      font-weight: var(--w-extrabold);
      color: var(--brand) !important;
      letter-spacing: -.01em;
      line-height: var(--lh-tight);
    }
    .hero-photo-overlay .meta span {
      color: var(--fg-muted) !important;
      letter-spacing: .01em;
    }
    .hero-photo-overlay .pulse {
      width: 9px !important;
      height: 9px !important;
      background: var(--mint) !important;
      box-shadow: 0 0 0 4px rgba(5,150,105,.18) !important;
    }

    /* Floating mini-stat near photo (extra depth) */
    .hero-floater {
      position: absolute;
      background: #fff;
      border-radius: 14px;
      padding: var(--s-3) var(--s-4);
      box-shadow: 0 16px 32px rgba(10,14,26,.10), 0 4px 8px rgba(10,14,26,.04);
      display: flex;
      align-items: center;
      gap: var(--s-2);
      font-size: var(--text-sm);
      font-weight: var(--w-bold);
      color: var(--brand);
      animation: floatY 5s ease-in-out infinite;
    }
    .hero-floater svg { color: var(--mint); }
    .hero-floater-top { top: 8%; inset-inline-start: -8%; animation-delay: 0s; }
    .hero-floater-bottom { bottom: 26%; inset-inline-end: -10%; animation-delay: 1.5s; }
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @media (max-width: 880px) {
      .hero-floater-top { display: none; }
      .hero-floater-bottom { display: none; }
    }

    /* ═══════ STAGGERED ENTRY ANIMATIONS ═══════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-v2 .eyebrow      { animation: fadeUp .55s var(--ease) .05s both; }
    .hero-v2 h1            { animation: fadeUp .65s var(--ease) .15s both; }
    .hero-v2 .lede         { animation: fadeUp .65s var(--ease) .25s both; }
    .hero-v2-cta           { animation: fadeUp .65s var(--ease) .35s both; }
    .hero-photo            { animation: fadeUp .8s var(--ease) .2s both; }
    .hero-photo-overlay    { animation: fadeUp .65s var(--ease) .5s both; }

    @media (prefers-reduced-motion: reduce) {
      .hero-v2 .eyebrow, .hero-v2 h1, .hero-v2 .lede, .hero-v2-cta,
      .hero-photo, .hero-photo-overlay, .hero-floater { animation: none !important; }
      .hero-photo { transform: none !important; }
    }

    /* ═══════ SECTION RHYTHM AUDIT — controlled vertical scale ═══════ */
    /* Hero already set above */

    /* Rx Fast Lane — connects to hero gently */
    #rx-fast-lane {
      padding: var(--s-12) 0 var(--s-16) !important;
    }
    #rx-fast-lane::before { display: none; }
    #rx-fast-lane .section-head {
      margin-bottom: var(--s-8) !important;
      max-width: 720px;
    }

    /* Pharmacist banner — thin connecting band */
    .pharm-banner {
      box-shadow: 0 12px 28px rgba(37,99,235,.06), 0 2px 4px rgba(10,14,26,.03) !important;
    }
    .pharm-banner + * { margin-top: 0 !important; }

    /* Categories — proper space */
    .cats-room {
      padding: var(--s-16) 0 !important;
    }
    .cats-room .section-head { margin-bottom: var(--s-8) !important; }
    .cats { gap: var(--s-4) !important; }

    /* Catalog — full breathing room */
    #catalog {
      padding: var(--s-16) 0 var(--s-20) !important;
    }

    /* Rx upload form room */
    #rx-upload {
      padding: var(--s-16) 0 var(--s-12) !important;
    }
    #rx-upload .section-head { margin-bottom: var(--s-8) !important; }
    .rx {
      box-shadow:
        0 30px 60px -20px rgba(219,39,119,.15),
        0 12px 24px -12px rgba(10,14,26,.06) !important;
    }

    /* ═══════ CARD DEPTH refinements ═══════ */
    .rx-path {
      box-shadow: 0 1px 3px rgba(10,14,26,.04);
      padding: var(--s-6) !important;
      gap: var(--s-4);
    }
    .rx-path:hover {
      box-shadow: 0 16px 32px rgba(10,14,26,.08), 0 4px 8px rgba(10,14,26,.04) !important;
    }
    .rx-path-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    }
    .rx-path h3 {
      letter-spacing: -.015em;
    }

    /* Category bubble depth */
    .cat {
      padding: var(--s-5) var(--s-3) !important;
      box-shadow: 0 1px 2px rgba(10,14,26,.03);
      gap: var(--s-3);
    }
    .cat-icon {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    }

    /* Product card depth refinement */
    .product {
      box-shadow: 0 1px 3px rgba(10,14,26,.04);
    }
    .product:hover {
      box-shadow:
        0 20px 40px rgba(10,14,26,.10),
        0 4px 8px rgba(10,14,26,.04) !important;
    }
    .product-add {
      transition: all var(--quick) var(--ease);
    }
    .product:hover .product-add:not(:disabled) {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    /* Pharmacist photo — proper ring */
    .pharm-banner-photo {
      width: 72px;
      height: 72px;
      box-shadow:
        0 0 0 3px #fff,
        0 0 0 5px var(--mint),
        0 8px 16px rgba(5,150,105,.25) !important;
    }

    /* Filter chip motion */
    .chip { transition: all var(--quick) var(--ease); }
    .chip:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(5,150,105,.18);
    }

    /* ═══════════════ R5: ORGANIC COLLAGE LANGUAGE ═══════════════ */
    /* Inspired by Iqra Network — blobs, overlapping cards, Islamic pattern */

    /* Organic blob shapes (squircle / ink-drop) */
    .blob-1 { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
    .blob-2 { border-radius: 41% 59% 73% 27% / 58% 41% 59% 42%; }
    .blob-3 { border-radius: 52% 48% 31% 69% / 71% 43% 57% 29%; }
    .blob-4 { border-radius: 70% 30% 60% 40% / 35% 70% 30% 65%; }
    .blob-5 { border-radius: 35% 65% 40% 60% / 50% 35% 65% 50%; }

    /* ─── HERO COLLAGE ─── */
    .hero-collage {
      position: relative;
      aspect-ratio: 1/1.05;
      max-width: 540px;
      margin: 0 auto;
    }
    .collage-img {
      position: absolute;
      overflow: hidden;
      box-shadow:
        0 24px 50px -16px rgba(10,14,26,.20),
        0 8px 16px -8px rgba(10,14,26,.10);
      transition: transform var(--slow) var(--ease);
    }
    .collage-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .collage-img::before {
      content: '';
      position: absolute;
      inset: -10% -8% 6% 8%;
      border-radius: inherit;
      z-index: -1;
      transition: transform var(--slow) var(--ease);
    }
    .collage-img:hover { transform: rotate(0) translateY(-4px); }

    .collage-main {
      width: 65%;
      height: 70%;
      top: 8%;
      inset-inline-end: 0;
      transform: rotate(-3deg);
      z-index: 2;
    }
    .collage-main::before { background: var(--mint-bg-2); }

    .collage-top {
      width: 42%;
      height: 38%;
      top: 0;
      inset-inline-start: 4%;
      transform: rotate(4deg);
      z-index: 3;
    }
    .collage-top::before { background: var(--peach-bg-2); }

    .collage-bottom {
      width: 44%;
      height: 38%;
      bottom: 2%;
      inset-inline-start: 8%;
      transform: rotate(-2deg);
      z-index: 1;
    }
    .collage-bottom::before { background: var(--blush-bg-2); }

    /* Decorative dots in hero */
    .hero-dots {
      position: absolute;
      width: 60px; height: 60px;
      background-image: radial-gradient(circle, var(--brand) 1px, transparent 1.5px);
      background-size: 12px 12px;
      opacity: .25;
      pointer-events: none;
    }
    .hero-dots-1 { top: 2%; inset-inline-end: 0; }
    .hero-dots-2 { bottom: 10%; inset-inline-end: 8%; opacity: .15; }

    /* Big blob accent shapes behind collage */
    .hero-blob-accent {
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }
    .hero-blob-accent-1 {
      width: 70%; height: 60%;
      top: 20%; inset-inline-end: 8%;
      background: var(--sky-bg);
      border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
      filter: blur(20px);
      opacity: .6;
    }

    /* Background — Islamic geometric pattern (subtle) */
    .pattern-islamic {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .04;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%230d2647' stroke-width='1'><g><path d='M40 4 L52 16 L52 28 L64 28 L76 40 L64 52 L52 52 L52 64 L40 76 L28 64 L28 52 L16 52 L4 40 L16 28 L28 28 L28 16 Z'/><circle cx='40' cy='40' r='8'/></g></svg>");
      background-size: 140px;
      background-position: center;
    }

    /* Override hero gradient to include pattern */
    .hero-v2 { position: relative; }

    /* ─── RX FAST LANE — overlapping collage cards ─── */
    .rx-paths-collage {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-3);
    }
    @media (max-width: 880px) {
      .rx-paths-collage { grid-template-columns: 1fr; gap: var(--s-4); }
    }

    .rx-paths-collage > * {
      transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
      box-shadow: 0 12px 32px -16px rgba(10,14,26,.18), 0 4px 12px -6px rgba(10,14,26,.08) !important;
    }
    @media (min-width: 881px) {
      .rx-paths-collage > *:nth-child(1) { transform: rotate(-1.5deg); margin-top: var(--s-4); }
      .rx-paths-collage > *:nth-child(2) { transform: rotate(0.5deg); z-index: 2; }
      .rx-paths-collage > *:nth-child(3) { transform: rotate(-0.5deg); margin-top: var(--s-3); }
      .rx-paths-collage > *:hover {
        transform: rotate(0) translateY(-6px) !important;
        z-index: 5;
      }
    }
    .rx-paths-collage > * {
      padding: var(--s-7, 28px) !important;
      border-radius: 24px !important;
      border-width: 0 !important;
      min-height: 240px;
    }

    /* ─── CATEGORIES as BLOB shapes ─── */
    .cats-collage {
      display: grid;
      /* fm55412 — minmax(0,1fr): see .cats note; the collage variant
         overrode it with plain 1fr and re-broke 360px. */
      grid-template-columns: repeat(13, minmax(0, 1fr));
      gap: var(--s-3);
      padding-block: var(--s-3);
    }
    @media (max-width: 1100px) { .cats-collage { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-4); } }
    @media (max-width: 720px)  { .cats-collage { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
    @media (max-width: 480px)  { .cats-collage { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 380px)  { .cats-collage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .cats-collage .cat {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: var(--s-5) var(--s-2) !important;
      display: flex;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start;
      gap: var(--s-3);
      min-height: 116px;
      min-width: 0;
    }
    .cats-collage .cat:hover { box-shadow: none !important; }
    .cats-collage .cat .cat-icon {
      width: 56px;
      height: 56px;
      border-radius: 63% 37% 54% 46% / 55% 48% 52% 45% !important;
      box-shadow: 0 8px 16px -8px rgba(10,14,26,.18), inset 0 1px 0 rgba(255,255,255,.45) !important;
      transition: transform var(--base) var(--ease), border-radius var(--slow) var(--ease) !important;
      margin: 0 !important;
    }
    .cats-collage .cat .cat-icon svg {
      width: 26px;
      height: 26px;
    }
    .cats-collage .cat .cat-label {
      font-size: var(--text-sm) !important;
      margin: 0 !important;
      font-weight: var(--w-bold) !important;
      line-height: 1.2;
      text-align: center;
    }
    .cats-collage .cat:hover .cat-icon {
      transform: translateY(-6px) rotate(-3deg) !important;
      border-radius: 41% 59% 73% 27% / 58% 41% 59% 42% !important;
    }
    .cats-collage .cat:nth-child(2n) .cat-icon { border-radius: 41% 59% 73% 27% / 58% 41% 59% 42% !important; }
    .cats-collage .cat:nth-child(3n) .cat-icon { border-radius: 52% 48% 31% 69% / 71% 43% 57% 29% !important; }
    .cats-collage .cat:nth-child(5n) .cat-icon { border-radius: 70% 30% 60% 40% / 35% 70% 30% 65% !important; }
    .cats-collage .cat:nth-child(7n) .cat-icon { border-radius: 35% 65% 40% 60% / 50% 35% 65% 50% !important; }

    .cats-collage .cat.active .cat-icon {
      transform: translateY(-6px) scale(1.05) !important;
      box-shadow:
        0 16px 32px -8px rgba(10,14,26,.25),
        0 0 0 4px var(--surface),
        0 0 0 6px var(--brand) !important;
    }

    /* ─── PRODUCT CARDS — touch of organic ─── */
    .product { border-radius: 20px !important; }
    .product-media { border-radius: 20px 20px 0 0 !important; }

    /* Pharmacist banner — playful organic shape */
    .pharm-banner-photo {
      border-radius: 63% 37% 54% 46% / 55% 48% 52% 45% !important;
    }

    /* Floating geometric accents in Rx room */
    .rx-deco {
      position: absolute;
      pointer-events: none;
      opacity: .5;
    }

    /* Bigger headline composition in hero (Iqra-style 2-tier) */
    .hero-v2 h1 {
    }
    .hero-v2 h1 em {
      letter-spacing: -.015em;
      font-weight: var(--w-semibold);
    }

    /* Mobile collage adjustments */
    @media (max-width: 880px) {
      .hero-collage { max-width: 360px; }
      .collage-img { box-shadow: 0 12px 30px -12px rgba(10,14,26,.20); }
    }

    /* ═══════════════ R6: TYPOGRAPHY AUDIT + MOBILE RHYTHM ═══════════════ */

    /* Base body — bump up for Saudi accessibility (older users included) */

    /* Hero H1 — calmer scale (was 40-68px, now 32-52px) */
    .hero-v2 h1 {
      font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
      line-height: var(--lh-tight) !important;
      letter-spacing: -.035em !important;
    }
    .hero-v2 h1 em {
      /* Use absolute size (not em ratio) for guaranteed readability */
      font-size: clamp(1.125rem, 1.5vw, 1.5rem) !important;
      margin-top: var(--s-3) !important;
      letter-spacing: -.01em;
      line-height: var(--lh-snug);
      font-weight: var(--w-semibold);
    }

    /* Hero lede — slightly bigger */
    .hero-v2 .lede {
      font-size: var(--text-md) !important;  /* 17px */
      line-height: var(--lh-relaxed);
    }

    /* Eyebrow — boost to 13px (was 11.5) */
    .eyebrow {
      font-size: var(--text-sm) !important;  /* 13px */
      letter-spacing: .05em !important;
    }

    /* Section headlines (H2) */
    h2 {
      font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
      line-height: var(--lh-tight);
      letter-spacing: -.02em;
    }
    .section-head h2 {
      font-size: clamp(1.625rem, 3vw, 2.25rem) !important;
    }
    .section-head .lede { font-size: var(--text-base) !important; }

    /* H3 cards */
    h3 { font-size: var(--text-md) !important; line-height: var(--lh-snug); }

    /* Tags — bigger so they're readable */
    .tag {
      font-size: var(--text-sm) !important;  /* 12.5px */
      padding: 4px 10px !important;
      font-weight: var(--w-bold);
    }

    /* Product card refinements */
    .product-brand {
      font-size: var(--text-xs) !important;  /* 11.5px - with caps + letter-spacing is OK */
      letter-spacing: .14em;
    }
    .product-name {
      font-size: var(--text-base) !important;  /* 16px */
      line-height: var(--lh-snug) !important;
      font-weight: var(--w-bold);
      min-height: 2.6em !important;
    }
    .product-meta {
      font-size: var(--text-sm) !important;  /* 14px */
      color: var(--fg-muted);
    }
    .product-meta-row {
      font-size: var(--text-sm) !important;  /* 13px */
      gap: var(--s-2) !important;
    }
    .product-price {
      font-size: var(--text-lg) !important;  /* 20px */
      font-weight: var(--w-extrabold);
    }
    .product-price-old {
      font-size: var(--text-base) !important;  /* 14.4px */
    }
    .product-add {
      font-size: var(--text-base) !important;  /* 14.7px */
      height: 44px !important;
    }

    /* Filter & sidebar text bigger */
    .filter-head h3 { font-size: var(--text-base) !important; }
    .filter-group summary { font-size: var(--text-base) !important; padding: var(--s-4) var(--s-5) !important; }
    .filter-opt { font-size: var(--text-base) !important; padding: var(--s-2) 0 !important; }
    .filter-opt-count { font-size: var(--text-sm) !important; }

    .sort-select { font-size: var(--text-base) !important; padding: 10px 14px !important; }
    .toolbar .count { font-size: var(--text-base) !important; }

    /* Buttons readable */
    .btn { font-size: var(--text-base) !important; }
    .btn-lg { font-size: var(--text-md) !important; height: 54px !important; }
    .btn-sm { font-size: var(--text-base) !important; }

    /* Rx Path cards — bigger text */
    .rx-path h3 { font-size: var(--text-md) !important; line-height: var(--lh-snug); letter-spacing: -.01em; }
    .rx-path p { font-size: var(--text-base) !important; line-height: var(--lh-normal); }
    .rx-path-arrow { font-size: var(--text-base) !important; }
    .rx-path-badge { font-size: var(--text-xs) !important; padding: 3px 10px !important; }

    /* Pharmacist banner — clearer */
    .pharm-banner-info .live { font-size: var(--text-xs) !important; padding: 4px 10px !important; }
    .pharm-banner-info strong { font-size: var(--text-md) !important; line-height: var(--lh-snug); }
    .pharm-banner-info span { font-size: var(--text-base) !important; }
    .pharm-stat strong { font-size: var(--text-lg) !important; }
    .pharm-stat span { font-size: var(--text-sm) !important; }

    /* Category labels */
    .cat-label { font-size: var(--text-base) !important; font-weight: var(--w-bold); }

    /* Form fields readable */
    .input, .field select, .field textarea {
      font-size: var(--text-base) !important;
      padding: 12px 14px !important;
    }
    .field label { font-size: var(--text-base) !important; margin-bottom: 6px !important; }

    /* Cart drawer */
    .cart-line .info strong { font-size: var(--text-base) !important; line-height: var(--lh-snug); }
    .cart-line .info .priceline { font-size: var(--text-sm) !important; }
    .totals-row { font-size: var(--text-base) !important; padding: 6px 0 !important; }
    .totals-row.grand { font-size: var(--text-md) !important; }

    /* Hero floating mini-stats */
    .hero-floater { font-size: var(--text-sm) !important; padding: 10px 14px !important; }

    /* Hero photo overlay — readable */
    .hero-photo-overlay .meta strong { font-size: var(--text-base) !important; }
    .hero-photo-overlay .meta span { font-size: var(--text-sm) !important; }

    /* Mobile cart bar */
    .mobile-cart-trigger { font-size: var(--text-base) !important; padding: 14px 16px !important; }
    .m-text small { font-size: var(--text-sm) !important; }
    .m-count { font-size: var(--text-xs) !important; min-width: 18px !important; height: 18px; }

    /* Mobile sticky cart bar bottom-safe */
    @media (max-width: 768px) {
      .mobile-cart-bar { padding: var(--s-2) var(--s-3) !important; }
    }

    /* ═══════════════ MOBILE RHYTHM ═══════════════ */
    @media (max-width: 768px) {
      :root { --header-h: 56px; --nav-h: 44px; }

      /* Header */
      .header { padding: 4px 0; }
      .header-row { height: 56px; gap: var(--s-3); }
      .brand-mark { width: 40px; height: 40px; }
      .brand-name strong { font-size: var(--text-base) !important; }
      .brand-name small { font-size: var(--text-xs) !important; }

      /* Hero — tighter */
      .hero-v2-grid { gap: var(--s-6); }
      .hero-v2 h1 { font-size: var(--text-2xl) !important; line-height: var(--lh-tight) !important; }
      .hero-v2 h1 em { font-size: var(--text-md) !important; margin-top: var(--s-2) !important; }
      .hero-v2 .lede { font-size: var(--text-base) !important; margin-bottom: var(--s-6) !important; }
      .hero-v2-cta .btn-primary { width: 100%; justify-content: center; }
      .hero-v2-cta .btn-ghost { width: 100%; justify-content: center; }
      .hero-collage { max-width: 320px; aspect-ratio: 1/1; }

      /* Sections — tighter */
      .section, section.section { padding: var(--s-10) 0 !important; }
      .section-tight { padding: var(--s-8) 0 !important; }
      .section-head { margin-bottom: var(--s-6) !important; }

      #rx-fast-lane { padding: var(--s-10) 0 var(--s-12) !important; }
      .cats-room { padding: var(--s-10) 0 !important; }
      #catalog { padding: var(--s-10) 0 var(--s-12) !important; }
      #rx-upload { padding: var(--s-10) 0 !important; }

      /* Headings smaller on mobile */
      h2 { font-size: var(--text-xl) !important; }
      .section-head h2 { font-size: var(--text-xl) !important; }
      .section-head .lede { font-size: var(--text-base) !important; }

      /* Cards stack with proper gap */
      .rx-paths-collage > * {
        padding: var(--s-5) !important;
        min-height: auto !important;
        transform: none !important;
        margin-top: 0 !important;
      }
      .rx-path h3 { font-size: var(--text-md) !important; }
      .rx-path p { font-size: var(--text-base) !important; }

      /* Categories mobile */
      .cats-collage { gap: var(--s-2) !important; }
      .cats-collage .cat { padding: var(--s-2) !important; }
      .cats-collage .cat .cat-icon { width: 64px; height: 64px; font-size: var(--text-xl) !important; }
      .cat-label { font-size: var(--text-sm) !important; }

      /* Pharmacist banner mobile */
      .pharm-banner { padding: var(--s-4) !important; gap: var(--s-3); }
      .pharm-banner-photo { width: 56px; height: 56px; }
      .pharm-banner-info strong { font-size: var(--text-base) !important; }
      .pharm-stat strong { font-size: var(--text-md) !important; }

      /* Hero photo overlay mobile */
      .hero-photo-overlay { padding: var(--s-2) var(--s-3) !important; }
      .hero-photo-overlay .meta strong { font-size: var(--text-sm) !important; }
      .hero-photo-overlay .meta span { font-size: var(--text-xs) !important; }
      .hero-photo-overlay .avatar { width: 36px !important; height: 36px !important; }

      /* Footer */
      .footer { padding: var(--s-10) 0 var(--s-4) !important; }

      /* Toolbar mobile */
      .toolbar { padding: var(--s-3) !important; gap: var(--s-2); }
      .toolbar h2 { font-size: var(--text-base) !important; }
      .sort-select { padding: 8px 10px !important; font-size: var(--text-sm) !important; }
      .view-toggle { display: none; }

      /* Product card mobile sizes */
      .product-body { padding: var(--s-3) !important; }
      .product-name { font-size: var(--text-base) !important; }
      .product-meta { font-size: var(--text-sm) !important; }
      .product-meta-row { font-size: var(--text-sm) !important; }
      .product-price { font-size: var(--text-md) !important; }
      .product-add { font-size: var(--text-base) !important; min-height: 44px !important; height: 44px !important; }
    }

    @media (hover: none), (pointer: coarse) {
      .product:hover { transform: none !important; }
      .product-quantity__button:hover { color: var(--brand); background: transparent; }
    }

    @media (prefers-reduced-motion: reduce) {
      .fly-to-cart { display: none !important; }
      .product,
      .product-media img,
      .product-quantity__button { transform: none !important; }
      .product.is-cart-feedback,
      .product-quantity__value.is-updated,
      .icon-btn-badge.cart-bump,
      #cartBtn.cart-shake svg,
      #rxCartBtn.cart-shake svg { animation: none !important; }
    }

    /* Very small screens */
    @media (max-width: 380px) {
      .hero-v2 h1 { font-size: var(--text-2xl) !important; }
      .hero-v2 .lede { font-size: var(--text-base) !important; }
      .section-head h2 { font-size: var(--text-lg) !important; }
    }

    /* ═══════════════ R6: GUEST vs MEMBER CHECKOUT ═══════════════ */

    .checkout-choice {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: var(--s-5);
      margin-bottom: var(--s-5);
      box-shadow: var(--shadow-sm);
    }
    .checkout-choice h4 {
      font-size: var(--text-base) !important;
      font-weight: var(--w-bold);
      margin-bottom: var(--s-3) !important;
    }
    .choice-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-3);
    }
    @media (max-width: 480px) { .choice-grid { grid-template-columns: 1fr; } }

    .choice-card {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: var(--s-4);
      cursor: pointer;
      transition: all var(--quick) var(--ease);
      text-align: start;
      display: flex; flex-direction: column; gap: var(--s-2);
      position: relative;
    }
    .choice-card:hover { border-color: var(--mint); transform: translateY(-2px); }
    .choice-card.selected {
      border-color: var(--mint);
      background: var(--mint-bg);
      box-shadow: 0 6px 18px rgba(5,150,105,.15);
    }
    .choice-card.selected::after {
      content: '';
      position: absolute;
      top: var(--s-3); inset-inline-end: var(--s-3);
      width: 22px; height: 22px;
      background: var(--mint);
      border-radius: 50%;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><polyline points='20 6 9 17 4 12'/></svg>");
      background-size: 14px;
      background-position: center;
      background-repeat: no-repeat;
    }
    .choice-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: var(--mint-bg-2);
      color: var(--mint-deep);
      display: grid; place-items: center;
    }
    .choice-card.member .choice-icon {
      background: var(--blush-bg-2);
      color: var(--blush-deep);
    }
    .choice-card strong {
      font-size: var(--text-base);
      font-weight: var(--w-extrabold);
      color: var(--fg);
      line-height: var(--lh-snug);
    }
    .choice-card span {
      font-size: var(--text-sm);
      color: var(--fg-muted);
      line-height: var(--lh-normal);
    }
    .choice-benefits {
      list-style: none;
      padding: 0; margin: var(--s-2) 0 0;
      font-size: var(--text-sm);
      color: var(--fg-soft);
    }
    .choice-benefits li {
      display: flex; gap: 6px; align-items: center;
      padding: 2px 0;
    }
    .choice-benefits li::before {
      content: '✓';
      color: var(--mint);
      font-weight: var(--w-extrabold);
      flex-shrink: 0;
    }
    .choice-card.member .choice-benefits li::before { color: var(--blush); }

    /* ═══════════════ R7: CANONICAL STOREFRONT HERO ═══════════════ */

    /* Legacy entry surfaces stay in the DOM for existing handlers, but the
       reconstructed storefront presents one clear visual story. */
    .rx-two-path,
    #rx-fast-lane,
    [data-pharm-banner-section],
    [data-smart-sticky-nav] [data-smart-nav-actions] {
      display: none !important;
    }
    .header-actions > #rxCartBtn { display: none !important; }
    .smart-nav-layout {
      grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .hero-v2 {
      position: relative;
      overflow: hidden;
      padding: clamp(44px, 5vw, 76px) 0 clamp(78px, 7vw, 104px) !important;
      background: linear-gradient(105deg, #fffdf9 0%, #fffaf1 43%, #f8e8ce 72%, #fff9ee 100%) !important;
      border: 0 !important;
    }
    .hero-v2 > .pattern-islamic { display: none !important; }
    .hero-v2 .container { position: relative; z-index: 2; }

    .hero-v2-grid {
      display: grid !important;
      grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
      gap: clamp(28px, 4vw, 64px);
      align-items: center;
      direction: ltr;
    }
    .hero-text-block,
    .hero-stage { direction: rtl; }

    .hero-text-block {
      width: 100%;
      max-width: 560px;
      margin: 0;
      justify-self: start;
      text-align: start;
    }
    .hero-brand-lockup {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      margin-bottom: var(--s-5);
    }
    .hero-brand-logo {
      display: block;
      width: clamp(70px, 5.5vw, 88px);
      height: auto;
      flex: 0 0 auto;
      object-fit: contain;
      mix-blend-mode: multiply;
    }
    .hero-brand-copy { display: grid; gap: 2px; }
    .hero-brand-copy strong {
      color: #102a4c;
      font-size: clamp(1.05rem, 1.45vw, 1.3rem);
      font-weight: 900;
      line-height: 1.35;
    }
    .hero-brand-copy span {
      /* ≥4.5:1 (WCAG AA) against every hero gradient stop, incl. #f8e8ce */
      color: #7d5e26;
      font-size: var(--text-base);
      font-weight: 750;
    }

    .hero-v2 h1 {
      margin: 0 0 var(--s-5) !important;
      color: #0d2647 !important;
      font-size: clamp(2.8rem, 4.7vw, 4.5rem) !important;
      font-weight: 950 !important;
      line-height: 1.08 !important;
      letter-spacing: -.045em !important;
    }
    .hero-v2 h1 > span { display: block; }
    .hero-v2 .lede {
      margin: 0 0 var(--s-7) !important;
      max-width: 48ch;
      color: #526073;
      font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
      line-height: 1.9;
    }

    .hero-v2-cta {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      flex-wrap: wrap;
      margin-bottom: var(--s-6);
    }
    .hero-cta {
      min-height: 52px;
      padding: 0 24px;
      border-radius: 14px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: var(--text-base);
      font-weight: 900;
      white-space: nowrap;
      transition: transform var(--quick) var(--ease), box-shadow var(--quick) var(--ease), background var(--quick) var(--ease);
    }
    .hero-cta .icon { width: 20px; height: 20px; }
    .hero-cta--primary {
      color: #fff;
      background: #0d2647;
      border-color: #0d2647;
      box-shadow: 0 12px 24px -16px rgba(13,38,71,.65);
    }
    .hero-cta--primary:hover {
      color: #fff;
      background: #173a66;
      transform: translateY(-1px);
    }
    .hero-cta--secondary {
      color: #0d2647;
      background: rgba(255,255,255,.94);
      border-color: #c5a45e;
    }
    .hero-cta--secondary .icon { color: #ad8435; }
    .hero-cta--secondary:hover {
      color: #0d2647;
      background: #fff;
      box-shadow: 0 10px 24px -20px rgba(13,38,71,.5);
      transform: translateY(-1px);
    }
    .hero-cta:focus-visible {
      outline: 3px solid rgba(184,147,90,.38);
      outline-offset: 3px;
    }

    .hero-inline-benefits {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      row-gap: var(--s-2);
      color: #526073;
      font-size: var(--text-sm);
      font-weight: 750;
    }
    .hero-inline-benefits > span {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .hero-inline-benefits > span:not(:last-child) {
      margin-inline-end: 14px;
      padding-inline-end: 14px;
      border-inline-end: 1px solid rgba(13,38,71,.14);
    }
    .hero-inline-benefits .icon {
      width: 18px;
      height: 18px;
      color: #ad8435;
    }

    /* The supplied WebP carries the product scene, gold arc, and corner
       pattern. The wrappers deliberately add no card treatment. */
    .hero-stage {
      position: relative;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0 !important;
      overflow: visible;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    .hero-stage-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 840 / 754;
      overflow: visible;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    .hero-products-picture {
      display: block;
      width: 100%;
      height: 100%;
    }
    .hero-products-picture img {
      display: block;
      width: 100%;
      height: 100%;
      max-height: none !important;
      object-fit: contain;
      object-position: center;
      mix-blend-mode: multiply;
      -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 5%, #000 100%),
        linear-gradient(to bottom, transparent 0, #000 4%, #000 94%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, transparent 0, #000 5%, #000 100%),
        linear-gradient(to bottom, transparent 0, #000 4%, #000 94%, transparent 100%);
      mask-composite: intersect;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    /* Earlier visual layers animated these same selectors. The canonical
       hero must be fully legible on first paint at every viewport. */
    [data-storefront-hero="canonical"] .hero-brand-lockup,
    [data-storefront-hero="canonical"] h1,
    [data-storefront-hero="canonical"] .lede,
    [data-storefront-hero="canonical"] .hero-v2-cta,
    [data-storefront-hero="canonical"] .hero-inline-benefits,
    [data-storefront-hero="canonical"] .hero-products-picture {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .hero-trust-shell {
      position: relative;
      z-index: 8;
      margin: -38px 0 var(--s-7);
    }
    .hero-trust-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
      padding: 12px 18px;
      background: #fff;
      border: 1px solid rgba(13,38,71,.1);
      border-radius: 24px;
      box-shadow: 0 18px 42px -32px rgba(13,38,71,.38);
    }
    .hero-trust-item {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #0d2647;
      padding: 10px 16px;
      text-align: center;
    }
    .hero-trust-item:not(:last-child) {
      border-inline-end: 1px solid rgba(13,38,71,.1);
    }
    .hero-trust-item .icon {
      width: 22px;
      height: 22px;
      color: #ad8435;
      flex: 0 0 auto;
    }
    .hero-trust-item strong {
      font-size: var(--text-base);
      font-weight: 850;
      line-height: 1.4;
    }

    @media (max-width: 900px) {
      .hero-v2 { padding: var(--s-8) 0 84px !important; }
      .hero-v2-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-8);
      }
      .hero-text-block {
        max-width: 680px;
        justify-self: center;
      }
      .hero-stage {
        max-width: 680px;
        margin-inline: auto;
      }
      .hero-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-trust-item:nth-child(odd) { border-inline-end: 1px solid rgba(13,38,71,.1); }
      .hero-trust-item:nth-child(even) { border-inline-end: 0; }
      .hero-trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(13,38,71,.1); }
    }

    @media (max-width: 640px) {
      .smart-nav-layout { grid-template-columns: minmax(0, 1fr) !important; }
      .hero-v2 { padding: 28px 0 72px !important; }
      .hero-v2-grid { gap: var(--s-7); }
      .hero-brand-lockup { margin-bottom: var(--s-4); }
      .hero-brand-logo { width: 68px; }
      .hero-v2 h1 {
        font-size: clamp(2.05rem, 10.5vw, 2.8rem) !important;
        letter-spacing: -.035em !important;
      }
      .hero-v2 .lede {
        margin-bottom: var(--s-6) !important;
        font-size: var(--text-base) !important;
        line-height: 1.8;
      }
      .hero-v2-cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-bottom: var(--s-5);
      }
      .hero-cta { width: 100%; min-height: 52px; }
      .hero-inline-benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
      }
      .hero-inline-benefits > span {
        justify-content: center;
        margin: 0 !important;
        padding: 0 6px !important;
        text-align: center;
        line-height: 1.35;
      }
      .hero-inline-benefits > span:not(:last-child) {
        border-inline-end: 1px solid rgba(13,38,71,.12) !important;
      }
      .hero-stage-frame { aspect-ratio: 720 / 611; }
      .hero-trust-shell { margin-top: -34px; }
      .hero-trust-strip {
        padding: 8px;
        border-radius: 22px;
      }
      .hero-trust-item {
        min-height: 66px;
        padding: 8px 6px;
        gap: 7px;
      }
      .hero-trust-item .icon { width: 20px; height: 20px; }
      .hero-trust-item strong { font-size: var(--text-sm); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-v2 *,
      .hero-cta { animation: none !important; transition: none !important; }
    }

    /* Floating cards on stage — overlap the edges for depth */
    .stage-floater {
      position: absolute;
      background: #fff;
      border-radius: 18px;
      padding: var(--s-3) var(--s-4);
      box-shadow:
        0 16px 36px -12px rgba(10,14,26,.18),
        0 4px 10px -4px rgba(10,14,26,.08);
      display: flex;
      align-items: center;
      gap: var(--s-3);
      animation: floatY 5s ease-in-out infinite;
      z-index: 3;
    }
    .stage-floater-icon {
      width: 38px; height: 38px;
      border-radius: 12px;
      display: grid; place-items: center;
      flex-shrink: 0;
    }
    .stage-floater-meta { line-height: var(--lh-tight); }
    .stage-floater-meta strong {
      display: block;
      font-size: var(--text-base);
      font-weight: var(--w-extrabold);
      color: var(--fg);
    }
    .stage-floater-meta span {
      font-size: var(--text-sm);
      color: var(--fg-muted);
    }

    .stage-floater.f1 {
      top: -22px;
      inset-inline-start: 6%;
      animation-delay: 0s;
    }
    .stage-floater.f1 .stage-floater-icon {
      background: var(--mint-bg-2); color: var(--mint-deep);
    }

    .stage-floater.f2 {
      top: 26%;
      inset-inline-end: -28px;
      animation-delay: 1.2s;
    }
    .stage-floater.f2 .stage-floater-icon {
      background: var(--blush-bg-2); color: var(--blush-deep);
    }

    /* Pharmacist active card — centered at bottom of stage */
    .stage-pharmacist[hidden] {
      display: none !important;
    }
    .stage-pharmacist {
      position: absolute;
      bottom: -28px;
      inset-inline-start: 50%;
      transform: translateX(50%);
      background: rgba(255,255,255,.97);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 22px;
      padding: var(--s-3) var(--s-5);
      box-shadow:
        0 24px 50px -16px rgba(10,14,26,.22),
        inset 0 1px 0 rgba(255,255,255,.7);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--s-3);
      align-items: center;
      max-width: 380px;
      z-index: 4;
    }
    [dir="rtl"] .stage-pharmacist { transform: translateX(-50%); }
    .stage-pharmacist .avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--mint), var(--mint-deep));
      color: #fff;
      display: grid; place-items: center;
      font-weight: var(--w-extrabold);
      font-size: var(--text-base);
      box-shadow:
        0 0 0 3px #fff,
        0 0 0 5px var(--mint),
        0 6px 14px rgba(5,150,105,.35);
    }
    .stage-pharmacist .meta { line-height: var(--lh-snug); }
    .stage-pharmacist .meta strong {
      display: block;
      font-size: var(--text-base);
      font-weight: var(--w-extrabold);
      color: var(--brand);
    }
    .stage-pharmacist .meta span {
      font-size: var(--text-sm);
      color: var(--fg-muted);
    }
    @media (max-width: 768px) {
      .stage-floater { display: none; }
      .stage-pharmacist {
        position: static;
        transform: none !important;
        margin: var(--s-3) auto 0;
        max-width: 100%;
        background: #fff;
      }
      [dir="rtl"] .stage-pharmacist { transform: none !important; }
    }

    /* Preserve the legacy DOM/config contract without layering cards over
       the reconstructed product artwork. */
    [data-storefront-hero="canonical"] .stage-floater,
    [data-storefront-hero="canonical"] .stage-pharmacist {
      display: none !important;
    }

    /* Reserve overlap space only after a verified pharmacist is revealed. */
    @media (min-width: 769px) {
      .hero-v2:not([data-storefront-hero="canonical"]):has(.stage-pharmacist:not([hidden])) {
        padding-bottom: var(--s-12) !important;
      }
    }

    [data-pharm-banner-section][hidden] {
      display: none !important;
    }

    /* ═══ fm312b — in-page camera capture styles ═══ */
    #rxCamBack {
      position: fixed; inset: 0;
      background: #000;
      z-index: 9500;
      display: none;
      align-items: center; justify-content: center;
      padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    }
    #rxCamBack.open { display: flex; }
    #rxCamShell {
      position: relative;
      width: 100%; height: 100%;
      max-width: 700px;
      display: flex; flex-direction: column;
    }
    #rxCamFrame {
      position: relative; flex: 1; min-height: 0;
      background: #000;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    #rxCamVideo, #rxCamPreview {
      width: 100%; height: 100%;
      object-fit: contain;
      display: none;
      background: #000;
    }
    #rxCamFrame[data-mode="live"] #rxCamVideo,
    #rxCamFrame[data-mode="captured"] #rxCamPreview { display: block; }
    #rxCamHint {
      position: absolute; top: 14px; left: 0; right: 0;
      text-align: center;
      color: rgba(255,255,255,.92);
      font: 600 .85rem/1.4 'Tajawal', system-ui, sans-serif;
      padding: 8px 16px;
      background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
      pointer-events: none;
      text-shadow: 0 1px 4px rgba(0,0,0,.6);
    }
    #rxCamFrame[data-mode="captured"] #rxCamHint { display: none; }
    #rxCamClose {
      position: absolute; top: 14px;
      inset-inline-end: 14px;
      width: 40px; height: 40px;
      background: rgba(0,0,0,.55); color: #fff;
      border: 0; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(4px);
    }
    #rxCamClose:hover { background: rgba(0,0,0,.75); }
    #rxCamControls {
      background: rgba(0,0,0,.92);
      padding: 22px 18px max(22px, env(safe-area-inset-bottom));
      display: flex; align-items: center; justify-content: center; gap: 14px;
    }
    #rxCamShutter {
      width: 76px; height: 76px; border-radius: 50%;
      background: rgba(255,255,255,.08);
      border: 4px solid #fff;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform .12s ease;
    }
    #rxCamShutter:active { transform: scale(.94); }
    #rxCamShutter:hover { background: rgba(255,255,255,.16); }
    .rx-cam-shutter-inner {
      width: 56px; height: 56px; border-radius: 50%;
      background: #fff;
      transition: background .12s ease;
    }
    #rxCamShutter:active .rx-cam-shutter-inner { background: #f3f4f6; }
    #rxCamControls[data-mode="captured"] #rxCamShutter { display: none; }
    .rx-cam-primary, .rx-cam-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 22px;
      border-radius: 14px;
      font: 800 .92rem/1 'Tajawal', system-ui, sans-serif;
      cursor: pointer;
      border: 0;
    }
    .rx-cam-primary {
      background: linear-gradient(135deg, #10b981, #047857);
      color: #fff;
      box-shadow: 0 10px 24px -10px rgba(4,120,87,.6);
    }
    .rx-cam-primary:hover { background: linear-gradient(135deg, #059669, #036148); }
    .rx-cam-secondary {
      background: rgba(255,255,255,.12);
      color: #fff;
      border: 1px solid rgba(255,255,255,.2);
    }
    .rx-cam-secondary:hover { background: rgba(255,255,255,.2); }
    #rxCamErr {
      position: absolute;
      bottom: 100px; left: 16px; right: 16px;
      padding: 14px 16px;
      background: rgba(220,38,38,.92);
      color: #fff;
      border-radius: 12px;
      font: 600 .88rem/1.5 'Tajawal', system-ui, sans-serif;
      text-align: center;
      direction: rtl;
    }
    @media (max-width: 720px) {
      #rxCamShutter { width: 68px; height: 68px; border-width: 3px; }
      .rx-cam-shutter-inner { width: 50px; height: 50px; }
    }

    /* ═══ fm314 — Ask-pharmacy chat modal ═══ */
    #askPharmaBack {
      position: fixed; inset: 0;
      background: rgba(10,14,26,.42);
      backdrop-filter: blur(2px);
      z-index: 9400;
      display: none;
      align-items: flex-end; justify-content: center;
    }
    @media (min-width: 720px) {
      #askPharmaBack { align-items: center; }
    }
    #askPharmaBack.open { display: flex; }
    #askPharmaShell {
      width: 100%; max-width: 480px;
      max-height: 88vh;
      background: #fff;
      border-radius: 22px 22px 0 0;
      display: flex; flex-direction: column;
      box-shadow: 0 -20px 60px -20px rgba(15,23,42,.4);
      overflow: hidden;
    }
    @media (min-width: 720px) {
      #askPharmaShell { border-radius: 18px; max-height: 78vh; }
    }
    #askPharmaHead {
      padding: 16px 18px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      color: #fff;
      display: flex; justify-content: space-between; align-items: center; gap: 10px;
    }
    #askPharmaTitle { font-weight: 800; font-size: 1rem; }
    #askPharmaHead small { color: #cbd5e1; font-size: .76rem; display: block; margin-top: 3px; }
    #askPharmaClose {
      width: 32px; height: 32px;
      background: rgba(255,255,255,.12); color: #fff;
      border: 0; border-radius: 10px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    #askPharmaBody {
      flex: 1; overflow-y: auto;
      padding: 14px 16px;
      background: #f9fafb;
      display: flex; flex-direction: column; gap: 8px;
    }
    .ap-msg {
      max-width: 80%;
      padding: 10px 14px;
      border-radius: 14px;
      font: 500 .9rem/1.55 'Tajawal', system-ui, sans-serif;
      word-wrap: break-word;
    }
    .ap-msg.in  { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-inline-end-radius: 4px; }
    .ap-msg.out { align-self: flex-start; background: #fff; color: #0a0e1a; border: 1px solid #e5e7eb; border-bottom-inline-start-radius: 4px; }
    .ap-time { font-size: .68rem; color: #9aa3b2; margin-top: 4px; }
    .ap-empty {
      text-align: center;
      padding: 30px 16px;
      color: #6b7280;
    }
    .ap-empty .ap-emoji { font-size: 2.2rem; margin-bottom: 8px; }
    #askPharmaForm {
      display: flex; gap: 8px;
      padding: 12px;
      border-top: 1px solid #e5e7eb;
      background: #fff;
    }
    #askPharmaForm textarea {
      flex: 1; resize: none;
      padding: 10px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      font: 500 .9rem/1.45 'Tajawal', system-ui, sans-serif;
    }
    #askPharmaForm textarea:focus { outline: none; border-color: var(--color-primary); }
    #askPharmaForm button {
      padding: 10px 18px;
      background: var(--color-primary); color: #fff;
      border: 0; border-radius: 12px;
      font: 800 .85rem/1 'Tajawal', system-ui, sans-serif;
      cursor: pointer;
    }
    #askPharmaForm button:hover { background: var(--color-primary-dark); }
    #askPharmaForm button:disabled { opacity: .55; cursor: not-allowed; }
    #askPharmaSigninNeeded {
      padding: 16px;
      text-align: center;
      color: #6b7280;
      font: 600 .85rem/1.6 'Tajawal', system-ui, sans-serif;
      background: #fef3c7;
      border-top: 1px solid #f59e0b;
    }

    /* ═══ fm315 — Address book modal ═══ */
    #addrBack {
      position: fixed; inset: 0;
      background: rgba(10,14,26,.4);
      backdrop-filter: blur(2px);
      z-index: 9300;
      display: none;
      align-items: center; justify-content: center;
      padding: 16px;
    }
    #addrBack.open { display: flex; }
    #addrShell {
      width: 100%; max-width: 580px; max-height: 92vh;
      background: #fff;
      border-radius: 18px;
      display: flex; flex-direction: column;
      box-shadow: 0 30px 70px -20px rgba(15,23,42,.55);
      overflow: hidden;
    }
    #addrHead {
      padding: 16px 18px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      color: #fff;
      display: flex; justify-content: space-between; align-items: center; gap: 10px;
    }
    #addrTitle { font-weight: 800; font-size: 1rem; }
    #addrHead small { color: #cbd5e1; font-size: .76rem; display: block; margin-top: 3px; }
    #addrClose {
      width: 32px; height: 32px;
      background: rgba(255,255,255,.12); color: #fff;
      border: 0; border-radius: 10px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    #addrBody { flex: 1; overflow-y: auto; padding: 16px 18px; background: #f9fafb; }
    #addrList { display: grid; gap: 10px; margin-bottom: 18px; }
    .addr-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 12px 14px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }
    .addr-card.is-default { border-color: var(--color-gold); }
    .addr-card-label { font-weight: 800; color: #0a0e1a; display: flex; align-items: center; gap: 6px; }
    .addr-card-meta  { color: #6b7280; font-size: .82rem; line-height: 1.55; margin-top: 4px; }
    .addr-card-defaults { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
    .addr-pill {
      padding: 3px 9px; border-radius: 999px;
      font: 700 .68rem/1 'Tajawal', system-ui, sans-serif;
    }
    .addr-pill.ship { background: color-mix(in srgb, var(--color-gold) 16%, transparent); color: #9b7530; }
    .addr-pill.bill { background: #dbeafe; color: #1e40af; }
    .addr-card-actions { display: flex; flex-direction: column; gap: 4px; }
    .addr-action-btn {
      background: transparent; border: 1px solid #e5e7eb; color: var(--color-primary);
      padding: 5px 10px; border-radius: 8px; cursor: pointer;
      font: 700 .72rem/1 'Tajawal', system-ui, sans-serif;
    }
    .addr-action-btn:hover { background: #f1f5f9; }
    .addr-action-btn.del { color: #b91c1c; border-color: #fecaca; }
    .addr-action-btn.del:hover { background: #fef2f2; }
    #addrFormWrap {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 16px 18px;
    }
    #addrFormTitle { margin: 0 0 12px; font-size: 1rem; color: #0a0e1a; font-weight: 800; }
    #addrForm .addr-row { margin-bottom: 12px; }
    #addrForm label { display: block; font-weight: 700; font-size: .82rem; color: #0a0e1a; margin-bottom: 5px; }
    #addrForm input[type=text], #addrForm input[type=tel], #addrForm input:not([type]), #addrForm textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      font: 500 .9rem/1.5 'Tajawal', system-ui, sans-serif;
    }
    #addrForm input:focus, #addrForm textarea:focus { outline: none; border-color: var(--color-primary); }
    #addrForm .addr-half { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #addrForm .addr-half > div { margin: 0; }
    #addrForm .addr-half label { font-weight: 700; }
    .addr-seg {
      display: flex; gap: 4px;
      background: #f1f5f9;
      border-radius: 999px;
      padding: 3px;
    }
    .addr-seg button {
      flex: 1;
      background: transparent; border: 0; cursor: pointer;
      padding: 7px 10px; border-radius: 999px;
      font: 700 .8rem/1 'Tajawal', system-ui, sans-serif;
      color: #6b7280;
    }
    .addr-seg button.on { background: var(--color-primary); color: #fff; }
    .addr-photo {
      border: 1px dashed #cbd5e1; border-radius: 12px;
      padding: 12px;
      background: #fff;
    }
    #addrPhotoPreview { display: block; max-width: 100%; max-height: 200px; border-radius: 8px; margin-bottom: 10px; }
    .addr-photo-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .addr-photo-btn {
      padding: 8px 14px; border-radius: 10px;
      background: #fff; color: var(--color-primary);
      border: 1px solid #e5e7eb;
      font: 700 .8rem/1 'Tajawal', system-ui, sans-serif;
      cursor: pointer;
    }
    .addr-photo-btn:hover { border-color: var(--color-primary); }
    .addr-gps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .addr-gps-status { color: #6b7280; font-size: .8rem; }

    /* fm318 — interactive map for address pin (Leaflet + OpenStreetMap) */
    .addr-map-wrap {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      overflow: hidden;
    }
    .addr-map-toolbar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: linear-gradient(180deg, #f8fafc, #fff);
      border-bottom: 1px solid #f1f5f9;
      flex-wrap: wrap;
    }
    .addr-map-toolbar #addrGpsBtn {
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      color: #fff;
      border: 0;
      padding: 8px 14px;
      border-radius: 10px;
      font: 800 .78rem/1 'Tajawal', system-ui, sans-serif;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .addr-map-toolbar #addrGpsBtn:hover { box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-primary) 50%, transparent); transform: translateY(-1px); }
    .addr-map-toolbar #addrGpsStatus { color: #6b7280; font-size: .78rem; }
    #addrMap {
      height: 280px;
      width: 100%;
      background: #e6efe6;  /* soft natural-tones fallback before tiles load */
      cursor: crosshair;
    }
    @media (min-width: 720px) { #addrMap { height: 320px; } }
    .addr-map-coords {
      padding: 6px 12px;
      background: #f9fafb;
      border-top: 1px solid #f1f5f9;
      font-size: .72rem; color: #9aa3b2;
    }
    .addr-map-coords code {
      background: #fff; border: 1px solid #e5e7eb; padding: 2px 6px; border-radius: 5px;
      color: #64748b; font-weight: 600;
    }
    /* fm323 — resolved-address card (Jazeera/Uber pattern) */
    #addrMapResolved {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px; align-items: center;
      padding: 14px 16px;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      color: #fff;
      border-top: 1px solid #e5e7eb;
    }
    .addr-resolved-icon { font-size: 1.6rem; line-height: 1; }
    .addr-resolved-label { font-size: .68rem; color: #fbbf24; letter-spacing: .08em; font-weight: 700; }
    .addr-resolved-text { font-size: .88rem; color: #fff; font-weight: 600; margin-top: 3px; line-height: 1.45; }
    .addr-resolved-confirm {
      background: linear-gradient(135deg, #10b981, #047857);
      color: #fff; border: 0; cursor: pointer;
      padding: 10px 16px;
      border-radius: 10px;
      font: 800 .82rem/1 'Tajawal', system-ui, sans-serif;
      transition: transform .12s ease, box-shadow .12s ease;
      white-space: nowrap;
    }
    .addr-resolved-confirm:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(16,185,129,.6); }
    .addr-resolved-confirm.is-confirmed { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #064e3b; }
    @media (max-width: 480px) {
      #addrMapResolved { grid-template-columns: 1fr; gap: 8px; text-align: center; }
      .addr-resolved-confirm { width: 100%; }
    }
    /* fm321 — mode selector + center crosshair (Uber/Careem style) */
    .addr-map-mode {
      display: flex; gap: 4px;
      background: #f1f5f9;
      padding: 4px;
      margin: 0;
      border-bottom: 1px solid #e5e7eb;
    }
    .addr-map-mode-btn {
      flex: 1;
      background: transparent; border: 0; cursor: pointer;
      padding: 9px 12px; border-radius: 8px;
      font: 700 .8rem/1 'Tajawal', system-ui, sans-serif;
      color: #6b7280;
      transition: background .12s ease, color .12s ease;
    }
    .addr-map-mode-btn.on {
      background: #fff; color: var(--color-primary);
      box-shadow: 0 2px 6px -2px rgba(15,23,42,.15);
    }
    #addrMapShell { position: relative; }
    #addrMapCrosshair {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -100%);
      pointer-events: none;
      z-index: 401;
      width: 32px; height: 42px;
      display: none;
    }
    #addrMapShell[data-mode="center"] #addrMapCrosshair { display: block; }
    .addr-cross-pin {
      position: absolute; top: 0; left: 50%;
      width: 32px; height: 32px;
      background: linear-gradient(135deg, var(--color-gold), #b8841f);
      border-radius: 50% 50% 50% 0;
      transform: translateX(-50%) rotate(-45deg);
      border: 2.5px solid #fff;
      box-shadow: 0 12px 24px -6px rgba(15,23,42,.5);
    }
    .addr-cross-pin::after {
      content: ''; position: absolute; inset: 6px;
      background: #fff; border-radius: 50%;
    }
    .addr-cross-shadow {
      position: absolute; bottom: -4px; left: 50%;
      width: 18px; height: 5px;
      background: rgba(0,0,0,.25);
      border-radius: 50%;
      transform: translateX(-50%);
      filter: blur(2px);
      animation: addr-cross-bob 1.6s ease-in-out infinite;
    }
    @keyframes addr-cross-bob {
      0%, 100% { transform: translateX(-50%) scale(1); opacity: .35; }
      50%      { transform: translateX(-50%) scale(.7); opacity: .55; }
    }
    /* hide the draggable marker when in center mode (it'd be confusing) */
    #addrMapShell[data-mode="center"] .leaflet-marker-pane { display: none; }

    /* Branded marker pin (replaces the default Leaflet droplet) */
    .addr-pin {
      position: relative;
      width: 32px; height: 42px;
    }
    .addr-pin-body {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 32px; height: 32px;
      background: linear-gradient(135deg, var(--color-gold), #b8841f);
      border-radius: 50% 50% 50% 0;
      transform-origin: center;
      transform: translateX(-50%) rotate(-45deg);
      box-shadow: 0 8px 18px -6px rgba(15,23,42,.5);
      border: 2px solid #fff;
    }
    .addr-pin-body::after {
      content: ''; position: absolute; inset: 6px;
      background: #fff; border-radius: 50%;
    }
    .addr-pin-pulse {
      position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
      width: 12px; height: 12px;
      background: color-mix(in srgb, var(--color-gold) 40%, transparent);
      border-radius: 50%;
      animation: addr-pin-pulse 1.8s ease-out infinite;
    }
    @keyframes addr-pin-pulse {
      0% { transform: translateX(-50%) scale(1); opacity: 0.8; }
      100% { transform: translateX(-50%) scale(2.6); opacity: 0; }
    }
    .addr-defaults { display: flex; gap: 16px; flex-wrap: wrap; }
    .addr-defaults label {
      display: flex; align-items: center; gap: 6px;
      font-weight: 700; color: #0a0e1a; font-size: .82rem;
      cursor: pointer;
    }
    .addr-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .addr-btn-ghost {
      background: transparent; border: 1px solid #e5e7eb; color: #6b7280;
      padding: 10px 18px; border-radius: 10px; cursor: pointer;
      font: 700 .85rem/1 'Tajawal', system-ui, sans-serif;
    }
    .addr-btn-primary {
      background: var(--color-primary); color: #fff; border: 0;
      padding: 10px 22px; border-radius: 10px; cursor: pointer;
      font: 800 .88rem/1 'Tajawal', system-ui, sans-serif;
    }
    .addr-btn-primary:hover { background: var(--color-primary-dark); }
    .addr-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
    #addrPhotoStatus { margin-top: 8px; font-size: .8rem; color: #6b7280; }
    #addrPhotoStatus.err { color: #b91c1c; }
    #addrPhotoStatus.ok  { color: #047857; }

/* ─── Block 2: VerifyGate modal styles (was lines 6879-6938) ─── */
    .auth-menu {
      position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
      background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
      border-radius: 12px; padding: 6px; min-width: 200px;
      box-shadow: 0 10px 30px rgba(10,14,26,.12);
      display: flex; flex-direction: column; z-index: 50;
    }
    .header-actions { position: relative; }
    .auth-menu[hidden] { display: none; }
    .auth-menu-link {
      background: none; border: 0; text-align: start;
      padding: 9px 12px; border-radius: 8px; cursor: pointer;
      font: inherit; color: var(--ink, #0a0e1a); text-decoration: none;
    }
    .auth-menu-link:hover { background: var(--brand-soft, #e8edf4); }
    .auth-menu-signout { color: #b91c1c; border-top: 1px dashed #e5e7eb; margin-top: 4px; padding-top: 12px; }
    .auth-menu-signout:hover { background: #fef2f2; color: #991b1b; }
    /* fm553eeee — address + favorites moved into the dropdown; the
       favorites row still needs a numeric badge. */
    .auth-menu-badge {
      background: #dc2626;
      color: #fff;
      font-size: .68rem;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 999px;
      margin-inline-start: 6px;
      min-width: 18px;
      text-align: center;
    }
    .auth-menu-badge.empty { display: none; }
    .verify-banner {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border-bottom: 1px solid #f59e0b;
      padding: 10px 0; text-align: center; font-size: .9rem; color: #78350f;
    }
    /* fm236: defense-in-depth so [hidden] reliably hides the banner. */
    .verify-banner[hidden] { display: none !important; }
    .verify-banner button {
      background: #b45309; color: #fff; border: 0; padding: 5px 12px;
      border-radius: 6px; margin-inline-start: 10px; cursor: pointer; font-weight: 700;
    }
    .auth-overlay {
      position: fixed; inset: 0; background: rgba(10,14,26,.55);
      display: none; align-items: center; justify-content: center; z-index: 1000;
      padding: 20px;
    }
    .auth-overlay[data-open="true"] { display: flex; }
    .auth-modal {
      background: #fff; border-radius: 18px; padding: 28px; max-width: 440px;
      width: 100%; max-height: 90vh; overflow-y: auto;
      box-shadow: 0 30px 60px rgba(10,14,26,.3);
    }
    .auth-modal h2 { margin: 0 0 6px; font-size: 1.4rem; font-weight: 900; }
    .auth-modal .auth-sub { margin: 0 0 18px; color: #6b7280; font-size: .9rem; }
    .auth-modal label { display: block; margin: 12px 0 4px; font-weight: 700; font-size: .85rem; }
    .auth-modal input {
      width: 100%; padding: 11px 14px; border: 1px solid #d1d5db; border-radius: 10px;
      font: inherit; font-size: .95rem; background: #fafafa;
    }
    .auth-modal input:focus { outline: 2px solid var(--brand, var(--color-primary)); outline-offset: 1px; background: #fff; }
    .auth-modal .auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .auth-modal-btn {
      width: 100%; padding: 12px; border-radius: 10px; border: 0;
      background: linear-gradient(180deg, var(--brand, var(--color-primary)), var(--brand-deep, var(--color-primary-dark)));
      color: #fff; font-weight: 800; cursor: pointer; margin-top: 18px; font-size: .95rem;
    }
    .auth-modal-btn:disabled { opacity: .55; cursor: not-allowed; }
    .auth-modal-link { background: none; border: 0; color: var(--brand, var(--color-primary)); cursor: pointer; font-weight: 700; padding: 0; }
    .auth-modal-foot { margin-top: 14px; font-size: .85rem; color: #6b7280; text-align: center; }
    .auth-error { background: #fee2e2; color: #b91c1c; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: .85rem; }
    .auth-success { background: #d1fae5; color: #065f46; padding: 10px 12px; border-radius: 8px; margin-top: 12px; font-size: .85rem; }
    .auth-close { float: inline-end; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: #6b7280; margin: -8px -8px 0 0; }
    /* fm406e — Google sign-in primary button + divider + guest hint */
    .google-signin-btn {
      width: 100%; display: flex; align-items: center; justify-content: center;
      gap: 10px; padding: 12px 16px; border-radius: 10px;
      border: 1px solid #d1d5db; background: #fff; color: #0a0e1a;
      font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
      margin-top: 4px; transition: background .15s, box-shadow .15s, border-color .15s;
      box-shadow: 0 1px 2px rgba(10,14,26,.04);
    }
    .google-signin-btn:hover { background: #f9fafb; border-color: #9ca3af; box-shadow: 0 2px 4px rgba(10,14,26,.08); }
    .google-signin-btn:active { background: #f3f4f6; }
    .google-signin-btn:disabled { opacity: .55; cursor: not-allowed; }
    .auth-guest-hint { margin: 10px 2px 0; font-size: .78rem; color: #6b7280; line-height: 1.5; text-align: center; }
    .auth-divider {
      display: flex; align-items: center; gap: 10px;
      margin: 18px 0 4px; color: #9ca3af; font-size: .78rem; font-weight: 600;
    }
    .auth-divider::before, .auth-divider::after {
      content: ''; flex: 1; height: 1px; background: #e5e7eb;
    }
    .auth-divider span { white-space: nowrap; }

/* ─── Block 3: prescription upload + camera styles (was lines 7306-7532) ─── */
    /* Backdrop: subtle blur for depth without distraction */
    .vg-backdrop {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(10,14,26,.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0; pointer-events: none;
      visibility: hidden;
      transition: opacity .22s cubic-bezier(.22,.61,.36,1), visibility 0s linear .22s;
    }
    .vg-backdrop[data-open="true"] {
      opacity: 1; pointer-events: auto;
      visibility: visible;
      transition: opacity .22s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
    }

    /* Default sheet (mobile-first): slides up from bottom.
       fm233 fix: visibility + pointer-events are the BULLETPROOF closed
       state. The transform alone can leave the sheet inside the viewport
       on tall desktop screens where the math doesn't fully push it off.
       Visibility transition is delayed so the slide-down animation has
       time to play on close. */
    .vg-sheet {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 9001;
      background: #ffffff;
      border-radius: 24px 24px 0 0;
      box-shadow: 0 -20px 60px rgba(10,14,26,.18);
      transform: translateY(110%);
      visibility: hidden; pointer-events: none;
      transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;
      max-height: 92vh; overflow-y: auto;
      padding: 8px 24px 28px;
      font-family: 'Tajawal', system-ui, sans-serif;
    }
    .vg-sheet[data-open="true"] {
      transform: translateY(0);
      visibility: visible; pointer-events: auto;
      transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
    }
    .vg-grab {
      width: 40px; height: 4px; background: #d1d5db; border-radius: 999px;
      margin: 10px auto 18px; opacity: .8;
    }

    /* Desktop: centered modal */
    @media (min-width: 720px) {
      .vg-sheet {
        max-width: 460px;
        left: 50%; right: auto; bottom: 50%;
        transform: translate(-50%, calc(50% + 30px));
        border-radius: 20px;
        padding: 12px 32px 32px;
        box-shadow: 0 30px 80px rgba(10,14,26,.30);
      }
      .vg-sheet[data-open="true"] { transform: translate(-50%, 50%); }
      .vg-grab { display: none; }
    }

    /* Icon badge — navy circle with gold mail symbol */
    .vg-icon {
      width: 72px; height: 72px;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      border-radius: 50%;
      display: grid; place-items: center;
      margin: 6px auto 18px;
      box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--color-primary) 40%, transparent),
                  inset 0 1px 0 rgba(255,255,255,.18);
      position: relative;
    }
    .vg-icon::after {
      content: '';
      position: absolute; inset: -4px;
      border-radius: 50%;
      border: 2px solid var(--color-gold);
      opacity: .35;
    }
    .vg-icon svg { width: 32px; height: 32px; color: var(--color-gold); }

    .vg-title {
      text-align: center;
      font-size: 1.3rem;
      font-weight: 900;
      color: #0a0e1a;
      margin: 0 0 10px;
      line-height: 1.4;
    }
    .vg-sub {
      text-align: center;
      color: #6b7280;
      font-size: .95rem;
      line-height: 1.7;
      margin: 0 0 20px;
    }

    /* Email card */
    .vg-email-card {
      background: #faf7f2;
      border: 1px solid #f0e7d4;
      border-radius: 12px;
      padding: 14px 16px;
      margin: 0 0 20px;
      display: flex; align-items: center; gap: 12px;
    }
    .vg-email-card-icon {
      width: 32px; height: 32px; flex-shrink: 0;
      background: #fff; border-radius: 8px;
      display: grid; place-items: center;
      color: var(--color-gold);
      border: 1px solid #f0e7d4;
    }
    .vg-email-card-icon svg { width: 16px; height: 16px; }
    .vg-email-card-body { flex: 1; min-width: 0; }
    .vg-email-card-label {
      font-size: .72rem;
      font-weight: 700;
      color: #6b7280;
      letter-spacing: .5px;
      margin: 0 0 2px;
    }
    .vg-email-card-value {
      font-family: 'Inter', monospace;
      font-size: .92rem;
      font-weight: 700;
      color: var(--color-primary);
      direction: ltr;
      text-align: start;
      word-break: break-all;
      margin: 0;
    }

    /* Status badge — appears after resend success */
    .vg-status {
      display: none;
      align-items: center; gap: 8px;
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #6ee7b7;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: .88rem;
      font-weight: 700;
      margin: 0 0 16px;
    }
    .vg-status[data-show="success"], .vg-status[data-show="error"] { display: flex; }
    .vg-status[data-show="error"] {
      background: #fee2e2;
      color: #991b1b;
      border-color: #fca5a5;
    }
    .vg-status svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* Buttons */
    .vg-actions { display: flex; flex-direction: column; gap: 10px; }
    .vg-btn {
      width: 100%; padding: 13px 18px;
      border-radius: 12px; border: 0;
      font: inherit; font-size: 1rem; font-weight: 800;
      cursor: pointer;
      transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .vg-btn:active:not(:disabled) { transform: translateY(1px); }
    .vg-btn:disabled { opacity: .55; cursor: not-allowed; }
    .vg-btn--primary {
      background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
      color: #fff;
      box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-primary) 35%, transparent);
    }
    .vg-btn--primary:hover:not(:disabled) { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--color-primary) 50%, transparent); }
    .vg-btn--secondary {
      background: #fff;
      color: var(--color-primary);
      border: 1.5px solid var(--color-primary);
    }
    .vg-btn--secondary:hover:not(:disabled) { background: #e8edf4; }
    .vg-btn--ghost {
      background: transparent;
      color: #6b7280;
      font-weight: 700;
    }
    .vg-btn--ghost:hover:not(:disabled) { color: var(--color-primary); }
    .vg-btn--alt {
      background: #faf7f2;
      color: #6e1f29;
      border: 1.5px solid var(--color-gold);
      font-weight: 800;
    }
    .vg-btn--alt:hover:not(:disabled) { background: #f5edd9; }
    .vg-btn-icon { width: 16px; height: 16px; }
    .vg-divider {
      display: flex; align-items: center; gap: 12px;
      color: #9ca3af; font-size: .78rem; font-weight: 700;
      margin: 6px 0 2px;
    }
    .vg-divider::before, .vg-divider::after {
      content: ''; flex: 1; height: 1px; background: #e5e7eb;
    }
    .vg-divider span { padding: 0 2px; }

    /* Close (X) button on top-right */
    .vg-close {
      position: absolute; top: 14px; inset-inline-end: 14px;
      width: 32px; height: 32px;
      background: rgba(243,244,246,.8);
      border: 0; border-radius: 50%;
      cursor: pointer;
      display: grid; place-items: center;
      color: #6b7280;
      transition: background .15s ease;
    }
    .vg-close:hover { background: #e5e7eb; color: #0a0e1a; }
    .vg-close svg { width: 14px; height: 14px; }

    /* Footer micro-hint */
    .vg-footer-note {
      text-align: center;
      font-size: .78rem;
      color: #9ca3af;
      margin: 16px 0 0;
      line-height: 1.6;
    }
    .vg-footer-note svg { width: 12px; height: 12px; vertical-align: -2px; color: var(--color-gold); margin-inline-end: 4px; }

    /* Disabled scroll on body while open */
    body.vg-open { overflow: hidden; }