

<!--

    Author: Yong Jun
    Template Version: 1.0.9
    Created At: Jan 8 2026
    Last Updated: 2026-07-06
    changelog:
    - v1.0.9 (2026-07-06, in-place): showMessage() icon centering — render the injected Material Symbol
      as a block with line-height:1 (was inline, sitting on the baseline and appearing high in the
      cream badge). Pairs with the same fix in head_v1.0.6. Visual-only.
    - v1.0.9 (2026-07-02, in-place): #canvasMessage overlay z-[1050] -> z-[2000] — page modals
      (addresses #addressModal/#deleteModal, my-orders pay chooser) also sit at z-[1050] and appear
      LATER in the DOM, so an equal-z showMessage rendered BEHIND an open modal (same fix as
      head_v1.0.6). Alert layer must top everything.
    - v1.0.9 (2026-06-22): i18n the #canvasMessage CLOSE button — static "Close" -> server-side
      OK (active-language, CSS still uppercases). Dropped the
      dead data-lang="M00111" (legacy translations[] applier no longer wired on these pages). Pairs
      with sharejs_v1.0.6 (window.t bridge) + general_v3.0.3.js (modal title via window.t). Markup
      otherwise byte-identical to v1.0.8.
    - v1.0.8 (2026-06-18, in-place): Themed the #canvasMessage success/error modal to the MrFlower
      brand (was generic): card -> rounded-[20px] + token border/bg + soft shadow; Close button
      gray -> olive var(--signin-btn-bg-color) square uppercase; close-icon hover blue -> var(--primary-color).
      Pairs with general_v3.0.2.js showMessage() icon colors now reading --success-color/--warning-color
      (token + hex soft-fallback). Modal is what verify-otp shows on verify success/failure.
      STANDARDIZED (3rd pass, /ui-ux-pro-max): tightened to a centered max-w-[420px] alert card (was
      40vw), brand ink scrim rgba(42,40,32,0.55) (was black/80), spring entrance (vo-modal-pop, 0.24s,
      reduced-motion guarded), consistent px-8 spacing, comfortable min-w-[160px] CLOSE, focus-visible
      olive rings on both close affordances + cursor-pointer. All showMessage hooks preserved.
      CONTENT brand idiom (2nd pass): #canvasIcon is now a cream circular badge (60px, #F0EDD0) with
      the injected Material Symbol shrunk 54px->30px via scoped !important to fit; #canvasTitle is
      serif Quinstory olive (was bold-black); message uses --primary-text-color. Matches the
      verify-otp / reset-password modal badges.
    - v1.0.8 (2026-06-18): Redesigned the #toast-container .toast to the MrFlower brand (replaces the
      bootstrap-green toast). success accent -> var(--color-brand-primary) #6B6437 (olive); error ->
      var(--error-color); warning amber. Icon now sits in a soft CREAM circular badge
      (.toast-left = 34px round, --color-bg-cream-subtle bg). Width is CONTENT-FIT and capped to
      min(400px, 100vw-40px) so it can NEVER overflow the viewport right edge (fixes the prior
      off-alignment). Radius 14px, warm olive-tinted shadow, msg weight 500. Spring entry
      (translateY/X+scale, cubic-bezier), exit faster than enter, prefers-reduced-motion honored.
      Container gets role=status aria-live=polite (a11y). STRUCTURE UNCHANGED
      (.toast/.toast-left/center/right/progress + .show/.hide/.success/.error/.warning) so
      general_v3.0.2 showToast() is unaffected. Forked from head_v1.0.7. Consumers: product-detail.php,
      favourite.php (others remain on v1.0.7 until rolled forward).
      [2026-06-18 follow-up] Toast repositioned + recolored (operator request). Position:
      TOP-RIGHT (top:20px; align-items:flex-end), slides in from the top-right. Color: now
      GREEN-dominant — solid --color-brand-primary (#6B6437 olive) field, white text/close,
      translucent-white icon badge, white progress bar. error/warning override the field
      (red / amber) to stay semantic. CSS-only; structure + showToast() contract unchanged.
      Applies to both consumers identically.
    - v1.0.7 (2026-06-15): SEO meta block reads FLAT $seoData['key'] instead of the legacy nested
      $seoData['key'][0]['text']. Aligns member with the centralized SEO pipeline
      (class.general_v2.0.x loadSeoData + build-seo.php generated seo.php both emit flat strings)
      and the seller head (flat since head_v1.0.3). Forked from head_v1.0.6 — ONLY the 28 SEO echoes
      changed; canvasMessage modal, toast mount + styles, and CSS links are byte-identical. Consumers
      must set $seoData['key'] as flat scalars (e.g. product-detail.php v1.0.17). reset-password.php
      stays on head_v1.0.6 (no $seoData assignment → renders empty either way).
    - v1.0.6 (2026-06-10): showToast() mount point. Adds a pre-rendered
      <div id="toast-container"> after #canvasMessage + a scoped <style> with the
      .toast component rules (ported from seller/css/main_v1.0.1.css — member's
      main.min.css only carries the legacy toastr classes, not this component).
      Fixes: general_v3.0.2 showToast() does document.getElementById('toast-container')
      .appendChild() with NO null guard — on member pages the container never existed,
      so any success callback calling showToast() (e.g. reset-password sendResetCode)
      THREW, which also skipped jQuery's complete handler, leaving every <button>
      disabled (ajaxSend disables all buttons during a request and re-enables them in
      complete). Forked from head_v1.0.5 (otherwise unchanged).
    - v1.0.5 (2026-06-05): centered the #canvasMessage modal — overlay gains items-center
      justify-center (active once showMessage adds `flex`); top offsets (pt-10 / mt-10) dropped,
      so the popup sits dead-center instead of top-aligned. Forked from head_v1.0.4 (otherwise
      unchanged). Pairs with general_v3.0.2 (Tailwind showMessage) via sharejs_v1.0.4.
    - Use tailwind.ss
    - Not using bootstrap, custom_v1.0.0.css and general_v1.0.0.css
    - Updated canvas message
    - 2026-05-21: Wired theme_member_v1.0.0.css (V6 brand tokens + Tier-2/Tier-3
                  helpers including .si-* for sign-in) + Inter Google Fonts
                  (weights 400-900). Affects consumers: index.php, product.php,
                  index-shop.php, index-new.php, sign-in.php. Pages on the older
                  member/head.php chain (homepage.php, sign-up.php, checkout.php,
                  etc.) still load the legacy theme_v1.0.0.css and are NOT yet
                  on the new palette.
    - 2026-05-28: Added <link> to /css/theme_v1.0.0.css so pages on the
                  Tailwind+tokens paradigm can read project-wide palette
                  tokens (--primary-text-color, --btn-primary-bg-color,
                  --input-bg-color, etc.) via arbitrary-value syntax:
                      bg-[var(--btn-primary-bg-color)]
                      text-[var(--primary-text-color)]
                  theme_member_v1.0.0.css still loads (after theme_v1.0.0)
                  for pages still on the .si-* / .gs-* class system. Editing
                  theme_v1.0.0.css now changes the palette for any page on
                  the new paradigm. In-place edit (no version bump) —
                  sign-in.php is the first page on the new paradigm and
                  fresh project means no other live consumer is on a newer
                  head version.
    - 2026-05-28: Removed <link> to /css/theme_member_v1.0.0.css and deleted
                  the file. Audit showed all .si-* / .gs-* classes and
                  --gs-* tokens are unreferenced across the 5 pages on
                  head_v1.0.4 (index, index-shop, product, index-new,
                  sign-in). The only living dependency was the global
                  html/body baseline (cream bg + ink text + Inter font),
                  reproduced here via Tailwind utility classes on the
                  <html> tag (bg/color/font cascade down to body).
                  Values stay V6-design-hex for now; can be promoted to
                  theme_v1.0.0.css tokens later if a wider palette flip
                  is wanted.
-->
<!DOCTYPE html>

<html lang="en" class="bg-[#F4F1EA] text-[#1B1F2A] font-sans">
<!-- begin::Head -->
<head>

	<meta charset="utf-8"/>
    <title>Your Cart — Mr Flower</title>
    <link rel="shortcut icon" href="/images/project/MF-Logo-tm-ori-fav.webp" />
    <meta name="description" content="Order fresh, handcrafted flower bouquets from Mr Flower with same-day delivery across the Klang Valley — for birthdays, condolences, openings, bridal & more.">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mr Flower">
    <link rel="canonical" href="">
    <meta property="og:title" content="Mr Flower — Same-Day Flower Delivery in Klang Valley">
    <meta property="og:description" content="Fresh, handcrafted flower bouquets with same-day delivery across the Klang Valley. Mr Flower — crafted with love and care for every moment.">
    <meta property="og:url" content="">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Mr Flower">
    <meta property="og:locale" content="en_MY">
    <meta property="og:image" content="https://www.mrflower.com.my/images/project/mr-flower-og-1200x630.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:video" content="">
    <meta property="og:video:width" content="">
    <meta property="og:video:height" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Mr Flower — Same-Day Flower Delivery in Klang Valley">
    <meta name="twitter:description" content="Fresh, handcrafted flower bouquets with same-day delivery across the Klang Valley. Mr Flower — crafted with love and care for every moment.">
    <meta name="twitter:image" content="https://www.mrflower.com.my/images/project/mr-flower-og-1200x630.jpg">
    <meta name="twitter:site" content="">
    <meta name="twitter:creator" content="">
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="">
    <meta name="robots" content="noindex, nofollow">
    <!-- SEO Meta - End -->

   <link href="/css/style.css?v=1783607734" rel="stylesheet" type="text/css" />
   <link rel="preload" href="/css/fonts/googleIcon.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/css/main_v1.0.0.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript>
      <link rel="stylesheet" href="/css/main_v1.0.0.css">
   </noscript>

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <!--
     theme_v1.0.0.css — project-wide palette tokens (--primary-text-color,
     --btn-*-color, --input-*-color, …). Pages on the Tailwind+tokens paradigm
     read these via arbitrary values: bg-[var(--btn-primary-bg-color)]
   -->
   <link href="/css/theme_v1.0.0.css?v=1783479160" rel="stylesheet" type="text/css">
</head>
<!-- end::Head -->
<div id="canvasLoader" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-50">
    <div id="canvasLoaderContainer" class="flex items-center justify-center">
        <span class="material-symbols-outlined animate-spin text-9xl text-white" style="font-size:70px;">
            progress_activity
        </span>
    </div>
</div>

<div class="fixed inset-0 z-[2000] hidden items-center justify-center p-5 bg-[rgba(42,40,32,0.55)] outline-none transition-opacity duration-300" id="canvasMessage" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-modal="true" data-keyboard="false" data-backdrop="static">
   <div class="relative mx-auto w-full max-w-[420px] pointer-events-none">
      <div class="vo-modal-pop relative flex w-full flex-col pointer-events-auto rounded-[20px] border border-[color:var(--primary-border-color)] bg-[color:var(--default-bg-color)] shadow-[0_24px_60px_rgba(0,0,0,0.25)] outline-none overflow-hidden">
         <div class="flex items-start justify-end px-4 pt-4">
               <button type="button" class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent text-gray-300 hover:text-[color:var(--primary-color)] hover:bg-black/[0.04] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--primary-color)] transition-colors cursor-pointer" id="canvasCloseIconBtn" onclick="closeCanvasModal()" aria-label="Close">
                  <span class="sr-only">Close</span>
                  <i class="material-symbols-outlined" aria-hidden="true">close</i>
               </button>
         </div>
         <div class="relative flex-auto px-8 pb-2 flex flex-col items-center text-center">
               <div id="canvasIcon" class="w-[60px] h-[60px] mx-auto rounded-full bg-[#F0EDD0] flex items-center justify-center"></div>
               <div id="canvasTitle" class="mt-4 text-[length:var(--fs-22,22px)] leading-none font-normal text-[color:var(--primary-color)] font-['Quinstory',Georgia,serif] w-full"></div>
               <div id="canvasAlertMessage" class="mt-2 text-[length:var(--md-text-size,14px)] leading-relaxed text-[color:var(--primary-text-color)]"></div>
         </div>
         <div class="flex flex-wrap items-center justify-center gap-2.5 px-8 pt-5 pb-8 modal-footer">
               <button id="canvasCloseBtn" type="button" class="min-w-[160px] inline-flex items-center justify-center rounded-[6px] bg-[color:var(--signin-btn-bg-color)] px-6 h-12 text-[length:var(--btn-font-size,13px)] font-bold uppercase tracking-[0.06em] text-white hover:bg-[color:var(--signin-btn-hover-bg-color)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--primary-color)] transition-colors cursor-pointer" onclick="closeCanvasModal()">
                  OK               </button>
         </div>
      </div>
   </div>
</div>

<!-- showToast() mount point (general_v3.0.2 appendChild's into this with no null guard —
     it must exist on first paint). Component styles scoped here because member's
     main.min.css only carries the legacy toastr classes, not this .toast component
     (rules ported verbatim from seller/css/main_v1.0.1.css / admin_ui_v1.0.2.css). -->
<div id="toast-container" role="status" aria-live="polite" aria-atomic="true"></div>
<style>
/* #canvasMessage icon: showMessage() injects a 54px Material Symbol with an inline font-size.
   Shrink it to sit inside the cream circular badge (#canvasIcon), matching the brand modal idiom
   (verify-otp / reset-password badges). !important overrides the inline style.
   Render the glyph as a block with line-height:1 so it centres geometrically in the flex badge
   instead of sitting on the text baseline (which pushed it visibly high). */
#canvasMessage #canvasIcon { line-height:1; }
#canvasMessage #canvasIcon .material-symbols-outlined { font-size:30px !important; line-height:1 !important; display:block; }

/* #canvasMessage entrance — spring pop+fade, runs each time the modal is shown (showMessage adds
   .flex). Exit is the existing opacity transition. Respects reduced-motion. */
@keyframes vo-modal-pop { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:none; } }
#canvasMessage.flex .vo-modal-pop { animation: vo-modal-pop 0.24s cubic-bezier(0.34,1.3,0.64,1); }
@media (prefers-reduced-motion: reduce) { #canvasMessage.flex .vo-modal-pop { animation: none; } }

/* Toast — MrFlower brand. Content-fit width capped to the viewport so it can
   never overflow the right edge (the old off-alignment bug). Icon sits in a soft
   cream circular badge; spring entry; exit faster than enter. */
/* Container SPANS the full viewport (left:0; right:0) with 20px gutters and
   right-aligns the toast at the TOP edge. Full-width padded box guarantees no
   overflow — the toast physically cannot pass either edge. z-index 9999 keeps
   it above the sticky header. */
#toast-container {
    position: fixed; top: 20px; left: 0; right: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 0 20px; pointer-events: none;
}
/* ID-scoped (#toast-container ...) so these always beat any legacy .toast /
   .toast-success rule (e.g. Metronic main.min.css #1dc9b7 teal) regardless of
   load order — the toast can never render teal or overflow again. */
#toast-container .toast {
    position: relative; display: flex; align-items: center; gap: 2px;
    background: var(--color-brand-primary, #6B6437);
    width: auto; min-width: 0; max-width: min(400px, 100%); box-sizing: border-box;
    padding: 13px 14px; pointer-events: auto; font-size: 14px;
    border: 1px solid var(--color-brand-primary-dark, #4E4A28);
    border-radius: 14px; box-shadow: 0 14px 34px -10px rgba(78,74,40,.45); margin-bottom: 12px;
    overflow: hidden; opacity: 0; transform: translateY(-10px) translateX(14px) scale(.97);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
    backdrop-filter: none; color: #fff;
}
#toast-container .toast.show { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
#toast-container .toast.hide { opacity: 0; transform: translateX(14px) scale(.97); transition: opacity .2s ease, transform .2s ease; }
#toast-container .toast-left  { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 18px; }
#toast-container .toast-center { flex: 1; padding: 0 10px; line-height: 1.45; word-break: break-word; font-size: 14px; font-weight: 500; color: #fff; }
#toast-container .toast-right { width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#toast-container .toast-close { cursor: pointer; font-size: 18px; line-height: 1; color: rgba(255,255,255,.7); transition: color .2s; }
#toast-container .toast-close:hover { color: #fff; }
#toast-container .toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; opacity: .9; }
/* Green-dominant by default (success). Icon sits in a translucent-white badge on the
   green field; progress bar is white. error/warning override the field to stay semantic. */
#toast-container .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.success .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.success .toast-progress { background: rgba(255,255,255,.9); }
#toast-container .toast.error   { background: var(--error-color, #FD397A); border-color: #d62a64; }
#toast-container .toast.error   .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.error   .toast-progress { background: rgba(255,255,255,.9); }
#toast-container .toast.warning { background: #B7791F; border-color: #9c6717; }
#toast-container .toast.warning .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.warning .toast-progress { background: rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) {
    #toast-container .toast { transition: opacity .2s ease; transform: none; }
    #toast-container .toast.show { transform: none; }
    #toast-container .toast.hide { transform: none; }
}
</style>

<style>
    /* Header promo strip — running/marquee ticker (mirrors the live mrflower.com.my behavior;
       previously rendered static, see v1.0.2/v1.0.13 changelog). Two copies of the message render
       side by side in an inline-flex track (auto-sized to content, so its width is exactly 2x one
       copy); scrolling translateX(-50%) lands exactly on the seam between the two copies, so the
       loop is gapless. */
    .gs-marquee-track { display: inline-flex; white-space: nowrap; animation: gs-marquee 18s linear infinite; }
    .gs-marquee-item { display: inline-block; padding-right: 3rem; }
    @keyframes gs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .gs-marquee-track:hover { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .gs-marquee-track { animation: none; } }
</style>

<section class="sticky top-0 z-30 w-full bg-[color:var(--default-bg-color)] shadow-[0_2px_6px_rgba(0,0,0,0.06)]">

    <!-- Announcement / promo strip — CONFIGURABLE SLOT (no hardcoded/time-bound copy).
         Renders whenever header.promo.text is non-empty. (Was ALSO gated on
         $pageSetting['header_promo_enabled'] — removed in v1.0.13: that check compared a flat
         key against $pageSetting, which is actually shaped {microservice => [setting rows]}
         (class.general_v2.0.4's absorbMsSettingResults()), so it could never be true, and no
         setting named header_promo_enabled exists in any settings source file either — the gate
         was structurally broken from day one, not an unset toggle. To hide the strip now, blank
         out header.promo.text in lang/en.php.)
         Copy -> lang/en.php (header.promo.text). -->
        <div class="w-full overflow-hidden bg-[color:var(--header-promo-bg-color,#007514)] text-[color:var(--header-promo-text-color,#fff)] text-[length:var(--sm-text-size)] py-2 leading-snug">
        <div class="gs-marquee-track">
            <span class="gs-marquee-item">Welcome to Mr Flower - Craft with passion. Designed for you.</span>
            <span class="gs-marquee-item" aria-hidden="true">Welcome to Mr Flower - Craft with passion. Designed for you.</span>
        </div>
    </div>
    
    <div class="max-w-[1380px] mx-auto px-4 sm:px-6 md:px-12 h-[72px] flex items-center gap-3 lg:gap-4">

        <!-- Logo -->
        <a href="/" class="flex-shrink-0 inline-flex items-center no-underline mr-auto lg:mr-0" aria-label="Mr Flower homepage">
            <img src="/images/project/MF-Logo-tm-ori.webp" width="200" height="66" class="h-9 lg:h-[58px] w-auto block" alt="Mr Flower" fetchpriority="high">
        </a>

        <!-- Desktop nav (centered) -->
        <nav class="hidden lg:flex items-center gap-7 mx-auto">
            <a href="/" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Home</a>
            <a href="/products" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Shop</a>
            <a href="/about-us" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">About Us</a>
            <a href="/contact-us" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Contact Us</a>
            <a href="/track-order" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Track Order</a>
        </nav>

        <!-- Right icons -->
        <div class="flex items-center gap-1 lg:gap-2 flex-shrink-0">

            <!-- Search (icon toggles the input row below) -->
            <button type="button" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="Search products"
                    aria-controls="headerSearch" onclick="toggleHeaderSearch(event)">
                <span class="material-symbols-outlined" aria-hidden="true">search</span>
            </button>

            <!-- Account: profile dropdown when logged in, Sign In + Sign Up when anon (master auth/anon pattern) -->
                            <a href="/sign-in" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="Sign In">
                    <span class="material-symbols-outlined" aria-hidden="true">person</span>
                </a>
            
            <!-- Favourite (before Cart — per design action order). Wrapped in a hidden/lg:flex
                 container (NOT a class on the <a>, because $gsIconBtn carries inline-flex which
                 would override `hidden`) so it leaves the mobile action row entirely, keeping the
                 44px controls inside a 360px viewport. Surfaced as a drawer row instead (below). -->
            <span class="hidden lg:flex">
                <a href="/favourite" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="View favourite products">
                    <span class="material-symbols-outlined" aria-hidden="true">favorite_border</span>
                </a>
            </span>

            <!-- Cart -->
                        <a href="/cart" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0 relative" aria-label="View shopping cart">
                <span class="material-symbols-outlined" aria-hidden="true">shopping_cart</span>
                <span id="headerCartBadge" data-cart-badge class="absolute -top-0.5 -right-0.5 bg-[color:var(--btn-primary-bg-color)] text-white rounded-full w-4 h-4 text-[length:var(--fs-10)] flex items-center justify-center font-bold hidden" aria-hidden="true">0</span>
            </a>

            <!-- Mobile hamburger — LAST action icon (per design); toggles the dropdown panel below. -->
            <button type="button" class="lg:hidden inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" onclick="toggleMobileNavPublic(event)"
                    aria-label="Menu" aria-expanded="false" aria-controls="mobileNavPanel">
                <span class="material-symbols-outlined" aria-hidden="true">menu</span>
            </button>
        </div>
    </div>

    <!-- Search input row (toggled by the search icon) -->
    <!-- Search overlay (design Wa9KQo5O .mf-search-*): drops full-width below the header, pill field
         + arrow submit + close ×; slide-down via data-[open]; closes on backdrop / Esc / × . -->
    <div id="headerSearch" data-open="false" role="dialog" aria-label="Search products"
         class="absolute top-full left-0 right-0 z-30 bg-[color:var(--default-bg-color)] border-b border-[color:var(--primary-border-color)] shadow-[0_18px_40px_rgba(42,40,32,0.13)] -translate-y-full opacity-0 invisible transition-all duration-300 ease-out data-[open=true]:translate-y-0 data-[open=true]:opacity-100 data-[open=true]:visible">
        <div class="max-w-[1280px] mx-auto px-4 lg:px-8 py-6 lg:py-8">
            <div class="flex items-center gap-4">
                <form action="/products" method="get" class="flex-1 min-w-0 flex items-center gap-3 rounded-full border border-[color:var(--primary-border-color)] bg-[color:var(--default-secondary-bg-color)] px-5 py-3 transition-colors focus-within:border-[color:var(--primary-color)]">
                    <span class="material-symbols-outlined text-[color:var(--primary-color)]" aria-hidden="true">search</span>
                    <input type="text" name="q" id="headerSearchInput" autocomplete="off"
                           class="flex-1 min-w-0 bg-transparent border-0 outline-none text-[length:var(--md-text-size)] text-[color:var(--primary-text-color)] placeholder:text-[color:var(--input-placeholder-color)]"
                           placeholder="Search for flowers, bouquets…" value="">
                    <button type="submit" class="flex items-center bg-transparent border-0 cursor-pointer text-[color:var(--primary-color)] hover:opacity-70" aria-label="Search products">
                        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
                    </button>
                </form>
                <button type="button" onclick="closeHeaderSearch()" aria-label="Close search"
                        class="shrink-0 w-10 h-10 inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-[color:var(--primary-text-color)] hover:text-[color:var(--primary-color)] hover:rotate-90 transition-transform">
                    <span class="material-symbols-outlined" aria-hidden="true">close</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile nav dropdown (design pattern): full-width panel dropping below the header,
         toggled by the hamburger, closed on outside-click / Esc. Hidden by default + always
         hidden at lg (desktop uses the inline nav). Replaces the v1.0.7 left slide-in drawer. -->
    <nav id="mobileNavPanel" aria-label="Menu"
         class="hidden lg:!hidden absolute top-full left-0 right-0 z-40 bg-[color:var(--default-bg-color)] border-b border-[color:var(--primary-border-color)] shadow-[0_10px_28px_rgba(0,0,0,0.10)] px-6 pb-1">
        <a href="/"     class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Home</a>
        <a href="/products"  class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Shop</a>
        <a href="/about-us"     class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">About Us</a>
        <a href="/contact-us"   class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Contact Us</a>
        <a href="/track-order"  class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Track Order</a>
        <!-- Favourite kept in the menu (not the mobile action row) — operator decision (44px touch / no 360 overflow). -->
        <a href="/favourite"    class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Favourite</a>
        <!-- Cart removed from the drawer (v1.0.13f) — redundant: the cart icon is always visible in the
             mobile action row. Favourite stays: its icon is hidden < lg, so the drawer is its only access. -->
        <!-- Logged-in profile block intentionally NOT repeated here: the account-icon dropdown
             (#topBarDropdown, shown on mobile too) already carries name + Account/Orders/Rewards/Sign Out. -->
    </nav>
</section>

<!-- Search backdrop (dims the page below the header while the search overlay is open). -->
<div id="headerSearchBackdrop" onclick="closeHeaderSearch()" class="hidden fixed inset-0 z-20 bg-black/30"></div>

<script>
// Search overlay (v1.0.10) — drops below the header, closes on backdrop / Esc / × .
function openHeaderSearch(e){ if(e) e.preventDefault();
  var o=document.getElementById('headerSearch'), b=document.getElementById('headerSearchBackdrop'), t=document.querySelector('[aria-controls="headerSearch"]');
  if(o) o.dataset.open='true'; if(b) b.classList.remove('hidden'); if(t) t.setAttribute('aria-expanded','true');
  var i=document.getElementById('headerSearchInput'); if(i) setTimeout(function(){ i.focus(); }, 220);
}
function closeHeaderSearch(){
  var o=document.getElementById('headerSearch'), b=document.getElementById('headerSearchBackdrop'), t=document.querySelector('[aria-controls="headerSearch"]');
  if(o) o.dataset.open='false'; if(b) b.classList.add('hidden'); if(t) t.setAttribute('aria-expanded','false');
}
function toggleHeaderSearch(e){ if(e){ e.preventDefault(); e.stopPropagation(); } var o=document.getElementById('headerSearch'); if(!o) return; o.dataset.open==='true' ? closeHeaderSearch() : openHeaderSearch(); }
document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeHeaderSearch(); });

// Self-contained mobile-nav toggle (v1.0.8). The legacy openMobileMenuPublic/closeMobileMenuPublic
// were undefined on the live page (general_v1.0.2.js no longer loaded), so define them here +
// keep the names. They drive #mobileNavPanel (show = remove 'hidden').
function openMobileMenuPublic(){ var p=document.getElementById('mobileNavPanel'); if(p){ p.classList.remove('hidden'); var b=document.querySelector('[aria-controls="mobileNavPanel"]'); if(b) b.setAttribute('aria-expanded','true'); } }
function closeMobileMenuPublic(){ var p=document.getElementById('mobileNavPanel'); if(p){ p.classList.add('hidden'); var b=document.querySelector('[aria-controls="mobileNavPanel"]'); if(b) b.setAttribute('aria-expanded','false'); } }
function toggleMobileNavPublic(e){ if(e) e.stopPropagation(); var p=document.getElementById('mobileNavPanel'); if(!p) return; p.classList.contains('hidden') ? openMobileMenuPublic() : closeMobileMenuPublic(); }
document.addEventListener('click', function(e){
    var p=document.getElementById('mobileNavPanel');
    if(!p || p.classList.contains('hidden')) return;
    var hdr=p.parentElement;                       // the sticky <section>
    if(hdr && !hdr.contains(e.target)) closeMobileMenuPublic();
});
document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeMobileMenuPublic(); });

// Cart badge live-update — single source of truth for #headerCartBadge. Pages call
// applyHeaderCartBadge(n) after a cart mutation (PDP add, cart.php qty/remove) so the
// count updates without a reload. Hidden when 0. Mirrors the favourite-heart pattern.
window.applyHeaderCartBadge = function(count){
    var el = document.getElementById('headerCartBadge');
    if(!el) return;
    var n = parseInt(count, 10); if(isNaN(n) || n < 0) n = 0;
    el.textContent = n;
    el.classList.toggle('hidden', n <= 0);
};
</script>

<!-- (v1.0.8) The left slide-in drawer + overlay were removed — replaced by #mobileNavPanel inside
     the header section above. $gsMobileLink retained in the bundle list in case other pages reference it. -->

<!--------------------------------------------------------Start of HTML block (start)-------------------------------------------------------->
<body class="min-h-screen flex flex-col bg-[color:var(--color-bg-white)] text-[color:var(--primary-text-color)]">
    <main class="flex-1">

        <!-- Hero band — cream, centered: eyebrow · serif title · item-count pill -->
        <section class="bg-[color:var(--color-bg-cream-subtle)] py-10 sm:py-12 text-center">
            <div class="max-w-[1320px] mx-auto px-4 sm:px-6">
                <div class="text-[12px] font-semibold tracking-[0.18em] uppercase text-[color:var(--color-brand-primary)] mb-2">My Orders</div>
                <h1 class="m-0 text-[34px] sm:text-[44px] leading-none font-normal text-[color:var(--color-brand-primary)] font-['Quinstory',Georgia,serif]">Shopping Cart</h1>
                <div class="mt-4">
                    <!-- #cartSubtitle preserved (recomputeSummary sets its text); restyled as the count pill. -->
                    <span id="cartSubtitle" class="inline-block rounded-full bg-[color:var(--default-bg-color)] border border-[color:var(--color-bg-cream-subtle)] px-4 py-1.5 text-[12px] font-semibold uppercase tracking-[0.08em] text-[color:var(--color-text-muted)]">
                        0 items                    </span>
                </div>
            </div>
        </section>

        <div class="max-w-[1320px] mx-auto px-4 sm:px-6 pt-6 pb-12">

            <!-- Cart-change notice — shown once by JS (showCartChangeNotice) when the GET reconcile
                 moved a price or auto-reduced a qty (out-of-stock excluded — it has its own guard).
                 Dismissible. Outer stays block; inner is flex so `hidden` never fights flex display. -->
            <div id="cartChangeNotice" class="hidden mb-6">
                <div class="flex items-center gap-3 rounded-[10px] border-l-4 border border-[color:var(--warning-color,#E0A800)] bg-[color:var(--color-bg-cream-subtle)] px-4 py-3">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-[color:var(--warning-color,#E0A800)]"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <p class="flex-1 m-0 text-[13px] text-[color:var(--primary-text-color)]">Your cart has been updated. Please review the changes.</p>
                    <button type="button" onclick="document.getElementById('cartChangeNotice').classList.add('hidden')" aria-label="Dismiss" class="shrink-0 bg-transparent border-0 text-[20px] leading-none text-[color:var(--color-text-muted)] hover:text-[color:var(--primary-text-color)] cursor-pointer">&times;</button>
                </div>
            </div>

            <!-- Empty state. Hidden when there are items; toggled by JS (showEmptyIfNeeded) after a
                 remove brings the list to 0. Block + text-center so the `hidden` toggle never fights a
                 `flex` display rule; children center via mx-auto / inline-flex. -->
            <div id="cartEmpty" class=" text-center py-20">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mx-auto text-[color:var(--color-text-muted)] mb-4">
                    <path d="M5 8h14l-1.2 9.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/>
                </svg>
                <div class="text-[15px] font-semibold text-[color:var(--primary-text-color)] mb-5">No Shopping Cart Items</div>
                <a href="/products" class="inline-flex items-center justify-center h-11 px-7 rounded-[5px] bg-[color:var(--signin-btn-bg-color)] hover:bg-[color:var(--signin-btn-hover-bg-color)] text-white font-bold text-[13px] uppercase tracking-[0.06em] no-underline transition-colors">Shop Now</a>
            </div>

            <!-- Body: flat full-width table (no card, no summary sidebar — totals sit at the bottom-right). -->
            <div id="cartBody" class="hidden">

                <!-- Column headers -->
                <div class="grid grid-cols-[minmax(0,1fr)_84px_78px_18px] sm:grid-cols-[1fr_180px_170px_18px] gap-x-2 sm:gap-x-4 pb-3 border-b border-[color:var(--primary-border-color)] text-[14px] sm:text-[15px] font-medium text-[color:var(--primary-text-color)]">
                    <div>Product</div>
                    <div class="text-center">Quantity</div>
                    <div class="text-right">Total Price</div>
                    <div></div>
                </div>

                <!-- Items — renderItems() keeps available lines first and unavailable lines at the bottom. -->
                <div id="cartItems"></div>

                <!-- Unavailable-items checkout guard — shown by renderItems() when any line is out of
                     stock. "Remove Unavailable Item" clears every unavailable line in one pass. Outer stays block;
                     inner is flex so the `hidden` toggle never fights a flex display. -->
                <div id="cartUnavailableGuard" class="hidden mt-6">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-end gap-3 sm:gap-4">
                        <div class="inline-flex items-center gap-2 text-[13px] font-medium text-[color:var(--error-color,#FD397A)]">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                            <span>Please remove unavailable items before checking out.</span>
                        </div>
                        <button type="button" id="cartRemoveAllBtn" class="shrink-0 inline-flex items-center justify-center h-10 px-5 rounded-[5px] border border-[color:var(--error-color,#FD397A)] text-[color:var(--error-color,#FD397A)] bg-transparent font-bold text-[13px] uppercase tracking-[0.06em] hover:bg-[color:var(--error-color,#FD397A)] hover:text-white cursor-pointer transition-colors">
                            Remove Unavailable Item                        </button>
                    </div>
                </div>

                <!-- Totals bar -->
                <div class="mt-6 flex flex-col items-stretch sm:items-end gap-4">
                    <div class="flex items-baseline justify-between sm:block text-[16px]">
                        <span class="font-semibold text-[color:var(--primary-text-color)]">Total Amount :</span>
                        <span id="cartTotal" class="ml-1 text-[22px] font-bold text-[var(--gs-green,#10B981)]">RM0.00</span>
                    </div>
                    <button type="button" id="cartCheckoutBtn"
                            class="w-full sm:w-auto h-12 px-10 rounded-[5px] bg-[color:var(--signin-btn-bg-color)] hover:bg-[color:var(--signin-btn-hover-bg-color)] text-white font-bold text-[13px] uppercase tracking-[0.08em] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        Checkout                    </button>
                    <!-- Preserved-contract elements set by recomputeSummary() — kept in DOM (hidden) since
                         the design surfaces only the grand total + a label-free Checkout button. -->
                    <span id="cartSubtotal" class="hidden"></span>
                    <span id="cartCheckoutCount" class="hidden">0</span>
                </div>

            </div>
        </div>
    </main>

    
<footer class="w-full bg-[color:var(--footer-bg-color)] text-[color:var(--footer-text-color)]">
    <div class="max-w-[1380px] mx-auto px-6 md:px-12 py-10 md:py-12">

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

            <!-- Brand + social + language switcher -->
            <div>
                <a href="/" class="inline-block no-underline" aria-label="Mr Flower">
                    <img src="/images/project/MF-Logo-tm-ori-white.webp" alt="Mr Flower" width="250" height="82" class="h-[67px] w-auto block">
                </a>
                <div class="flex items-center gap-3 mt-4">
                    <a href="https://www.facebook.com/mrflowermy" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.01 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.08 24 18.09 24 12.07z"/></svg>
                    </a>
                    <a href="https://www.instagram.com/mrflower_my/?hl=en" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.43-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07zm0 2.76a5.46 5.46 0 1 0 0 10.92 5.46 5.46 0 0 0 0-10.92zm0 9a3.54 3.54 0 1 1 0-7.08 3.54 3.54 0 0 1 0 7.08zm6.95-9.22a1.27 1.27 0 1 1-2.55 0 1.27 1.27 0 0 1 2.55 0z"/></svg>
                    </a>
                    <a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.05 24l1.69-6.16a11.87 11.87 0 0 1-1.6-5.95C.14 5.34 5.5 0 12.08 0a11.82 11.82 0 0 1 8.42 3.49 11.74 11.74 0 0 1 3.5 8.41c0 6.55-5.36 11.89-11.95 11.89a12 12 0 0 1-5.72-1.45L.05 24zm6.6-3.81c1.68 1 3.28 1.6 5.42 1.6 5.45 0 9.9-4.42 9.9-9.88a9.8 9.8 0 0 0-2.9-6.98 9.9 9.9 0 0 0-6.99-2.9c-5.46 0-9.9 4.43-9.9 9.88 0 2.24.65 3.91 1.74 5.66l-1 3.65 3.73-1.03zm11.39-5.55c-.07-.12-.27-.2-.57-.35-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.11 3.22 5.11 4.51.71.31 1.27.49 1.71.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.42.25-.7.25-1.29.17-1.42z"/></svg>
                    </a>
                </div>

                <!-- Language switcher (globe + EN/中文/BM; ?lang= resolved by entry_v*.php) -->
                <div class="relative inline-block" data-footer-lang>
                    <button type="button" data-footer-lang-trigger class="inline-flex items-center gap-2 mt-6 px-3.5 py-2 rounded-full border border-white/25 bg-transparent cursor-pointer text-[length:var(--sm-text-size)] font-medium text-[color:var(--footer-text-color)] hover:border-white/50"
                            aria-label="Change language" aria-haspopup="true">
                        <span class="material-symbols-outlined text-[length:var(--fs-16)] leading-none" aria-hidden="true">language</span>
                        <span>EN</span>
                        <span class="material-symbols-outlined text-[length:var(--fs-16)] leading-none" aria-hidden="true">expand_more</span>
                    </button>
                    <div class="hidden absolute bottom-[calc(100%_+_10px)] left-0 min-w-[184px] bg-[color:var(--default-bg-color)] rounded-xl shadow-[0_-8px_32px_rgba(0,0,0,0.28)] overflow-hidden py-2 z-[9999]" data-footer-lang-menu>
                                                    <a href="/cart?lang=en" class="block px-4 py-2.5 text-[length:var(--sm-text-size)] no-underline text-[color:var(--primary-text-color)] hover:bg-[color:var(--secondary-bg-color)] font-bold">EN</a>
                                                    <a href="/cart?lang=zh-cn" class="block px-4 py-2.5 text-[length:var(--sm-text-size)] no-underline text-[color:var(--primary-text-color)] hover:bg-[color:var(--secondary-bg-color)] ">中文</a>
                                            </div>
                </div>
            </div>

            <!-- Our Store -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Our Store</h2>
                <a href="/" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Home</a>
                <a href="/products" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Shop</a>
                <a href="/about-us" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">About Us</a>
            </div>

            <!-- Quick Links -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Quick Links</h2>
                <a href="/contact-us" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Contact Us</a>
                <a href="/track-order" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Track Order</a>
                <a href="/terms-and-conditions" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Terms &amp; Conditions</a>
                <a href="/privacy-policy" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Privacy Policy</a>
            </div>

            <!-- Get In Touch -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Get In Touch</h2>
                <a href="https://maps.app.goo.gl/FvJDWtvKT3mVR63B7" target="_blank" rel="noopener noreferrer" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">location_on</i>
                    <span class="whitespace-pre-line">22, Jalan Sentosa,
Taman Chi Leong,
42000 Pelabuhan Klang,
Selangor.</span>
                </a>
                <a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">call</i>
                    <span>+6016-203 9516</span>
                </a>
                <a href="/cdn-cgi/l/email-protection#7714181903161403371a05111b180012055914181a591a0e" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">mail</i>
                    <span><span class="__cf_email__" data-cfemail="d8bbb7b6acb9bbac98b5aabeb4b7afbdaaf6bbb7b5f6b5a1">[email&#160;protected]</span></span>
                </a>
            </div>

        </div>

        <!-- Bottom bar: copyright + powered-by -->
        <div class="mt-10 pt-5 border-t border-[color:var(--footer-border-color,rgba(255,255,255,.2))] text-center">
            <p class="m-0 text-[length:var(--xs-text-size)] text-[color:var(--footer-text-color)]">
                Copyright &copy; 2026 Mr Flower Sdn Bhd (1015322 T). All Rights Reserved.            </p>
            <p class="m-0 mt-1 text-[length:var(--xs-text-size)] text-[color:var(--footer-text-color)]">
                Powered by                <a href="https://365production.net/" target="_blank" rel="noopener noreferrer" class="font-bold no-underline text-[color:var(--footer-text-color)] hover:opacity-80">365Production.net</a>
            </p>
        </div>

    </div>

    <!-- Footer language-switcher dropdown: toggle + click-outside (scoped) -->
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    (function () {
        var wrap = document.querySelector('[data-footer-lang]');
        if (!wrap) return;
        var trigger = wrap.querySelector('[data-footer-lang-trigger]');
        var menu    = wrap.querySelector('[data-footer-lang-menu]');
        if (!trigger || !menu) return;
        trigger.addEventListener('click', function (e) { e.stopPropagation(); menu.classList.toggle('hidden'); });
        document.addEventListener('click', function (e) { if (!wrap.contains(e.target)) menu.classList.add('hidden'); });
    })();
    </script>
</footer>

<!-- Floating WhatsApp CTA — matches the live production site (mrflower.com.my): fixed bottom-right,
     opens a WhatsApp chat with the same prefilled message as the footer's own WhatsApp icon/contact
     row above ($_gs_whatsapp, already computed). WhatsApp's brand green (#25D366) is a fixed
     third-party mark, not a themeable design-system color, so it's intentionally hardcoded here
     rather than mapped to a --color-* token. -->
<a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer"
   aria-label="Contact us on WhatsApp"
   class="fixed right-5 bottom-6 z-50 w-14 h-14 rounded-2xl bg-[#25D366] text-white shadow-lg flex items-center justify-center transition-transform hover:scale-105">
    <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.05 24l1.69-6.16a11.87 11.87 0 0 1-1.6-5.95C.14 5.34 5.5 0 12.08 0a11.82 11.82 0 0 1 8.42 3.49 11.74 11.74 0 0 1 3.5 8.41c0 6.55-5.36 11.89-11.95 11.89a12 12 0 0 1-5.72-1.45L.05 24zm6.6-3.81c1.68 1 3.28 1.6 5.42 1.6 5.45 0 9.9-4.42 9.9-9.88a9.8 9.8 0 0 0-2.9-6.98 9.9 9.9 0 0 0-6.99-2.9c-5.46 0-9.9 4.43-9.9 9.88 0 2.24.65 3.91 1.74 5.66l-1 3.65 3.73-1.03zm11.39-5.55c-.07-.12-.27-.2-.57-.35-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.11 3.22 5.11 4.51.71.31 1.27.49 1.71.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.42.25-.7.25-1.29.17-1.42z"/></svg>
</a>

    <!-- Remove-item confirmation modal — gates a line removal (design parity). removeItem() opens it;
         "Remove" -> confirmRemoveProceed() runs the cartMutate(qty=0). Brand idiom mirrors the
         verify-otp #sendConfirmOverlay (rounded-[20px] card, cream badge, olive confirm). -->
    <div id="removeConfirmOverlay" class="hidden fixed inset-0 z-[1000] bg-[rgba(42,40,32,0.52)] flex items-center justify-center p-5" onclick="closeRemoveConfirm()">
        <div class="w-full max-w-[420px] bg-[color:var(--default-bg-color)] rounded-[20px] shadow-[0_20px_60px_rgba(0,0,0,0.22)] overflow-hidden" onclick="event.stopPropagation()" role="dialog" aria-modal="true">
            <div class="px-8 pt-9 pb-6 text-center">
                <div class="w-[60px] h-[60px] mx-auto mb-[18px] rounded-full bg-[color:var(--color-bg-cream-subtle)] text-[color:var(--signin-btn-hover-bg-color)] flex items-center justify-center">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                </div>
                <h3 class="m-0 mb-2 text-[22px] leading-none font-normal text-[color:var(--color-brand-primary)] font-['Quinstory',Georgia,serif]">Remove Item?</h3>
                <p class="m-0 text-[14px] leading-relaxed text-[color:var(--primary-text-color)]">Are you sure you want to remove this item from your cart?</p>
            </div>
            <div class="flex gap-2.5 px-8 pb-8">
                <button type="button" onclick="closeRemoveConfirm()" class="flex-1 h-[50px] rounded-[6px] font-bold text-[13px] tracking-[0.06em] uppercase cursor-pointer bg-transparent text-[color:var(--primary-text-color)] border border-[color:var(--primary-border-color)] hover:bg-black/[0.03] transition-colors">Cancel</button>
                <button type="button" onclick="confirmRemoveProceed()" class="flex-1 h-[50px] inline-flex items-center justify-center rounded-[6px] font-bold text-[13px] tracking-[0.06em] uppercase cursor-pointer border-0 bg-[color:var(--signin-btn-bg-color)] hover:bg-[color:var(--signin-btn-hover-bg-color)] text-white transition-colors">Remove</button>
            </div>
        </div>
    </div>

    <!--
 @author Evan
@version 1.0.5
@created Jan 14 2026

Changelog:
- v1.0.5 (2026-06-18 in-place patch): library.min.js src made absolute (/js/library.min.js) — carries
  forward the v1.0.3/v1.0.4 fix this version forked before (v1.0.5 branched 06-10; v1.0.4's absolute
  patch landed 06-11, so it never reached here). The relative path broke on pages served at a deep
  URL (e.g. product-detail/<slug>/<pid>): the browser resolved it against the page dir and nginx's
  ^~ /product-detail/ block returned 404. Same fix goshopping/master applied to v1.0.3/v1.0.4.
- v1.0.5 (2026-06-10): added the inline checkPhoneNumber() helper (canonical 601… normalizer,
  same one goshopping's sharejs carries) — member/verify-otp.php's addphone/changephone flows
  call it before requesting the SMS OTP; member's chain had no definition (only admin's
  shareJs2 and a page-local copy in index.php). Referenced by verify-otp.php + verify-link.php;
  pages on v1.0.4 are unchanged.
- v1.0.4 (2026-06-05): bumped the general loader /share_js/general_v3.0.0.js -> general_v3.0.2.js
  (the Tailwind-modal general for member: closeCanvasModal + Tailwind showMessage/Material Symbols
  + catalog-driven validateInput + error-color). The window.__validationRules block below now
  actually drives field validation (v3.0.2 reads it; v3.0.0 did not). Pair with head_v1.0.5
  (centered Tailwind modal) + member/sign-in.php.
- v1.0.3 (2026-05-28): migrated general.js loader from legacy /js/general_v1.0.2.js
  to canonical /share_js/general_v3.0.0.js. Added filemtime-based ?v= cache busting
  so the browser re-fetches the JS whenever its mtime changes, but reuses the
  cached copy across page refreshes when unchanged. v1.0.2 line kept commented
  out for rollback reference. NOTE: path appears twice on the script line (once
  in src URL, once in filemtime call) — when bumping general_v*.js, update BOTH
  literals. The static URL form is required so the bump-includes skill can
  statically detect the dependency.
- v1.0.2 (2026-05-14 in-place patch): slow-page reporting upgraded to LCP trigger,
  matching seller/sharejs_v1.0.5 mechanism.
  • Bot detection ($isBot) skips Telegram alerts for bot/crawler traffic.
  • PerformanceObserver(__vmLcp) captures Largest Contentful Paint early.
  • collectPerfBreakdown() packs nav/paint/resource summary + top-5-slowest into
    queryTime.perfBreakdown. Backend reads this when simpleDebugLoadTime=0.
  • window.onload trigger changed from `totalPageLoadTime > 3` to LCP/TTFB-based:
      - $pageConfig['slowLcpMs']  default 3000 (Web Vitals "needs improvement")
      - $pageConfig['slowTtfbMs'] default 1500 (backend-regression safety net)
  • val993 header value = LCP-with-fallback (was onload totalPageLoadTime, noisy
    due to slow async resources users don't perceive).
  • Pair with entry_v1.0.2.php's existing `simpleNotification` wiring — set
    `$pageConfig['simpleDebugLoadTime'] => 0` per page for the full breakdown.
- v1.0.1: change the page url to use origin + path name instead of full url for slow page
-->


<!-- begin::Global Config(global config for global JS sciprts) -->
<!--begin:: Standard Member Platform JS -->
<script src="/js/library.min.js?v=2" type="text/javascript"></script>
<!-- <script src="js/general_v1.0.0.js" type="text/javascript"></script> -->
<!-- <script src="js/general_v1.0.2.js" type="text/javascript"></script> --> <!-- v1.0.3: superseded by /share_js/general_v3.0.2.js below -->
<!-- Shared input-validation catalog (window.__validationRules) — same source class.validator.php
     reads, so JS + PHP can't drift. MUST load before general.js. Defensive: {} if file absent.
     (general.js is v3.0.2 here, which READS this catalog to drive validateInput.) -->
<script>
window.__validationRules = {"types":{"text":{"pattern":"^[\\s\\S]*$","check":null,"messageKey":"validation.text","message":"Invalid input."},"alphabet":{"pattern":"^[a-zA-Z]*$","check":null,"messageKey":"validation.alphabet","message":"Please enter letters only."},"alphabetWithSpace":{"pattern":"^[a-zA-Z ]*$","check":null,"messageKey":"validation.alphabetWithSpace","message":"Please enter letters and spaces only."},"alphanumeric":{"pattern":"^[a-zA-Z0-9 ]*$","check":null,"messageKey":"validation.alphanumeric","message":"Please enter letters, numbers and spaces only."},"alphanumericExtend":{"pattern":"^[a-zA-Z0-9&@*._,!?\\-:;\\/\\\\+~^|$%#\"(){}`§¶…†‡•·°™®©€£¥ \\n]*$","check":null,"messageKey":"validation.alphanumericExtend","message":"Only letters, numbers, and common symbols are allowed."},"bcrypt":{"pattern":"^\\$2[aby]\\$\\d{2}\\$[./A-Za-z0-9]{53}$","check":null,"messageKey":"validation.bcrypt","message":"Please enter a valid bcrypt hash (starts with $2y$, $2a$ or $2b$)."},"numeric":{"pattern":"^[-+]?\\d+$","check":null,"messageKey":"validation.numeric","message":"Please enter a whole number."},"decimal":{"pattern":"^[-+]?\\d*\\.?\\d*$","check":null,"messageKey":"validation.decimal","message":"Please enter a valid number."},"email":{"pattern":"^[a-zA-Z0-9_.\\-@]+$","check":"email","messageKey":"validation.email","message":"Please enter a valid email address."},"url":{"pattern":"^[a-zA-Z0-9_~:\\/?\\#.\\[\\]@$&()*+,;=%!'-]*$","check":"url","messageKey":"validation.url","message":"Please enter a valid URL."},"phone":{"pattern":"^[0-9+\\-() ]{0,15}$","check":null,"messageKey":"validation.phone","message":"Please enter a valid phone number."},"emailOrPhone":{"pattern":"^[a-zA-Z0-9_.\\-@+]+$","check":"emailOrPhone","messageKey":"validation.emailOrPhone","message":"Please enter a valid email or phone number."},"date":{"pattern":"^\\d{4}-\\d{2}-\\d{2}$","check":"date","messageKey":"validation.date","message":"Please enter a valid date (YYYY-MM-DD)."},"datetime":{"pattern":"^\\d{4}-\\d{2}-\\d{2}[ T]\\d{2}:\\d{2}(:\\d{2})?$","check":"datetime","messageKey":"validation.datetime","message":"Please enter a valid date and time."}},"constraints":{"required":{"messageKey":"validation.required","message":"This field is required."},"min":{"messageKey":"validation.min","message":"Please enter at least :min characters."},"max":{"messageKey":"validation.max","message":"Please enter no more than :max characters."},"range":{"messageKey":"validation.range","message":"Please enter a value between :min and :max."}}};
</script>
<script src="/share_js/general_v3.0.2.js?v=1782988382" type="text/javascript"></script>
<!-- <script src="/js/responsive-table.js?" type="text/javascript"></script> -->

<script type="text/javascript">

  function changeLanguage(newLanguage) {
    document.cookie = `langCode=${newLanguage}; path=/`;
    window.location.reload();
  }
  
  var pageName = "cart.php";
  var isBot    = true;

  // ─── Slow-page debug: LCP observer + perf breakdown ─────────────────────
  // LCP requires PerformanceObserver — not available retroactively. Set up
  // early so we capture the LCP element before window.onload.
  var __vmLcp = 0;
  if (typeof PerformanceObserver !== 'undefined') {
      try {
          new PerformanceObserver(function (list) {
              list.getEntries().forEach(function (e) { __vmLcp = Math.round(e.startTime); });
          }).observe({ type: 'largest-contentful-paint', buffered: true });
      } catch (ex) { /* unsupported — skip */ }
  }

  // Aggregates everything the W3C Performance API tells us about the page load
  // into a compact JSON suitable for inclusion in the slow-page Telegram report.
  function collectPerfBreakdown() {
      try {
          var nav = (performance.getEntriesByType && performance.getEntriesByType('navigation') || [])[0] || {};
          var paint = {};
          (performance.getEntriesByType && performance.getEntriesByType('paint') || []).forEach(function (p) {
              if (p.name === 'first-paint')            paint.fp  = Math.round(p.startTime);
              if (p.name === 'first-contentful-paint') paint.fcp = Math.round(p.startTime);
          });
          if (__vmLcp) paint.lcp = __vmLcp;

          var resourceEntries = (performance.getEntriesByType && performance.getEntriesByType('resource')) || [];
          var byType = {};
          // Dedupe slowest by URL: multiple PerformanceResourceTiming entries for
          // the same URL keep only the entry with the largest duration. byType
          // totals still count every entry.
          var slowestByUrl = {};
          resourceEntries.forEach(function (r) {
              var type = r.initiatorType || 'other';
              if (!byType[type]) byType[type] = { count: 0, durationMs: 0, transferKB: 0 };
              byType[type].count++;
              byType[type].durationMs += r.duration;
              byType[type].transferKB += (r.transferSize || 0) / 1024;

              var prev = slowestByUrl[r.name];
              if (!prev || r.duration > prev.duration) {
                  slowestByUrl[r.name] = { url: r.name, duration: r.duration, type: type };
              }
          });
          var slowest = Object.keys(slowestByUrl).map(function (k) { return slowestByUrl[k]; });
          Object.keys(byType).forEach(function (k) {
              byType[k].durationMs = Math.round(byType[k].durationMs);
              byType[k].transferKB = Math.round(byType[k].transferKB);
          });
          slowest.sort(function (a, b) { return b.duration - a.duration; });

          return {
              nav: {
                  dns:      Math.round((nav.domainLookupEnd      || 0) - (nav.domainLookupStart   || 0)),
                  tcp:      Math.round((nav.connectEnd           || 0) - (nav.connectStart        || 0)),
                  tls:      nav.secureConnectionStart ? Math.round((nav.connectEnd || 0) - nav.secureConnectionStart) : 0,
                  ttfb:     Math.round((nav.responseStart        || 0) - (nav.requestStart        || 0)),
                  download: Math.round((nav.responseEnd          || 0) - (nav.responseStart       || 0)),
                  domParse: Math.round((nav.domInteractive       || 0) - (nav.responseEnd         || 0)),
                  domReady: Math.round( nav.domContentLoadedEventEnd || 0),
                  load:     Math.round((nav.loadEventEnd > 0) ? nav.loadEventEnd : performance.now())
              },
              paint: paint,
              resources: {
                  totalCount: resourceEntries.length,
                  byType:     byType
              },
              slowestResources: slowest.slice(0, 5).map(function (r) {
                  var url = String(r.url || '');
                  if (url.length > 200) url = url.substring(0, 200) + '...';
                  return { url: url, durationMs: Math.round(r.duration), type: r.type };
              })
          };
      } catch (ex) {
          return { error: String(ex) };
      }
  }

  $(document).ready(function() {

    if(pageName == '404') {
      return true
    }
    
    $(".changeLanguage").click(function(){
      changeLanguage($(this).attr("language"));
    });
    
    window.ajaxEnabled = true;
  });

// window.onload = function () { 
//         var pageName = 'cart';
//         var phpStartTime = '1783708444.8608';
//         var jsStartTime = '';
//         var jsEndTime = new Date().getTime() / 1000;
//         var jsLoadTime = jsEndTime - jsStartTime;
//         var totalPageLoadTime = jsEndTime - phpStartTime;
//         //var phpEndTime = '1783708445';
//         //var phpLoadTime = '0.13917207717896'; 
//         var queryTime = {"bootstrapSession":{"totalTime":0.30516000000000004,"count":1,"lastExecuted":"2026-07-11 02:34:05"},"sequence":[{"step":1,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":305.16,"executionTimeSec":0.3052,"accumulatedTimeMs":305.16,"accumulatedTimeSec":0.3052,"timestamp":"2026-07-11 02:34:05"}],"accumulatedTimeMs":305.16};
//         var phpLoadTime = queryTime['accumulatedTimeMs']/1000;

//         if(totalPageLoadTime > 3){
//         //if(true){
//             var url = '/cart'; 
//             var method = 'POST';
//             var debug = 0; 
//             var bypassBlocking = 0; 
//             var bypassLoading = 0; 
//             var fCallback = '';
//             var formData = {
//                 predefined992: "C34uvRDTmXjfBgk0qHCVOnVXvJ2VP6REiAZeAz2wMOn+1ziHPXqDS+IRSNHNuPpnKmID2LeHi0fNp3+v4mXIpRnS7Z2S5wJjc8vCEB6Mo08Eh9ut+vC8EbtHisnQGcDe2Imz2GRUMMwCYrupde+9iV3\/H22QGSrr2rfAuoIpMVHDRIAMZrf\/Zc8+\/4KHUyMKJZN8vf5wg9cjoRt2pWo5w2Pwchr+nfaGNGRFZLIeq1ryMVovmDOU\/NeNrHP++e4xfCEZ62v6\/4\/hdZ+wofS6MF5f13eS2rXMRKfj40WaMNMZQh1HgkKSwhA29YAm\/Z7vjdUamU81MAzy+9bEwb1hMg==",
//                 predefined993: "CU6bjpgTr96ox0mqeKAwgBaiD9RNnrzIkxrYLxda6bwRwSsCU17yow1OsnuYVgkJG2ZGyT82\/Hvmo0F4k7JySjMc0Oq4vZo6fULsgP+lMIsUiWaRPgfbC7Du7OHUcueYyWMKc\/+OrgNlWOUK84+Gu+5h8JRZggf3lkVaD2PAp6iKGCr\/sW1ZmgFs1zBCpafzu7KZB55\/c1MWljGl+T\/1Ces2XxG5UjTAjEPawOtVs1\/XQKyf4C\/QQgeDy9WN0pf\/awhM99npafgozNopyU4YMOzupvKIuHL28fla7DkZVCZztfsHF3dhJaX8z4IfRpefr3DPfN0JUQd9FFHrohOIyw==",
//                 val993: [pageName, window.location.origin + window.location.pathname, totalPageLoadTime, queryTime, '216.73.216.193', 'United States'] 
//             };   

//             ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
//         }    
//     };  
  
    window.onload = function () {
        window.ajaxEnabled = true;
        var pageName = 'cart';
        // 2026-05-21: auto-fire of `command: 'checkPickup'` disabled.
        // entry_v1.0.2.php's case "checkPickup" branch tries $general->checkPickup()
        // but class.general_v1.0.1.php (the General version v1.0.2 loads) doesn't
        // define that method, causing a PHP fatal 500 on every page load. Until
        // either (a) checkPickup() is re-added to class.general_v1.0.1.php or
        // (b) the case branch in entry_v1.0.2.php is removed, this auto-fire is
        // gated off with `false &&` so the block stays as code (not commented
        // out / deleted) and can be re-enabled by flipping the guard back.
        if(false && pageName != 'Collect Item' && pageName != 'Thank You'){
              var url = '/cart' + window.location.search;;
              var method = 'POST';
              var debug = 0;
              var bypassBlocking = 0;
              var bypassLoading = 0;
              var fCallback = promptPickup;
              var formData = {
                  command: 'checkPickup',
                  params: {
                        'storageID': ''
                    }
              };
              ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
	}
	// ─── Slow-page reporting: LCP-based trigger ─────────────────────────
	// Skip bots so Telegram alerts don't spam from Google Ads / crawlers.
	if (isBot) {
	    return;
	}

	var pageName = 'cart';
        var phpStartTime = '1783708444.8608';
        var jsStartTime = '';
        var jsEndTime = new Date().getTime() / 1000;
        var jsLoadTime = jsEndTime - jsStartTime;
        var totalPageLoadTime = jsEndTime - phpStartTime;
        var queryTime = {"bootstrapSession":{"totalTime":0.30516000000000004,"count":1,"lastExecuted":"2026-07-11 02:34:05"},"sequence":[{"step":1,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":305.16,"executionTimeSec":0.3052,"accumulatedTimeMs":305.16,"accumulatedTimeSec":0.3052,"timestamp":"2026-07-11 02:34:05"}],"accumulatedTimeMs":305.16};
        var phpLoadTime = queryTime['accumulatedTimeMs']/1000;
        // Attach browser-side perf breakdown. Backend reads queryTime.perfBreakdown
        // when simpleDebugLoadTime=0 to render the "Slow Page Load Debug" template.
        try { queryTime.perfBreakdown = collectPerfBreakdown(); } catch (ex) {}

        var debugLoadTime = 0 == 1;
        // ─── Trigger thresholds ─────────────────────────────────────────
        // Primary: LCP (user-perceived page-loaded). Safety: TTFB (catches
        // backend-only regressions). Both overridable per page via
        // $pageConfig['slowLcpMs'] / ['slowTtfbMs'].
        var slowLcpMs  = 3000;
        var slowTtfbMs = 1500;
        var lcpMs      = (queryTime.perfBreakdown && queryTime.perfBreakdown.paint && queryTime.perfBreakdown.paint.lcp)  || 0;
        var ttfbMs     = (queryTime.perfBreakdown && queryTime.perfBreakdown.nav   && queryTime.perfBreakdown.nav.ttfb)   || 0;
        var shouldReport = debugLoadTime && (
            (lcpMs  > 0 && lcpMs  > slowLcpMs)  ||
            (ttfbMs > 0 && ttfbMs > slowTtfbMs)
        );

        if (shouldReport) {
            var url = '/cart';
            var method = 'POST';
            var debug = 0;
            var bypassBlocking = 0;
            var bypassLoading = 0;
            var fCallback = '';
            // Header "Total Load Time" value = LCP (user-perceived "page loaded")
            // with fallback to totalPageLoadTime. onload is dominated by slow
            // async resources users never wait for.
            var headerLoadTimeSec = (lcpMs > 0) ? (lcpMs / 1000) : totalPageLoadTime;
            var formData = {
                predefined992: "C34uvRDTmXjfBgk0qHCVOnVXvJ2VP6REiAZeAz2wMOn+1ziHPXqDS+IRSNHNuPpnKmID2LeHi0fNp3+v4mXIpRnS7Z2S5wJjc8vCEB6Mo08Eh9ut+vC8EbtHisnQGcDe2Imz2GRUMMwCYrupde+9iV3\/H22QGSrr2rfAuoIpMVHDRIAMZrf\/Zc8+\/4KHUyMKJZN8vf5wg9cjoRt2pWo5w2Pwchr+nfaGNGRFZLIeq1ryMVovmDOU\/NeNrHP++e4xfCEZ62v6\/4\/hdZ+wofS6MF5f13eS2rXMRKfj40WaMNMZQh1HgkKSwhA29YAm\/Z7vjdUamU81MAzy+9bEwb1hMg==",
                predefined993: "CU6bjpgTr96ox0mqeKAwgBaiD9RNnrzIkxrYLxda6bwRwSsCU17yow1OsnuYVgkJG2ZGyT82\/Hvmo0F4k7JySjMc0Oq4vZo6fULsgP+lMIsUiWaRPgfbC7Du7OHUcueYyWMKc\/+OrgNlWOUK84+Gu+5h8JRZggf3lkVaD2PAp6iKGCr\/sW1ZmgFs1zBCpafzu7KZB55\/c1MWljGl+T\/1Ces2XxG5UjTAjEPawOtVs1\/XQKyf4C\/QQgeDy9WN0pf\/awhM99npafgozNopyU4YMOzupvKIuHL28fla7DkZVCZztfsHF3dhJaX8z4IfRpefr3DPfN0JUQd9FFHrohOIyw==",
                val993: [pageName, window.location.href, headerLoadTimeSec, queryTime, '216.73.216.193', 'United States']
            };

            ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
        }

    };

    function promptPickup(data, message){
       if(data.needPickup == '1'){
           showMessage('There is item in the machine, please remove the item before proceed.', 'info', 'info', '', '', '')
           $("#canvasMessage").on("hidden.bs.modal", function () {
               window.location.href=`/collect-item?so_id=${data.so_id}&unlockdoortime=3000`
            });

        }
    }

  // Logout function
  function beforeLogout() {
    // console.log('here');
        // var yes     = 'Yes' /* Yes */
        // var message =  'Are you sure you want to logout?'; /* Are you sure you want to logout */
        // var title   = 'Logout'; /* Logout */
        // var alert   = 'Error!'; /* Error */
        // var canvasBtnArray = Array(yes);

        // showMessage(message, 'info', title, 'sign-out', '', canvasBtnArray);
        // $('#canvas'+yes+'Btn').click(function() {

            var url = '/cart';
            var method = 'POST';
            var debug = 0;
            var bypassBlocking = 0;
            var bypassLoading = 0;
            var fCallback = successLogout;
            var formData = {
                predefined995: "MdMZhWWBWRUPETWb2ZnZf2r9HqSKN\/2iJo4GTZtKJZdogjZHMYOvet+hYYunGui4xLwPa1p5mkKYxi\/\/RXn6x4J46lwlrdVxNcRgCbAYTUfpw0sLFc0WRfXHC54kH4JNgdpQmb294ZlAh52edjZq\/uGgIZDkv8rT8tFMkBHC2GeLe\/Ia\/vG6jWYlItm+Ef9OzpNuGrhZKuzn4VMnpm5A5\/sHi+0aIZEqmWP3SofG9PRE9Ih18fdnnzb++\/5NKyAEYE42BJZkb3yzW82Bd8OQAXiv\/xPL76sgWnDkAhdfaGiW6SKdo9zPwXywjCe6+izJGI5hCK\/\/hKd780ZpslMHvw=="            };

            ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
            
        // });
    }

  function successLogout(){
      window.location.href = '/';
  }
  function verifyIsLoggedIn() {
    const isLoggedIn = "0";

    if (isLoggedIn == "1") {
      return true;
    } else {
      return false;
    }
  }

  function insertUID(){
    var url = '/cart';
    var method = 'POST';
    var debug = 0;
    var bypassBlocking = 0;
    var bypassLoading = 0;
    var fCallback = setMemberUIDCookie;
    var formData = {
        predefined991: "URlm+6VlX4Cy\/ofw9TQOVgCrgnyzyHDnJJf4D+rrDKsWDV4qxkE306+vSeyfR+rdocu8QGPFVsvH02Smxf+Xh2vr4SCVg6AL0Rn1foadLMfKpFvDXAv1Lt6nEMKhgliJcDQ3Cr02\/EueZ89fsziu1\/VQUd12\/aBwOtxMlK00QEdTF2CCTJDcr20ODyp2VDBjx33oGIJLaNWMGxZZ\/BrSXVSJVXRKGWLIoIP02qWeIBe1ewrqS5MrE6lHfvFV+M5B21qEv\/u4gxSdjR8lsNcUc50hm3geziqINJXFoQqBJT7lBmjsUaIUFjtMgiagBjMob0P1JCpflO4xN5a6My8LKA==",
    };
    window.ajaxEnabled = true;
    ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
  }
    
  function handleSearch(query, done){
      console.log(query, 'query')
      let sortParams = query.sortData;
      const filterQuery = query.filters.filter(item => item?.type != 'dateRange')
      const searchQuery = query.searchTerms
      const pageQuery = query.page ?? 1;

      // filter for dateRange
      let dateRangeArr = [];
      const dateRangeType = query.filters.filter(item => item.type == 'dateRange')
      
      if(dateRangeType.length > 0){
          dateRangeArr = handleDateRangeArr(dateRangeType)
      }

      
      const convert = arr => arr.map(({ field, query }) => ({
          dataName: field,
          dataValue: query
      }));

      const finalArray = [
          ...convert(filterQuery),
          ...convert(searchQuery),
          ...(dateRangeArr.length ? dateRangeArr : [])
      ];
      // console.log(finalArray,'finalArray')

      var formData   = {
          predefined : "eyJlbmNyeXB0ZWRfa2V5IjoiSTFGR2piejMwUldKb3NiSXlBQ2VYNlRNM0VlbDJLd0FHbFBrcjgxTDgzVXJENXd1SUxuaENzaFhmV3orYml6U1puSW9TWUcrSFl2NWEwNENXZ2lKa21vVGlGbUpTQlwvekVZOWRkVXA3OEx1SzdIS0txcFB4c0ljTjkxb256TnlXanFtWlRQY201T0kzcStuOFpaWmw4MEduWmg1cmtTMnBoYVQ4dU9SS0hHRWJHXC9FN3J5M0NRUG5MakRsOGZQOFBSXC9WZXYzdGZLa3VMNElMWW9WcHFYWEV1aHJTMTdpYmMwWk5zczNWXC9iNUtuYXZBNWNpbUpQbjZvdTg4ZFB1R2NMdFZ1NTV5dGZSaE03MFpZcG93S2tZM0k1dXYrelwvMnYxUVwvbHlLTVBkUzJoVTN6TjFhQlpNb2Q5TE1mdUhwK2dOQXNrUUozR3JYcmJPaVwvajJHTzZjZz09IiwiaXYiOiJsS0ZONHdFb1V0XC9wWDFDOGJzQ2dXZz09IiwiZW5jcnlwdGVkX2RhdGEiOiJcLzkzTmZTQmRiVnhDazJTazlEZmF4emtrTlwvRnkzcnNpdWhhQ0syd05PRVJIMWRjVzM2ZzFNdVVodzJsNGdsYkZNY2dISU1YNnV0M0xiNG10M09sSXdlUVJlYTRTR0RuY2szRVpsc3VMYUpHVWp1K1d4OHJQTFBKUVhGQjJzODRVZ1BtYlE3UnFOcTF4SU1nN1VNd2xnemlxS0hSWllBaFVMaWMrWWdhTEtyOVNxRlAxQ0phXC9vRlJ6aGIxZlpjUmJxQzNlcE9HalpDQnQ5MDNZQlM4WkJueGtQUnowcTV2MXpnalwvaDZ0YjhaWXp1THVBbEx2QWlWWXBPZlwvNkx0UlRxc2JjSGdHc0tpRXdmaVF3djQ4XC91d0M2Wmp3VnZMRVRzUnlWek91ZldGWll3SmI3dzh2QUxYZGFxQ1Y3UXpoZyIsImlzX2pzb24iOnRydWUsIm1ldGhvZCI6Imh5YnJpZCJ9",
          predefined1 : "d2Wbg\/LGIa9crUbp5QvLlf\/NKnjNwPMM0eGFGosChl24n+pWE4IkB26vrXd++drwabYXHOpeePwmXwz2jTFWMffkbcNfgjVKZWp6iIgfMWH\/9ktFArtbwbFdNGRkNzroEt1d1dyq+\/TWEUxc1rpjVrdWw3Hw0uJJ1OM0J8dPnDW4uejmeoP1OqT4J7Rw1WiFoo9tXyIg+aKzJl\/OTUnZ\/Jb4avmEUEeF5JyP2dUaofLF2gA+NQW8mZDLHMtQfmi6Lc8XN0AkXcKa\/KFn4pWOvopdye\/rSfZiH9qOdlWldzSQbXPIskBR1PdusG0\/Sz0vlW3tLmIxhG1earUHpIlI3A==",
          predefined2 : "hG0dbBbv29mytyXq30FSD+NvccHB+9PGRzwicHGEwVsYdZcY3xCd07Zkgq6L5l5JvDakHAshDObFAJQIjv3zCRWUi+74hmi16tOgw39+spw6CF2uhq0Vgx3f3jNf9Ev5ifiuxad7K\/qvuqxTQBDzIavjiJVm1OWqUbVqFkA5L\/IRGsfRm8LmfWmJc6OKkkI7MA2xeOuUqTA3cd6ANuFHzW6V0BJvXqIEhufAWccJEy+sveexOReplzQ9Bd79voqNCxuh+XygfhonqUkqQeBwU09Z0zkDM5hOS2flKj75p89WJMWw0uezN4kUsqKirnSBxEYrnRl3wOr2yFWt1bIYxg==",
          predefined3 : "WoMasX29iMEwDNXBu5v707ermqx7OaLPHtkHjp\/plG6pk9CWQXo5jzLnMclsGeU07AJSnjeOXIOZjkZkGzK496YLZWZXtRbpezl9tfAZtkdRqXeJBbDcofdsQZz+Dslq2aGyJQJC6kJRBS2Tf\/4rrwVkUqDI7x9RvppJQsYZkrmesitChwfiGThInz80tgZmTwz\/5fVRMPcpAWkb9i1Ys8q+6GWSYJlVHUAdqT0I1tEjGmA2HXKVoR1unNOvL9gdYw\/araPEq4NBQKhnQM0p8n0IVzeTFdUiu8YqgB0ktasde63TOtIwTfhtbixGGo7n6axqyEhiX2Bz+0oGV0TE4w==",
          val1 : pageQuery,
          val2 : JSON.stringify(finalArray) ?? [],
          val3 : sortParams ?? []
      };

      fCallback = function(data, message) {
          if (typeof done === 'function') {
              done(data, message);
          }
      };

      ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);

  }

  function handleDateRangeArr(dateRange){
      const tsFromObj = dateRange.find(f => f.field === "tsFrom");
      const tsToObj = dateRange.find(f => f.field === "tsTo");
      
      if (!tsFromObj || !tsToObj) return [];

      const tsFromUnix = dateToUnix(tsFromObj.query)
      const tsToUnix = dateToUnix(tsToObj.query)


      return [
          {
              dataName: tsFromObj.identifier,
              dataType: "dateRange",
              dataValue: "custom",
              tsFrom: tsFromUnix.toString(),
              tsTo: tsToUnix.toString()
          }
      ];
  }

  document.addEventListener("DOMContentLoaded", function () {
    // Smooth scroll on anchor click
    const anchors = document.querySelectorAll('a[href^="#"]:not([href="#"])');

    anchors.forEach(anchor => {
      anchor.addEventListener("click", function (e) {
        const hash = this.getAttribute("href");
        const target = document.querySelector(hash);
        if (target) {
          e.preventDefault(); // prevent default anchor jump
          target.scrollIntoView({ behavior: "smooth" });

          // Update the URL without jumping
          history.pushState(null, null, hash);
          const menuToggle = document.getElementById("menuToggle");
            if (menuToggle.checked) {
              menuToggle.checked = false;
            }
        }
      });
    });

    // Smooth scroll on page load (if hash exists)
    const hash = window.location.hash;
    if (hash) {
      const target = document.querySelector(hash);
      if (target) {
        setTimeout(() => {
          target.scrollIntoView({ behavior: "smooth" });
        }, 300); // Delay ensures layout is rendered
      }
    }
  });
  
  function openDeliveryModal() {
    var deliveryModal = $('#deliveryModal');
    var deliveryModalContent = $('#deliveryModalContent');
    
    if (deliveryModal.length) {
        deliveryModal.removeClass('invisible');
        // $('body').css('overflow', 'hidden');
        
        setTimeout(function() {
            deliveryModal.removeClass('opacity-0').addClass('opacity-100');
            deliveryModalContent.removeClass('scale-95').addClass('scale-100');
        }, 10);
    }
  }

  function closeDeliveryModal() {
      var deliveryModal = $('#deliveryModal');
      var deliveryModalContent = $('#deliveryModalContent');
      
      if (deliveryModal.length) {
          deliveryModal.removeClass('opacity-100').addClass('opacity-0');
          deliveryModalContent.removeClass('scale-100').addClass('scale-95');

          setTimeout(function() {
              deliveryModal.addClass('invisible');
              // $('body').css('overflow', '');
          }, 300);
      }
  }

  function selectDeliveryOption(type) {
      var selfPickupOption = $('#selfPickupOption');
      var deliveryOption = $('#deliveryOption');
      
      deliveryModalState.selectedDeliveryType = type;

      if (type === 'self-pickup') {
          selfPickupOption.addClass('border-[#e74c3c] bg-[#fff5f5]');
          selfPickupOption.removeClass('border-[#ddd]');
          selfPickupOption.addClass('border-[#ddd]');
          deliveryOption.removeClass('border-[#e74c3c] bg-[#fff5f5]');
      } else {
          deliveryOption.addClass('border-[#e74c3c] bg-[#fff5f5]');
          deliveryOption.removeClass('border-[#ddd]');
          selfPickupOption.addClass('border-[#ddd]');
          selfPickupOption.removeClass('border-[#e74c3c] bg-[#fff5f5]');
      }
  }

  function saveDeliverySelection() {
      var locationSelect = $('#locationSelect');
      var selectedLocationText = $('#selectedLocation');
      var location = locationSelect.val();

      if (!location || location === '') {
          alert('Please select a location');
          return false;
      }

      // Update header display
      if (selectedLocationText.length) {
          selectedLocationText.text(location);
      }

      // Save to state
      deliveryModalState.selectedLocation = location;

      // Save to localStorage
      saveDeliveryPreferences({
          deliveryType: deliveryModalState.selectedDeliveryType,
          location: location
      });

      // Close modal
      closeDeliveryModal();

      // Trigger callback
      onDeliverySelectionSaved(deliveryModalState.selectedDeliveryType, location);

      return true;
  }

  function saveDeliveryPreferences(preferences) {
      try {
          if (typeof(Storage) !== "undefined") {
              localStorage.setItem('deliveryPreferences', JSON.stringify(preferences));
          }
      } catch (e) {
          console.warn('Could not save to localStorage:', e);
      }
  }

  function loadDeliveryPreferences() {
      try {
          if (typeof(Storage) !== "undefined") {
              var saved = localStorage.getItem('deliveryPreferences');
              if (saved) {
                  var preferences = JSON.parse(saved);
                  
                  // Set delivery type
                  if (preferences.deliveryType) {
                      selectDeliveryOption(preferences.deliveryType);
                  }
                  
                  // Set location
                  if (preferences.location) {
                      $('#locationSelect').val(preferences.location);
                      $('#selectedLocation').text(preferences.location);
                      deliveryModalState.selectedLocation = preferences.location;
                  }
              }
          }
      } catch (e) {
          console.warn('Could not load from localStorage:', e);
      }
  }

  function onDeliverySelectionSaved(deliveryType, location) {
      console.log('Delivery selection saved:', { deliveryType: deliveryType, location: location });
      
      // Add custom logic here:
      // - Update cart
      // - Recalculate shipping
      // - Update UI elements
      // - Send to analytics
  }

  function getDeliverySelection() {
      return {
          deliveryType: deliveryModalState.selectedDeliveryType,
          location: deliveryModalState.selectedLocation
      };
  }

  function setDeliveryLocation(location) {
      $('#locationSelect').val(location);
      $('#selectedLocation').text(location);
      deliveryModalState.selectedLocation = location;
  }

  function setDeliveryType(type) {
      if (type === 'self-pickup' || type === 'delivery') {
          selectDeliveryOption(type);
      }
  }

// Normalize a Malaysian phone number: accepts 01XXXXXXXX(X) or 601XXXXXXXX(X)
// (spaces/dashes tolerated), returns the canonical 601XXXXXXXX(X) string or
// false when the input doesn't match. Same helper goshopping's sharejs carries;
// verify-otp's addphone/changephone flows call it before requesting the SMS OTP.
function checkPhoneNumber(value) {
    let phoneNumber = String(value).trim();
    let formatting = phoneNumber.replace(/[\s\-]/g, '');

    if (/^(01|601)[0-9]{8,9}$/.test(formatting)) {
        if (formatting.startsWith('01')) {
            formatting = '6' + formatting;
        }
        return formatting;
    }

    return false;
}

function onDropdownMenuClick(button, menu) {
    if (typeof button === 'string') button = document.querySelector(button);
    if (typeof menu === 'string') menu = document.querySelector(menu);
    if (!button || !menu) return;

    // switch menu state
    const isOpen = menu.dataset.open === 'true';
    menu.dataset.open = isOpen ? 'false' : 'true';

    // close when click outside the menu
    function handleClickOutside(event) {
        if (!menu.contains(event.target) && !button.contains(event.target)) {
            menu.dataset.open = 'false';
            document.removeEventListener('click', handleClickOutside); // remove listener itself
        }
    }

    if (menu.dataset.open === 'true') {
        // bind a document click event once
        document.addEventListener('click', handleClickOutside);
    }
}

</script>

    <script>
        // ---- AJAX transport (predefined encryption flow) ----
        var url            = '/cart';
        var method         = 'POST';
        var debug          = 0;
        var bypassBlocking = 1;
        var bypassLoading  = 1;

        // general_v3.0.0.js reads sessionTimeOut on every ajaxSend success (idle-timer extension);
        // an in-place AJAX page must declare it or it throws ReferenceError. Same pattern as
        // products.php / product-detail.php.
        var sessionTimeOut = 0;
        var timeOut        = 0;

        var DEFAULT_PRODUCT_IMAGE = "\/images\/product-placeholder.webp";
        // i18n count-pill labels (singular/plural) — injected from t() so the JS-rebuilt
        // subtitle matches the PHP initial render across locales (no window.i18n dependency).
        var CART_ITEM_SINGULAR = "item";
        var CART_ITEM_PLURAL   = "items";
        var cartCmd    = "WlKiBr85YealsMK5Jq1+AYpwgxY2l9xNdRj05Vr\/BBJtz1Znvsz3kJDChQUmeXk7jJJQIiKPP0+6FkfndUGfnx870uQ8RXfnffJep5AGdO2SovDRnFXZ1jvOLPu5FwZmkKJDYenqvZfE\/I1QcMllDtMMHpwxBn8xx+oZ9qSaabkUOHtDUgVe5gh9QqZwJCiShdH+\/YPQEtrbC5n8BHY7uawnF+GEChezNaaIJGkuXUK7bB0uI\/v\/zQSRf7sELXz8UxO2dYs8IySvlRjzPq4+lSBgw1sxz8+Ooq7bZbN\/zfFUswwG+r9yf7p8IJYwQ\/4Ed3JwNiBZqDSkhzCbCLaALA==";
        var cartKeys   = "LwwSU5jEI+28QFaSyiIHs3SfMlmtSUbvdq\/2pagZB4iXlDFw+2uPWmkNgN3RLhixXia47BOvt24jGdWUW+z2tsGu7NxNuZb5+Bk7ABTZQAnqsgE\/E7VpHkI60VUzj\/9XcWLyWyYTtIzgBosd3M0YzMpm1atbpryO9BpaMEODIbWZEDVBqWFka\/AyxxWam4UWx+feXGNjbARBHCn7fcTjQCFfpK3TA8ZWu2IPuAsarXFflvaOYxreLQPiTEG1SPhHZd6cV+uX94FyfEj2hI92b0p7cBLtlv5ZQcFAPuGXvLX3PS\/uRB84lMxDlVZwtVIfirLC3iEACJ37nV7yW2bd5g==";
        var recheckCmd = "N0ZIwRyoY4lgzelaHsF8PaGaf8t\/c+4RRK2cRUXqBywWPVrelr\/i6DSH2g\/jdKG7x7Wj2vbcgQz8jkL53DAJqIu8xhAHjk3jDrSRkJSqeqFQYGw+46o4ncWB798IWkzayoM6YALZMD6cHU5tpvK14tIJ\/itN9P2mOJyzaL5G34r0Dm+gKM3UOFZ0C1Ir3uhtulzLLv8ZSlEEyMfyxLKCd3GfRs\/QgK3DRudi3+TUOwQD6RrHpAITVpYVI33OB+W2erHNC++A1NmOFAo6bk5frTNS6GdX3NGunrdT7VTZa1aDaCjtS5tTcIpeOLj645rX\/N\/CtRioM2UAPkTxL2WGGA==";   // cartRecheck — checkout-time stock recheck

        // i18n text for JS-built rows / alerts (injected from t(); no window.i18n dependency).
        var CART_TXT_UNAVAILABLE  = "Unavailable";
        var CART_TXT_BLOCK        = "Some items are no longer available. Please remove the unavailable items before checking out.";
        var CART_TXT_BLOCK_TITLE  = "Unavailable Items";

        // Server-seeded cart — already re-priced + stock-checked + qty-clamped on this GET. Each item
        // carries price (live), old_price, price_changed, out_of_stock, qty_clamped, stock_tracked,
        // available_stock. Unavailable lines are sorted to the end + rendered in a separate section.
        var cartItems = [];

        // One-time "cart updated" notice flag — price moved or qty auto-reduced on this GET. Out-of-stock
        // is excluded (shown in the Unavailable guard + blocked at checkout, so no banner needed).
        var cartInitialChanged = false;

        function escapeHtml(s) {
            return String(s == null ? '' : s)
                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
        }

        function money(n) {
            var v = parseFloat(n);
            if (!isFinite(v)) v = 0;
            // Thousand separators (RM1,234.56) — same formatter product-detail.php's formatRM uses.
            return 'RM' + v.toLocaleString('en-MY', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }

        // Header cart-badge live update uses the shared applyHeaderCartBadge() (general_v3.0.x.js,
        // companion to applyHeaderHeart) — same helper the PDP add-to-cart calls. No local copy.
        function syncHeaderBadge(count) {
            if (typeof applyHeaderCartBadge === 'function') applyHeaderCartBadge(count);
        }

        // Variant pill markup (shared by available + unavailable rows).
        function variantPill(it) {
            return it.variant_label
                ? '<div class="mt-1.5"><span class="inline-block rounded-[4px] bg-[color:var(--color-bg-cream-subtle)] text-[color:var(--color-brand-primary)] text-[11px] font-medium px-2 py-0.5">' + escapeHtml(it.variant_label) + '</span></div>'
                : '';
        }

        // An AVAILABLE (in-stock) row: thumb · name/variant · qty stepper · line total · remove.
        // + disabled when at/over available stock (tracked items); − stays active and clamps down.
        function availableRowHtml(it, i, isLast) {
            var img = it.image && it.image.length ? it.image : DEFAULT_PRODUCT_IMAGE;
            var lineTotal = (parseFloat(it.price) || 0) * (parseInt(it.quantity, 10) || 0);
            var borderCls = isLast ? '' : ' border-b border-[color:var(--primary-border-color)]';
            var stock  = parseInt(it.available_stock, 10) || 0;
            var atMax  = it.stock_tracked && ((parseInt(it.quantity, 10) || 0) >= stock);
            var incDis = atMax ? ' opacity-40 pointer-events-none' : '';
            return '' +
            '<div class="grid grid-cols-[minmax(0,1fr)_84px_78px_18px] sm:grid-cols-[1fr_180px_170px_18px] gap-x-2 sm:gap-x-4 items-center py-5' + borderCls + '" data-cart-row="' + i + '">' +
                '<div class="flex items-center gap-3 sm:gap-4 min-w-0">' +
                    '<div class="shrink-0 w-[72px] h-[72px] sm:w-[90px] sm:h-[90px] rounded-lg overflow-hidden bg-[color:var(--color-bg-cream-subtle)]">' +
                        '<img src="' + escapeHtml(img) + '" alt="' + escapeHtml(it.name) + '" class="w-full h-full object-cover" loading="lazy" ' +
                             'onerror="this.onerror=null;this.src=\'' + escapeHtml(DEFAULT_PRODUCT_IMAGE) + '\';">' +
                    '</div>' +
                    '<div class="min-w-0">' +
                        '<div class="text-[14px] font-semibold text-[color:var(--primary-text-color)] leading-[1.35] line-clamp-2">' + escapeHtml(it.name) + '</div>' +
                        variantPill(it) +
                    '</div>' +
                '</div>' +
                '<div class="flex justify-start sm:justify-center">' +
                    '<div class="inline-flex items-center border border-[color:var(--primary-border-color)] rounded-[5px] overflow-hidden">' +
                        '<button type="button" class="w-[26px] sm:w-9 h-8 sm:h-9 bg-[color:var(--default-bg-color)] text-[16px] text-[color:var(--color-text-muted)] cursor-pointer cart-qty-dec" data-idx="' + i + '" aria-label="Decrease quantity">−</button>' +
                        '<div class="w-8 sm:w-10 h-8 sm:h-9 border-x border-[color:var(--primary-border-color)] text-center font-semibold text-[14px] leading-8 sm:leading-9">' + (parseInt(it.quantity, 10) || 0) + '</div>' +
                        '<button type="button" class="w-[26px] sm:w-9 h-8 sm:h-9 bg-[color:var(--default-bg-color)] text-[16px] text-[color:var(--color-text-muted)] cursor-pointer cart-qty-inc' + incDis + '" data-idx="' + i + '" aria-label="Increase quantity">+</button>' +
                    '</div>' +
                '</div>' +
                '<div class="text-right text-[15px] sm:text-[16px] font-bold text-[color:var(--primary-text-color)]">' + money(lineTotal) + '</div>' +
                '<button type="button" class="shrink-0 bg-transparent text-[24px] leading-none text-[color:var(--color-text-muted)] hover:text-[color:var(--color-brand-primary)] cursor-pointer cart-remove px-0" data-idx="' + i + '" aria-label="Remove item">×</button>' +
            '</div>';
        }

        // An UNAVAILABLE (out-of-stock / discontinued) row: greyed, no stepper, strikethrough price,
        // UNAVAILABLE label — remove-only. Mirrors the design's unavailable treatment.
        function unavailableRowHtml(it, i, isLast) {
            var img = it.image && it.image.length ? it.image : DEFAULT_PRODUCT_IMAGE;
            var lineTotal = (parseFloat(it.price) || 0) * (parseInt(it.quantity, 10) || 1);
            var borderCls = isLast ? '' : ' border-b border-[color:var(--primary-border-color)]';
            return '' +
            '<div class="grid grid-cols-[minmax(0,1fr)_84px_78px_18px] sm:grid-cols-[1fr_180px_170px_18px] gap-x-2 sm:gap-x-4 items-center py-5' + borderCls + '" data-cart-row="' + i + '">' +
                '<div class="flex items-center gap-3 sm:gap-4 min-w-0">' +
                    '<div class="shrink-0 w-[72px] h-[72px] sm:w-[90px] sm:h-[90px] rounded-lg overflow-hidden bg-[color:var(--color-bg-cream-subtle)] opacity-50">' +
                        '<img src="' + escapeHtml(img) + '" alt="' + escapeHtml(it.name) + '" class="w-full h-full object-cover grayscale" loading="lazy" ' +
                             'onerror="this.onerror=null;this.src=\'' + escapeHtml(DEFAULT_PRODUCT_IMAGE) + '\';">' +
                    '</div>' +
                    '<div class="min-w-0">' +
                        '<div class="text-[14px] font-semibold text-[color:var(--color-text-muted)] leading-[1.35] line-clamp-2">' + escapeHtml(it.name) + '</div>' +
                        variantPill(it) +
                        '<div class="mt-1.5 text-[11px] font-bold uppercase tracking-[0.04em] text-[color:var(--error-color,#FD397A)]">' + escapeHtml(CART_TXT_UNAVAILABLE) + '</div>' +
                    '</div>' +
                '</div>' +
                '<div></div>' +
                '<div class="text-right text-[15px] sm:text-[16px] font-bold text-[color:var(--color-text-muted)] line-through">' + money(lineTotal) + '</div>' +
                '<button type="button" class="shrink-0 bg-transparent text-[24px] leading-none text-[color:var(--color-text-muted)] hover:text-[color:var(--color-brand-primary)] cursor-pointer cart-remove px-0" data-idx="' + i + '" aria-label="Remove item">×</button>' +
            '</div>';
        }

        // Single-list render: in-stock first, unavailable lines stay at the bottom.
        function renderItems() {
            var host = document.getElementById('cartItems');
            if (!host) return;
            var avail = [], unavail = [];
            cartItems.forEach(function (it, i) { (it.out_of_stock ? unavail : avail).push(i); });
            var ordered = avail.concat(unavail);
            host.innerHTML = ordered.map(function (i, pos) {
                var isLast = pos === ordered.length - 1;
                return cartItems[i].out_of_stock
                    ? unavailableRowHtml(cartItems[i], i, isLast)
                    : availableRowHtml(cartItems[i], i, isLast);
            }).join('');
            var guard = document.getElementById('cartUnavailableGuard');
            if (guard) guard.classList.toggle('hidden', unavail.length === 0);
        }

        // Remove ALL unavailable lines in one pass (the "Remove Unavailable Item" guard button). Captures the
        // out-of-stock identities upfront, then removes them sequentially (each mutation returns the
        // fresh cart; we re-render + recurse until none remain). No per-item confirm — bulk action.
        function removeAllUnavailable() {
            var queue = cartItems.filter(function (it) { return it.out_of_stock; })
                                 .map(function (it) { return { product_pid: it.product_pid, identifier: it.identifier }; });
            (function next() {
                if (!queue.length) return;
                var it = queue.shift();
                ajaxSend(url, {
                    predefined15: cartCmd,
                    predefined16: cartKeys,
                    val16: [ it.product_pid, it.identifier, '0', 'value' ],
                    cartSilent: 1   // bulk auto-clear — suppress the per-line 'Member Cart Updated' telegram
                }, method, function (data) {
                    if (data && Array.isArray(data.items)) {
                        cartItems = data.items;
                        syncHeaderBadge(parseInt(data.cart_count, 10) || 0);
                        renderItems();
                        recomputeSummary();
                        showEmptyIfNeeded();
                    }
                    next();
                }, debug, bypassBlocking, bypassLoading, 0);
            })();
        }

        // Totals the IN-STOCK lines only — out-of-stock lines are excluded from the total + checkout
        // count and must be removed before checkout. Subtitle pill counts ALL lines (incl. unavailable).
        function recomputeSummary() {
            var total = 0, buyable = 0;
            cartItems.forEach(function (it) {
                if (it.out_of_stock) return;
                buyable += 1;
                total += (parseFloat(it.price) || 0) * (parseInt(it.quantity, 10) || 0);
            });
            document.getElementById('cartSubtotal').textContent = money(total);
            document.getElementById('cartTotal').textContent    = money(total);
            document.getElementById('cartCheckoutCount').textContent = String(buyable);
            document.getElementById('cartSubtitle').textContent =
                cartItems.length + ' ' + (cartItems.length === 1 ? CART_ITEM_SINGULAR : CART_ITEM_PLURAL);

            // Disabled only when nothing is purchasable (empty, or every line out of stock).
            var checkout = document.getElementById('cartCheckoutBtn');
            if (checkout) checkout.disabled = buyable === 0;
        }

        function showEmptyIfNeeded() {
            var empty = document.getElementById('cartEmpty');
            var body  = document.getElementById('cartBody');
            if (!empty || !body) return;
            if (cartItems.length === 0) {
                empty.classList.remove('hidden');
                body.classList.add('hidden');
            } else {
                empty.classList.add('hidden');
                body.classList.remove('hidden');
            }
        }

        // One-time inline "cart updated" notice (the amber banner) — shown when the GET reconcile
        // moved a price or auto-reduced a qty (out-of-stock excluded — it has its own guard). Dismissible.
        function showCartChangeNotice() {
            var n = document.getElementById('cartChangeNotice');
            if (n) n.classList.remove('hidden');
        }

        // Single round-trip cart mutation. The handler returns the full post-mutation item list
        // + cart_count so the page never needs a separate refresh fetch (Rule 4 — verifies the
        // "no double-fetch" intent).
        function cartMutate(payload) {
            ajaxSend(url, {
                predefined15: cartCmd,
                predefined16: cartKeys,
                val16: [ payload.product_pid, payload.identifier, String(payload.quantity), payload.type ]
            }, method, function (data) {
                if (!data || !Array.isArray(data.items)) return;
                cartItems = data.items;
                syncHeaderBadge(parseInt(data.cart_count, 10) || 0);
                renderItems();
                recomputeSummary();
                showEmptyIfNeeded();
            }, debug, bypassBlocking, bypassLoading, 0);
        }

        // Backend shoppingCartV4 accepts type 'add' (delta) and 'value' (set absolute qty).
        // +/- compute the new absolute qty and send type='value' (idempotent set).
        function bumpQty(idx, delta) {
            var it = cartItems[idx];
            if (!it) return;
            var next = (parseInt(it.quantity, 10) || 1) + delta;
            // Clamp to available stock for tracked items so we never send a qty the backend rejects.
            if (it.stock_tracked) {
                var max = parseInt(it.available_stock, 10) || 0;
                if (next > max) next = max;
            }
            next = Math.max(1, next);
            if (next === it.quantity) return;
            cartMutate({
                product_pid: it.product_pid,
                identifier:  it.identifier,
                quantity:    next,
                type:        'value'
            });
        }

        // Remove flow (design parity): removeItem() opens the confirmation modal; the actual
        // mutation runs in confirmRemoveProceed(). Remove = set the line quantity to 0 via
        // type='value'. (If the backend uses a dedicated remove type instead of treating 0 as
        // removal, switch this single 'type' value.)
        var pendingRemoveIdx = null;

        function removeItem(idx) {
            var it = cartItems[idx];
            if (!it) return;
            pendingRemoveIdx = idx;
            var ov = document.getElementById('removeConfirmOverlay');
            if (ov) ov.classList.remove('hidden');
        }

        function closeRemoveConfirm() {
            pendingRemoveIdx = null;
            var ov = document.getElementById('removeConfirmOverlay');
            if (ov) ov.classList.add('hidden');
        }

        function confirmRemoveProceed() {
            var idx = pendingRemoveIdx;
            closeRemoveConfirm();
            if (idx === null) return;
            var it = cartItems[idx];
            if (!it) return;
            cartMutate({
                product_pid: it.product_pid,
                identifier:  it.identifier,
                quantity:    0,
                type:        'value'
            });
        }

        $(document).ready(function () {
            renderItems();
            recomputeSummary();

            // Notice when the server reconcile on this GET changed the cart (price / qty / unavailable).
            if (cartInitialChanged) showCartChangeNotice();

            // Event delegation — survives renderItems() rebuilding the row markup. Steppers live only
            // on in-stock rows; remove is shared by available and unavailable rows.
            $('#cartItems').on('click', '.cart-qty-inc', function () { bumpQty(parseInt(this.dataset.idx, 10), +1); });
            $('#cartItems').on('click', '.cart-qty-dec', function () { bumpQty(parseInt(this.dataset.idx, 10), -1); });
            $('#cartItems').on('click', '.cart-remove',  function () { removeItem(parseInt(this.dataset.idx, 10)); });
            $('#cartRemoveAllBtn').on('click', removeAllUnavailable);

            // Checkout re-runs the live price/stock check before navigating. Unavailable lines BLOCK
            // checkout — the user must remove them first (over-qty lines are auto-reduced server-side).
            $('#cartCheckoutBtn').on('click', function () {
                if (this.disabled) return;
                ajaxSend(url, { predefined17: recheckCmd }, method, function (data) {
                    if (!data || !Array.isArray(data.items)) { window.location.href = '/checkout'; return; }
                    cartItems = data.items;
                    syncHeaderBadge(parseInt(data.cart_count, 10) || 0);
                    renderItems();
                    recomputeSummary();
                    showEmptyIfNeeded();
                    if (data.out_of_stock) {
                        if (typeof showMessage === 'function') showMessage(CART_TXT_BLOCK, 'warning', CART_TXT_BLOCK_TITLE, '', '');
                        return; // block until unavailable lines are removed
                    }
                    window.location.href = '/checkout';
                }, debug, bypassBlocking, bypassLoading, 0);
            });
        });
    </script>
</body>
</html>
<!--------------------------------------------------------Start of HTML block (end)-------------------------------------------------------->