

<!--

    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
      确定 (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>Shop Flowers & Bouquets — Mr Flower</title>
    <link rel="shortcut icon" href="/images/project/MF-Logo-tm-ori-fav.webp" />
    <meta name="description" content="Browse fresh handcrafted bouquets, flower stands and gifts at Mr Flower — shop by occasion and order with same-day delivery across the Klang Valley.">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mr Flower">
    <link rel="canonical" href="https://www.mrflower.com.my/products">
    <meta property="og:title" content="Shop Flowers & Bouquets — Mr Flower">
    <meta property="og:description" content="Browse fresh handcrafted bouquets, flower stands and gifts at Mr Flower — shop by occasion and order with same-day delivery across the Klang Valley.">
    <meta property="og:url" content="https://www.mrflower.com.my/products">
    <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="">
    <!-- 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()">
                  确定               </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">欢迎来到 Mr Flower，用心创作，为您设计。</span>
            <span class="gs-marquee-item" aria-hidden="true">欢迎来到 Mr Flower，用心创作，为您设计。</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">首页</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">商店</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">关于我们</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">联系我们</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">订单追踪</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="搜索产品"
                    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="登录">
                    <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="查看收藏">
                    <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="查看购物车">
                <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="菜单" 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="搜索产品"
         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="搜索鲜花、花束…" value="">
                    <button type="submit" class="flex items-center bg-transparent border-0 cursor-pointer text-[color:var(--primary-color)] hover:opacity-70" aria-label="搜索产品">
                        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
                    </button>
                </form>
                <button type="button" onclick="closeHeaderSearch()" aria-label="关闭搜索"
                        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="菜单"
         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">首页</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">商店</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">关于我们</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">联系我们</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">订单追踪</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">收藏</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-[var(--primary-bg-color)] text-[var(--secondary-color)]">
    <main class="flex-1">
        <div class="max-w-[1380px] mx-auto px-6 md:px-12 pt-3 pb-10">

            <!-- Page head — hidden per request (ids kept in DOM for updateHeading() JS contract) -->
            <div class="py-3 hidden">
                                    <h1 id="listingHeading" class="text-[length:var(--fs-26)] font-black m-0 text-[var(--secondary-color)]">所有产品</h1>
                    <p id="listingSubtitle" class="text-[length:var(--sm-text-size)] text-[var(--fourth-text-color)] mt-1 mb-0">浏览我们的完整目录</p>
                            </div>

            <!-- Mobile filter chip bar (hidden on desktop): horizontal inner-scroll; opens the panel below. -->
            <div class="lg:hidden mt-2">
                <div class="flex items-center gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                    <button type="button" data-filter-open="category"
                            class="inline-flex items-center gap-1.5 flex-shrink-0 h-9 px-3.5 rounded-full text-[length:var(--sm-text-size)] font-bold whitespace-nowrap border bg-white text-[var(--secondary-color)] border-[var(--primary-border-color)]">
                        <span data-chip-label>分类</span>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
                    </button>
                    <button type="button" data-filter-open="price"
                            class="inline-flex items-center gap-1.5 flex-shrink-0 h-9 px-3.5 rounded-full text-[length:var(--sm-text-size)] font-bold whitespace-nowrap border bg-white text-[var(--secondary-color)] border-[var(--primary-border-color)]">
                        <span data-chip-label>价格</span>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-5 mt-3">

                <!-- Filters: desktop left sidebar / mobile dropdown panel — ONE set of controls.
                     hidden on mobile until a chip opens it (lg:block keeps it always-on at desktop).
                     Mobile: NO inner scroll — the panel grows to its full height and the PAGE (browser)
                     scrolls, so a long category list is never trapped in a nested scroller. -->
                <aside id="filterPanel" class="hidden lg:block h-fit lg:sticky lg:top-[96px] max-lg:bg-[var(--color-bg-warm)] max-lg:rounded-xl max-lg:p-[18px] lg:bg-transparent lg:p-0">
                    <div class="lg:hidden flex items-center justify-between text-[length:var(--sm-text-size)] font-extrabold mb-3">
                        筛选                        <a id="clearFilters" class="text-[length:var(--xs-text-size)] font-semibold text-[var(--primary-text-color)] cursor-pointer no-underline">清除全部</a>
                    </div>

                    <!-- Category -->
                    <div data-group="category" class="lg:block pb-3.5">
                        <div id="catAllHeading" class="text-[length:var(--lg-text-size)] font-normal font-display text-[var(--secondary-color)] border-b border-[color:var(--color-border-default)] py-1.5 mb-2 cursor-pointer select-none transition-colors hover:text-[color:var(--color-brand-primary)]">
                            <span>所有产品</span>
                        </div>
                        <div class="fs-body">
                                                    <div class="flex flex-col">
                                        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="e027a3aa-6932-4966-9a36-ed470a45ddd9"
                       >
                <span class="flex-1">by Occasion &amp; Type</span>
            </label>
                            <button type="button" onclick="toggleSubcat(this)" aria-label="切换子分类"
                        class="shrink-0 p-1 text-[color:var(--color-text-muted)] transition-transform duration-200 hover:text-[color:var(--color-brand-primary)] rotate-90">
                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
                </button>
                    </div>
                    <ul class="list-none pl-3 py-1 m-0 border-l-2 border-[color:var(--color-brand-blush)]" data-parent="e027a3aa-6932-4966-9a36-ed470a45ddd9">
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="2f7c86c4-8543-4f03-9062-af3f87c46c7b"
                       >
                <span class="flex-1">Mother&#039;s Day</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="6458724c-73c3-48d5-a26b-621e9c59ae5e"
                       >
                <span class="flex-1">Soap Petals</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="a1de6d17-ae1b-4375-8346-a0c628d7bb75"
                       >
                <span class="flex-1">Hand Bouquet</span>
            </label>
                            <button type="button" onclick="toggleSubcat(this)" aria-label="切换子分类"
                        class="shrink-0 p-1 text-[color:var(--color-text-muted)] transition-transform duration-200 hover:text-[color:var(--color-brand-primary)]">
                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
                </button>
                    </div>
                    <ul class="hidden list-none pl-3 py-1 m-0 border-l-2 border-[color:var(--color-brand-blush)]" data-parent="a1de6d17-ae1b-4375-8346-a0c628d7bb75">
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="7a108d6e-a4cd-4b74-a72a-04ea154fc306"
                       >
                <span class="flex-1">Romantic Flower</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="46efc69a-c092-417f-9032-86f474973219"
                       >
                <span class="flex-1">Birthday / Celebration</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="791c5a33-367b-4244-8a7c-0ba365bcb905"
                       >
                <span class="flex-1">Graduation Flower</span>
            </label>
                    </div>
                </li>
                            </ul>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="db5afc54-a37a-4503-876a-29be124fd484"
                       >
                <span class="flex-1">Condolence &amp; Symphathy</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="50eb64da-6bc0-40fd-a28d-9d57de089217"
                       >
                <span class="flex-1">Opening / Congratulations Stand</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="f334accf-1c9f-4116-901c-60219f0b798a"
                       >
                <span class="flex-1">Basket Flower</span>
            </label>
                            <button type="button" onclick="toggleSubcat(this)" aria-label="切换子分类"
                        class="shrink-0 p-1 text-[color:var(--color-text-muted)] transition-transform duration-200 hover:text-[color:var(--color-brand-primary)]">
                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
                </button>
                    </div>
                    <ul class="hidden list-none pl-3 py-1 m-0 border-l-2 border-[color:var(--color-brand-blush)]" data-parent="f334accf-1c9f-4116-901c-60219f0b798a">
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="4d7f21a1-13bb-43fc-8ada-2f99451a3398"
                       >
                <span class="flex-1">Fruit Basket</span>
            </label>
                    </div>
                </li>
                            </ul>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="2c1b0a84-fa4f-4417-ad2b-6bdb576deee3"
                       >
                <span class="flex-1">Box Flower</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="52aa9981-ce38-4aaf-be3b-ade70a694320"
                       >
                <span class="flex-1">Bridal / Wedding</span>
            </label>
                            <button type="button" onclick="toggleSubcat(this)" aria-label="切换子分类"
                        class="shrink-0 p-1 text-[color:var(--color-text-muted)] transition-transform duration-200 hover:text-[color:var(--color-brand-primary)]">
                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
                </button>
                    </div>
                    <ul class="hidden list-none pl-3 py-1 m-0 border-l-2 border-[color:var(--color-brand-blush)]" data-parent="52aa9981-ce38-4aaf-be3b-ade70a694320">
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="3f8c7c58-3cc2-41d6-882d-3e1b0ae6dce3"
                       >
                <span class="flex-1">Wedding Bouquet</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="07b84c28-950e-4de1-9188-c456ec648f79"
                       >
                <span class="flex-1">Wedding Car Deco</span>
            </label>
                    </div>
                </li>
                            </ul>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="7e4d26a2-04c3-43fe-9795-799937caef78"
                       >
                <span class="flex-1">Car Boot Deco</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="7a8f5fdf-7367-479a-9b2f-9491ed81b9c3"
                       >
                <span class="flex-1">Boutonniere &amp; Corsage</span>
            </label>
                            <button type="button" onclick="toggleSubcat(this)" aria-label="切换子分类"
                        class="shrink-0 p-1 text-[color:var(--color-text-muted)] transition-transform duration-200 hover:text-[color:var(--color-brand-primary)]">
                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
                </button>
                    </div>
                    <ul class="hidden list-none pl-3 py-1 m-0 border-l-2 border-[color:var(--color-brand-blush)]" data-parent="7a8f5fdf-7367-479a-9b2f-9491ed81b9c3">
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="8a09bb5b-3a4f-4705-99be-e77443d69542"
                       >
                <span class="flex-1">Boutonniere (Shirt Corsage)</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="f4a00581-0619-4755-bf75-750481d0e86f"
                       >
                <span class="flex-1">Wrist Corsage</span>
            </label>
                    </div>
                </li>
                            </ul>
                </li>
                            </ul>
                        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="a0c8ea6e-8c77-4a77-97a9-ba9956411fab"
                       >
                <span class="flex-1">by Flower</span>
            </label>
                            <button type="button" onclick="toggleSubcat(this)" aria-label="切换子分类"
                        class="shrink-0 p-1 text-[color:var(--color-text-muted)] transition-transform duration-200 hover:text-[color:var(--color-brand-primary)] rotate-90">
                    <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
                </button>
                    </div>
                    <ul class="list-none pl-3 py-1 m-0 border-l-2 border-[color:var(--color-brand-blush)]" data-parent="a0c8ea6e-8c77-4a77-97a9-ba9956411fab">
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="50d9d97a-8f62-4f7d-9f9d-90dcdebc7941"
                       >
                <span class="flex-1">Daisy</span>
            </label>
                    </div>
                </li>
                                    <li>        <div class="flex items-center">
            <label class="flex items-center flex-1 py-[5px] text-[length:var(--default-text-size)] text-[color:var(--color-text-muted)] cursor-pointer transition-colors hover:text-[color:var(--color-brand-primary)] has-[:checked]:text-[color:var(--color-brand-primary)] has-[:checked]:font-semibold">
                <input type="checkbox" class="gs-cat-cb sr-only peer"
                       value="6cec13fd-6d6f-41f5-8086-5d407be17ae1"
                       >
                <span class="flex-1">Rose</span>
            </label>
                    </div>
                </li>
                            </ul>
                                            </div>
                                                </div>
                    </div>

                    <!-- Price -->
                    <div data-group="price" class="lg:block py-3.5">
                        <div onclick="toggleFilterSection(this)" class="flex items-center justify-between cursor-pointer select-none text-[length:var(--lg-text-size)] font-normal font-display text-[var(--secondary-color)] border-b border-[color:var(--color-border-default)] py-1.5 mb-2.5">
                            <span>价格</span>
                            <svg class="fs-caret w-3 h-3 text-[color:var(--color-text-muted)] transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
                        </div>
                        <div class="fs-body">
                            <div class="flex flex-wrap gap-1.5">
                                                                                                    <label class="cursor-pointer select-none text-[length:var(--default-text-size)] font-medium bg-white rounded-full border border-[color:var(--color-border-default)] px-2.5 py-1 text-[color:var(--color-text-muted)] transition-colors hover:border-[color:var(--color-brand-primary)] has-[:checked]:bg-[color:var(--color-brand-primary)] has-[:checked]:text-white has-[:checked]:border-[color:var(--color-brand-primary)]">
                                        <input type="checkbox" class="gs-price-cb sr-only peer"
                                               data-min=""
                                               data-max="50">
                                        RM50 以下                                    </label>
                                                                    <label class="cursor-pointer select-none text-[length:var(--default-text-size)] font-medium bg-white rounded-full border border-[color:var(--color-border-default)] px-2.5 py-1 text-[color:var(--color-text-muted)] transition-colors hover:border-[color:var(--color-brand-primary)] has-[:checked]:bg-[color:var(--color-brand-primary)] has-[:checked]:text-white has-[:checked]:border-[color:var(--color-brand-primary)]">
                                        <input type="checkbox" class="gs-price-cb sr-only peer"
                                               data-min="50"
                                               data-max="200">
                                        RM50 – 200                                    </label>
                                                                    <label class="cursor-pointer select-none text-[length:var(--default-text-size)] font-medium bg-white rounded-full border border-[color:var(--color-border-default)] px-2.5 py-1 text-[color:var(--color-text-muted)] transition-colors hover:border-[color:var(--color-brand-primary)] has-[:checked]:bg-[color:var(--color-brand-primary)] has-[:checked]:text-white has-[:checked]:border-[color:var(--color-brand-primary)]">
                                        <input type="checkbox" class="gs-price-cb sr-only peer"
                                               data-min="200"
                                               data-max="500">
                                        RM200 – 500                                    </label>
                                                                    <label class="cursor-pointer select-none text-[length:var(--default-text-size)] font-medium bg-white rounded-full border border-[color:var(--color-border-default)] px-2.5 py-1 text-[color:var(--color-text-muted)] transition-colors hover:border-[color:var(--color-brand-primary)] has-[:checked]:bg-[color:var(--color-brand-primary)] has-[:checked]:text-white has-[:checked]:border-[color:var(--color-brand-primary)]">
                                        <input type="checkbox" class="gs-price-cb sr-only peer"
                                               data-min="500"
                                               data-max="">
                                        RM500 以上                                    </label>
                                                            </div>
                        </div>
                    </div>
                </aside>

                <!-- Grid (ResponsiveTable card mode mounts here) -->
                <div>
                    <div id="listingTable" class="w-full"></div>

                    <!-- ============================================================
                         No-results empty state. Hidden by default; syncEmptyState(total)
                         reveals it + hides #listingTable when total === 0. Three variants
                         (search / category-filter / generic) — icon, copy + CTAs set by JS.
                         role=status + aria-live=polite => SR announces the swap politely on
                         the next AJAX result. Recovery CTAs reuse the page's existing hooks
                         (gs:search-cleared / #clearFilters / browse-all reload).
                    ============================================================ -->
                    <div id="productsEmptyState"
                         class="hidden w-full flex flex-col items-center justify-center text-center py-16 md:py-24 px-6"
                         role="status" aria-live="polite">

                        <!-- Blush arch badge — echoes the product-card frame (border-2 blush-deep
                             over blush fill). Icon morphs per variant; decorative (heading names it). -->
                        <div class="flex items-center justify-center w-[112px] h-[112px] md:w-[128px] md:h-[128px] rounded-full bg-[color:var(--color-brand-blush)] border-2 border-[color:var(--color-brand-blush-deep)] mb-7">
                            <span id="emptyStateIcon"
                                  class="material-symbols-outlined text-[length:var(--fs-40)] leading-none text-[color:var(--color-brand-primary)] select-none"
                                  aria-hidden="true">local_florist</span>
                        </div>

                        <!-- Quinstory display heading (warm --color-text-primary). -->
                        <h2 id="emptyStateHeading"
                            class="font-display font-normal m-0 leading-[1.2] text-[length:var(--fs-30)] md:text-[length:var(--fs-34)] text-[color:var(--color-text-primary)]"></h2>

                        <!-- Muted Montserrat body, capped ~52ch for a readable line length. -->
                        <p id="emptyStateBody"
                           class="mt-3 mb-0 max-w-[52ch] text-[length:var(--md-text-size)] leading-[1.65] text-[var(--fourth-text-color)]"></p>

                        <!-- ONE dominant primary pill (brand-primary token — matches the PDP
                             not-found recovery CTA) + ONE subordinate underlined text link. -->
                        <div class="mt-8 flex flex-col items-center gap-4">
                            <button type="button" id="emptyStatePrimaryCta"
                                    class="inline-flex items-center justify-center gap-2 cursor-pointer bg-[var(--btn-primary-bg-color)] hover:opacity-90 text-white rounded-full font-bold text-[length:var(--default-text-size)] px-8 py-[13px] transition-opacity">
                                <span id="emptyStatePrimaryIcon" class="material-symbols-outlined text-[length:var(--md-text-size)] leading-none" aria-hidden="true">search</span>
                                <span id="emptyStatePrimaryLabel"></span>
                            </button>
                            <button type="button" id="emptyStateSecondaryCta"
                                    class="hidden cursor-pointer bg-transparent border-0 p-0 text-[length:var(--sm-text-size)] font-semibold text-[color:var(--color-brand-primary)] underline underline-offset-4 decoration-1 hover:decoration-2 transition-all">
                                <span id="emptyStateSecondaryLabel"></span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Product card structure (reskin edit zone). renderProductCard() clones this, fills the
             data-bind hooks, strips them + inter-tag whitespace, and returns the serialized HTML. -->
        <template id="productCardTpl">
            <a data-bind="link" href="" class="group flex flex-col items-center text-center no-underline text-[var(--secondary-color)] transition-transform duration-200 hover:-translate-y-[3px]">
                <div class="w-full aspect-[1/1.3] rounded-[110px] overflow-hidden isolate transform-gpu border-2 border-[color:var(--color-brand-blush-deep)] p-2.5 bg-transparent">
                    <img data-bind="img" src="" alt="" class="w-full aspect-[1/1.3] object-cover rounded-[100px] transition-transform duration-300 ease-out group-hover:scale-[1.04]" loading="lazy" onerror="this.onerror=null;this.src='/images/product-placeholder.webp';">
                </div>
                <div data-bind="name" class="mt-2.5 text-[length:var(--sm-text-size)] font-bold leading-[1.5] text-[color:var(--color-text-primary)] line-clamp-2"></div>
                <div class="mt-1.5">
                    <span data-bind="price" class="inline-block text-[length:var(--md-text-size)] font-bold text-[color:var(--color-brand-primary)] bg-[color:var(--color-bg-cream-subtle)] px-3 py-[3px] rounded-[20px]"></span>
                </div>
                <div data-bind="brand" class="text-[length:var(--xs-text-size)] text-[color:var(--color-text-muted)] mt-1 truncate"></div>
            </a>
        </template>
    </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="切换语言" aria-haspopup="true">
                        <span class="material-symbols-outlined text-[length:var(--fs-16)] leading-none" aria-hidden="true">language</span>
                        <span>中文</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="/products?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)] ">EN</a>
                                                    <a href="/products?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)] font-bold">中文</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">我们的商店</h2>
                <a href="/" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">首页</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">商店</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">关于我们</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">快速链接</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">联系我们</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">订单追踪</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">条款与条件</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">隐私政策</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">联系方式</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#781b17160c191b0c38150a1e14170f1d0a561b1715561501" 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="1b7874756f7a786f5b76697d77746c7e6935787476357662">[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)]">
                版权所有 &copy; 2026 Mr Flower Sdn Bhd (1015322 T). 保留所有权利。            </p>
            <p class="m-0 mt-1 text-[length:var(--xs-text-size)] text-[color:var(--footer-text-color)]">
                技术支持                <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="通过 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>

    <!--
 @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 = "products.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 = 'products';
//         var phpStartTime = '1783707761.9464';
//         var jsStartTime = '';
//         var jsEndTime = new Date().getTime() / 1000;
//         var jsLoadTime = jsEndTime - jsStartTime;
//         var totalPageLoadTime = jsEndTime - phpStartTime;
//         //var phpEndTime = '1783707763';
//         //var phpLoadTime = '1.0536239147186'; 
//         var queryTime = {"getClientIpInfo":{"totalTime":0.044469999999999996,"count":1,"lastExecuted":"2026-07-11 02:22:42"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":44.47,"executionTimeSec":0.0445,"accumulatedTimeMs":44.47,"accumulatedTimeSec":0.0445,"timestamp":"2026-07-11 02:22:42"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":186.96,"executionTimeSec":0.187,"accumulatedTimeMs":231.43,"accumulatedTimeSec":0.2314,"timestamp":"2026-07-11 02:22:42"}],"accumulatedTimeMs":231.43,"bootstrapSession":{"totalTime":0.18696000000000002,"count":1,"lastExecuted":"2026-07-11 02:22:42"}};
//         var phpLoadTime = queryTime['accumulatedTimeMs']/1000;

//         if(totalPageLoadTime > 3){
//         //if(true){
//             var url = '/products'; 
//             var method = 'POST';
//             var debug = 0; 
//             var bypassBlocking = 0; 
//             var bypassLoading = 0; 
//             var fCallback = '';
//             var formData = {
//                 predefined992: "eucpxxTEur7L7AkGjmXYGQ0nTr6Gl08Xwl5OkRJMqVd\/NYEKwtegTXWBvph2zXR8d7ECEcYRi6HDgDZ2OtJiTWjsPjCrB1UVwEEeTciEFW2WWkmlQa\/1e18pKaRrr+tFyPE+oPRzXzOyfW9ng\/u5OcCAJtl1h9rzluqXEEix7qYas9kPrYbR5cWOA1z9JsxhMZBtGRm38uMkzPYngViZwlWqodm5Jt0UTsrzN35aPbUI5ezjCYzc71QK6IfldOve+xARGYW5lkY0acmz+D57dEWKq1EXW0cZXwOZ+FKvf0LwKAwnPhb8bM\/kLXWqSP9wMtDaJYqCafdBr+Yq63lb6g==",
//                 predefined993: "Eha8gqMYtrllkXIyD8Y1WqbhlWLDJL4MACx7tHoDcmsOTBobrRWVtoYMjNxJ+ixcWCZ7JYrqJb4w13OeooQYUQJiRVi2OYEWP2dRDih\/ZfJmg6aT4TWd2WA\/CjCzLNxYBzOtB6VpeDt59H5FobAWZH6nMAEkvxI\/2xC7rBiYoyThz5kqpcjTEMyTmLIOxmDUUrLa6lSuOn4WPqgILrz6A4mT+5g0jBhx11fOCDEAqo+X7hr1PXSosYU0FaE1JCfYSr9\/KIN8M6e+3UDYjHOmTAFoTHFvrQBK1SEoBHngc2\/TFObcskE4gu7CqFCNlo0EUyOCm1oHQYL2oOYhwl\/LuA==",
//                 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 = 'products';
        // 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 = '/products' + 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 = 'products';
        var phpStartTime = '1783707761.9464';
        var jsStartTime = '';
        var jsEndTime = new Date().getTime() / 1000;
        var jsLoadTime = jsEndTime - jsStartTime;
        var totalPageLoadTime = jsEndTime - phpStartTime;
        var queryTime = {"getClientIpInfo":{"totalTime":0.044469999999999996,"count":1,"lastExecuted":"2026-07-11 02:22:42"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":44.47,"executionTimeSec":0.0445,"accumulatedTimeMs":44.47,"accumulatedTimeSec":0.0445,"timestamp":"2026-07-11 02:22:42"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":186.96,"executionTimeSec":0.187,"accumulatedTimeMs":231.43,"accumulatedTimeSec":0.2314,"timestamp":"2026-07-11 02:22:42"}],"accumulatedTimeMs":231.43,"bootstrapSession":{"totalTime":0.18696000000000002,"count":1,"lastExecuted":"2026-07-11 02:22:42"}};
        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 = '/products';
            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: "eucpxxTEur7L7AkGjmXYGQ0nTr6Gl08Xwl5OkRJMqVd\/NYEKwtegTXWBvph2zXR8d7ECEcYRi6HDgDZ2OtJiTWjsPjCrB1UVwEEeTciEFW2WWkmlQa\/1e18pKaRrr+tFyPE+oPRzXzOyfW9ng\/u5OcCAJtl1h9rzluqXEEix7qYas9kPrYbR5cWOA1z9JsxhMZBtGRm38uMkzPYngViZwlWqodm5Jt0UTsrzN35aPbUI5ezjCYzc71QK6IfldOve+xARGYW5lkY0acmz+D57dEWKq1EXW0cZXwOZ+FKvf0LwKAwnPhb8bM\/kLXWqSP9wMtDaJYqCafdBr+Yq63lb6g==",
                predefined993: "Eha8gqMYtrllkXIyD8Y1WqbhlWLDJL4MACx7tHoDcmsOTBobrRWVtoYMjNxJ+ixcWCZ7JYrqJb4w13OeooQYUQJiRVi2OYEWP2dRDih\/ZfJmg6aT4TWd2WA\/CjCzLNxYBzOtB6VpeDt59H5FobAWZH6nMAEkvxI\/2xC7rBiYoyThz5kqpcjTEMyTmLIOxmDUUrLa6lSuOn4WPqgILrz6A4mT+5g0jBhx11fOCDEAqo+X7hr1PXSosYU0FaE1JCfYSr9\/KIN8M6e+3UDYjHOmTAFoTHFvrQBK1SEoBHngc2\/TFObcskE4gu7CqFCNlo0EUyOCm1oHQYL2oOYhwl\/LuA==",
                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 = '/products';
            var method = 'POST';
            var debug = 0;
            var bypassBlocking = 0;
            var bypassLoading = 0;
            var fCallback = successLogout;
            var formData = {
                predefined995: "KS+l3xxgJF1p4Kbt7P8sPHJifcvkyz7L1dAf3b7Ws2NSu6F7R2fUMUCrrgl2ZKQh1mzabdVcrj3nCjl3eHJjuUnV5NNNSWUUxWlP+WarhuizLckY4gMH\/ZVeo69wGZ5U+NIeos4KTSBw\/WeyloIh1S16IMABNTZXu5T1rbTY6uVsOhrOavigNRlyjpHdPP76+PzdXwfHtVad+waB3c3Fgw8bumolGy1FupNZa\/FBJ\/p3dyXhZ8wCcfEgSHEH0TLILS5UFz7NyOYIPh8so3qz2dykZi2NBHna6R0HdbcXduTPFQVisSkFfUUfWwcVfKxdUdcdWaJE\/AQVmE1x+DUilA=="            };

            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 = '/products';
    var method = 'POST';
    var debug = 0;
    var bypassBlocking = 0;
    var bypassLoading = 0;
    var fCallback = setMemberUIDCookie;
    var formData = {
        predefined991: "Cx8Fk39dg58azoyLVrN1vjb\/GXSvXr89vchCA9lF3FCEeCy8L49TxBF4OarhbK6uSDlXzaOoe1YcefUduZvbgs45k4fBLgNH5aAxtnOBnUd9bbmXt07Q+38X7XHhutzH6YoZrKikQuJviuVGnuXPFaoszZF0cio0t+4z\/JV31unJOTJQZkAjIA4P94tJEh6ER9y\/VGMsR8Irl\/hgudBy66o05ReseqNwwxLbzvLX9Ug2QlELybIJHWc+qLRTPgi7TLjq185+yFXx1s6mqfqPEkROLd2d0c0dzX9H9v5TthGmB19eVGb9XbUO46E6DbyJQRc7sa7z\/+g9SdI4LPa6Zg==",
    };
    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 : "eyJlbmNyeXB0ZWRfa2V5IjoiZDlTa1hUVDZCaGpYR0Eyb01tNHU3Y083K1BnaWFUMTdteWZIUCtwMk83VzVsakZvemtOV2xwSFVBcUdxdTF6MnBVTEhMYnhmZEtzcnhRZTVITEhET2k2WTZDa2tGUGZuWmJZYlBsTFJXdmhCbnQ4dm91NjZLd1dId3hmR3NBZlJ5QVl3Q3ZvSnF3MjlTVFhBb25nenZaU2YxMjcraXJTQlwvcXdWMWZOWlVWVTFQbXNLbnlSSVlyblNod3drVEx0SDVaZENvTGU2Y3hyVko1NGVzYVpGWnQ0eTJDWU1idHlRSUFKTFNpc2R4TmZJY2tuZzFNS2t5TjlLUkJ3SXV4b2dFczVmczVWN1VBYTByTWt2aUFWRzl1anRqYzRxYnZDMkFrb0VFZFwvamdnXC9kRDA3bzcxRlFDOVdvelg3TXlqcVExRUw4SGtGYWsyeFhjWlVteXY0NlVRPT0iLCJpdiI6IjJFd044OHA4OStrWDVoSllIY1V4SVE9PSIsImVuY3J5cHRlZF9kYXRhIjoiejZ2MTJKTUxxUGQxWWYxbFVGTEVCdXJNdXJuYUZmRkJjemJ4c041cUg1V0VoajBWWmR4ejlHUzU3T0lrd2s3VE5nWTlDYTRjUUhzQlo3c1JSM1k2MHk5dGE4aVdcL1h5OE0xaXNwQXBpaWI2aXp4NVwvQStOR2t4RmpjK2wzS0JsQVVZazVBNmNiWmZZd3o1K282UzU3aFA4aEQ4M08rTE1TUVNWbFJzODFCTDJBbHl6bFJXYStjV0VRQklGQlhMWU5aVVFqUnhFaDJ3c3RpXC9qQjBJMkRHYzJrWnIzMjJ2cWVhRU9UZnlXOWNod0VzbklWSVwvamxsdlNiN1ZsdGEwTlhocjhoeUJycGNmQzJIXC9WdzJ1TnlQYlIyQk9panhYbkI4cnF0NnFhZEQwOD0iLCJpc19qc29uIjp0cnVlLCJtZXRob2QiOiJoeWJyaWQifQ==",
          predefined1 : "HFHXAFwej\/XEAYY3XfiNHkOUv+gqZIkI5VzPQPkdgqscF+06z64t74mN2zg6TIMTkW39TeNSOtFifrlz0Fw5lFaqsVfxApiLPXW4KmIbzcMl6C6Z9QoGD++26IT1GQfcG2O\/ch6SQ7MzH+nVM0a0nw0Wf2B9fXsUpSfOre+ONpCI2C7oL70dcb+tfsFbPRNC5X5WqTLKQgUjUKd3kQ5\/Q+sP5c6At0o5kOVMitzd6Uw5VnldGSGlyv+uAcRJPYb0c4iQ\/we5YsVTbCIgavcC2Saexr05f2O07sBW5Bcmq\/r3EIjxAfUB\/EppN74LFrcgIIoRwQ51gWG5\/7ABRQcU4A==",
          predefined2 : "G1Vm66RDArKdTp5H+rsNrNGVHWYYHJgag3rbK+2CPU84PSMcp+HnlLPbeiKNfzc84vZCgsD+yRX4KYRgzG5gTC8c9cDCTshHIjNbK9beL52iDlhnexK8AhQpRCV2EV4qOVQJCq7aL8YNvDiTqfH\/rR4tHP\/fdju4iZj9sZWhnOAXH0a9\/t2trbsLFNuKP3agmiQqCsoayt14lAMvEE1Rrh6ZT6vSQsTRGMy9R5IGZsI\/Yj8c7FDSBn8IArQcOdTeJegUnrR90X\/EiOjZQ\/JmUOkkouylnaIwdoTyL84rJivyKfEs69jKueClxDhzsorAjNRFS+8gkDQmNCCgpt6x8A==",
          predefined3 : "npUcSI7xEjqX2vzWgw86cmGiHTmpXsvBmDOzyFYRUTB56xslHhezD3l6yZn5oIlSJoqxEKloB3NOZexth5p0e2dtdR560yYhKpGBma3N\/UPueKEqH3zTNiDmbg5tV+A4QWc4NvWv9gsw1Elt5Dw2d4DD+0r6W7jNSrS7nHGvcfNDkhbKx5OsSfvlPb7+vV91OxGLR7sYNubZM2WsckeFgIMBmrIeMLxpPmcyN09mUKl0XH4DsCxcQctH5Pg90EaMj+vmGSD5Z8EI+Rn4CSrrSoMdj9CoHCCyzootVq\/7pp4Dik8syiInH\/8Z1Xgu7LI0Xm3eIJ9KiWIqWc3Ue4mrBQ==",
          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 src="/share_js/responsive-table_v3.0.2.js?v=1783512930"></script>

    <script>
        // ---- AJAX transport (predefined encryption flow) ----
        var url            = '/products';
        var method         = 'POST';
        var debug          = 0;
        var bypassBlocking = 1;   // grid has its own loading; don't block the whole page
        var bypassLoading  = 1;

        // general_v3.0.2.js's ajaxSend reads these session-timer globals on EVERY success
        // (to extend the idle timeout). No member chrome file declares them — pages like sign-in
        // dodge it by navigating away after the callback. This page does in-place AJAX (stays put),
        // so it must declare them or ajaxSend throws "sessionTimeOut is not defined". Sourced from the
        // PHP $sessionTimeOut that entry_v1.0.4 sets (0 for anonymous → timer block is skipped).
        var sessionTimeOut = 0;
        var timeOut        = 0;

        var DEFAULT_PRODUCT_IMAGE = "\/images\/product-placeholder.webp";
        var listingData    = [{"id":5896,"pid":"507b2bf3-064f-4b56-aeb2-f705603ae7f4","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Tiny Warmth Love (MF04)","description":"[Tiny Warmth Love]\n\nBlooms: Carnation, Baby Breath\n\nA sweet and petite bouquet filled with mini carnations and delicate baby\u2019s breath, finished with soft greenery for a fresh touch. Available in red, pink, or purple, Tiny Love may be small in size, but it carries a big message \u2014 a simple, heartfelt way to show appreciation and love to mum.\n\n#carnation\n#babybreath\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-662","sale_price":"0.00000000","min_variant_price":"59.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Vending Machine","status":"PUBLISHED","available_stock":-10,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-10 13:37:17","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/624be619b5c0cb44e999a3375a002cf7.webp"],"detail_url":"\/product-detail\/tiny-warmth-love-mf04\/507b2bf3-064f-4b56-aeb2-f705603ae7f4"},{"id":5894,"pid":"41538613-23fb-40d0-b025-4dbc8825b876","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Mom Soft Embrace (MF03)","description":"[Mom Soft Embrace]\n\nBlooms: Roses, Carnations\n\nA graceful bouquet that blends soft roses and ruffled carnations with fresh matthiola blooms, creating a light and comforting arrangement. Available in gentle blush pink or elegant purple tones, Soft Embrace reflects a mother\u2019s warmth and care \u2014 calm, beautiful, and full of love in every detail.\n\n#carnation\n#roses\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-661","sale_price":"0.00000000","min_variant_price":"129.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-21,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-10 10:47:15","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/06f37a0772281ac8656091de2b778277.webp"],"detail_url":"\/product-detail\/mom-soft-embrace-mf03\/41538613-23fb-40d0-b025-4dbc8825b876"},{"id":5892,"pid":"79c2cdca-7883-48fc-a82e-6851f296fa1c","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Mom Gentle Love (MF02)","description":"[Mom Gentle Love]\n\nBlooms: Roses, Carnations\n\nA soft and elegant bouquet designed to express warmth and appreciation, Gentle Bloom features a harmonious mix of roses, carnations, and delicate seasonal blooms, accented with charming chamomile daisies. Available in sweet blush pink or graceful purple tones, this arrangement carries a calm, loving feel \u2014 perfect for celebrating a mother\u2019s gentle strength and unconditional care.\n\n#carnation\n#roses\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-660","sale_price":"0.00000000","min_variant_price":"109.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Vending Machine","status":"PUBLISHED","available_stock":-24,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-10 10:58:28","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/2c2376d1c7c6ce22c2102adc85805337.webp"],"detail_url":"\/product-detail\/mom-gentle-love-mf02\/79c2cdca-7883-48fc-a82e-6851f296fa1c"},{"id":5890,"pid":"48b8bb8f-ddb6-4dd6-a198-0338981e6c70","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Mom Pure Love (MF01)","description":"[Mom Pure Love]\n\nBlooms: Carnation, Phalaenopsis Orchid\n\nA heartfelt bouquet of carnations paired with a graceful orchid, specially designed to honour a mother\u2019s unconditional love. Available in soft blush pink for a gentle, caring touch or rich red for a bold expression of appreciation, Mother\u2019s Love is a meaningful gift that beautifully says thank you to the most important woman in your life.\n\n#carnation\n#orchid\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-659","sale_price":"0.00000000","min_variant_price":"129.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-7,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/453b4f72121fe788ecb223f810da905d.webp"],"detail_url":"\/product-detail\/mom-pure-love-mf01\/48b8bb8f-ddb6-4dd6-a198-0338981e6c70"},{"id":5888,"pid":"ad06bba8-f7dd-4fb0-9e3a-d0846ac0ef6f","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"My Precious Elegance (MS4)","description":"[My Precious Elegance ]\n\nBlooms: Carnation, Daisy, Roses, RM90 cash folded design\n\nA beautifully curated keepsake box that blends soft pink blooms, delicate daisies, and warm fairy lights into a glowing display of love. Adorned with a graceful silhouette and gentle ribbons, Mother\u2019s Treasure feels like a little box of appreciation \u2014 elegant, heartfelt, and meant to be cherished long after the day is over.\n\n#carnation\n#moneyflower\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-658","sale_price":"0.00000000","min_variant_price":"259.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-2,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/5b40649705cb5095ec6bffaa60cc7790.webp"],"detail_url":"\/product-detail\/my-precious-elegance-ms4\/ad06bba8-f7dd-4fb0-9e3a-d0846ac0ef6f"},{"id":5886,"pid":"2adb57a4-6300-4e3d-9bd2-941badf69da0","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Mommy Treasures (MS3)","description":"[Mommy Treasures]\n\nBlooms: Carnation, Daisy, RM30 cash folded design\n\nA beautifully curated keepsake box that blends soft pink blooms, delicate daisies, and warm fairy lights into a glowing display of love. Adorned with a graceful silhouette and gentle ribbons, Mother\u2019s Treasure feels like a little box of appreciation \u2014 elegant, heartfelt, and meant to be cherished long after the day is over.\n\n#carnation\n#moneyflower\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-657","sale_price":"0.00000000","min_variant_price":"159.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-10,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-08 08:53:54","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/1e293bcf4dc227ac3fcf1c238f0ed9c4.webp"],"detail_url":"\/product-detail\/mommy-treasures-ms3\/2adb57a4-6300-4e3d-9bd2-941badf69da0"},{"id":5884,"pid":"69a6538f-31f7-4cbb-8810-4fe26c7abb05","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Sweet Grace (MS2)","description":"[Sweet Grace]\n\nBlooms: Carnation\n\nA charming bouquet that blends soft carnations, elegant roses, and cheerful daisies in gentle pastel tones, wrapped beautifully with a delicate ribbon. Sweet Grace captures the warmth, kindness, and quiet strength of a mother \u2014 simple, graceful, and filled with heartfelt love, making it a perfect gift to show appreciation on her special day.\n\n#carnation\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-656","sale_price":"0.00000000","min_variant_price":"39.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-7,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-07 16:28:05","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/aeccfb2ef2201ba7a029eee182983592.webp"],"detail_url":"\/product-detail\/sweet-grace-ms2\/69a6538f-31f7-4cbb-8810-4fe26c7abb05"},{"id":5882,"pid":"d956b4a9-f37a-4bd7-bcf6-f160369dd26a","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Wonderful Woman (MS1)","description":"[Wonderful Woman]\n\nBlooms: Pink Carnation, Daisies\n\nA gentle and heartfelt bouquet designed to celebrate the strength and warmth of every mother. This arrangement features soft pink and blush carnations \u2014 a timeless symbol of a mother\u2019s enduring love \u2014 paired with delicate daisies for purity and joy, and elegant blooms that bring a touch of grace and calm.\n\nWrapped in soft pastel tones and finished with a graceful ribbon, Wonderful Woman is simple, sweet, and full of meaning \u2014 just like her. Every detail speaks of appreciation, warmth, and quiet strength.\n\nA beautiful way to say:\n\u201cThank you for everything.\u201d\n\n#carnation\n#daisy\n#mothersday\n#handbouquet","product_type":"product","sku":"GF02-655","sale_price":"0.00000000","min_variant_price":"109.00000000","ignore_stock_count":1,"category_id":["2f7c86c4-8543-4f03-9062-af3f87c46c7b","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Mother\u0027s Day","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-2,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/2fdc89e12c2201f89fe2f58c117481f4.webp"],"detail_url":"\/product-detail\/wonderful-woman-ms1\/d956b4a9-f37a-4bd7-bcf6-f160369dd26a"},{"id":5880,"pid":"cba08fb2-b45b-4863-b3f2-b10261ae3faf","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Soup Flower VS7","description":"Item: Soap Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of soap flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#soapflower\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-654","sale_price":"0.00000000","min_variant_price":"129.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-6,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-10 12:57:51","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/b1396afe43d2365b2a6421948fd2316d.webp"],"detail_url":"\/product-detail\/velentine-s-soup-flower-vs7\/cba08fb2-b45b-4863-b3f2-b10261ae3faf"},{"id":5878,"pid":"0c555444-b0f2-4c3c-9a45-f554b77406f4","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Soup Flower VS6","description":"Item: Soap Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of soap flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#soapflower\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-653","sale_price":"0.00000000","min_variant_price":"19.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-4,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/03295c4b1c01e6be99066c21ed824e7d.webp"],"detail_url":"\/product-detail\/velentine-s-soup-flower-vs6\/0c555444-b0f2-4c3c-9a45-f554b77406f4"},{"id":5876,"pid":"cfe19ae3-81af-46a0-8899-8a92bfc88e3f","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Soup Flower VS5","description":"Item: Soap Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of soap flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#soapflower\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-652","sale_price":"0.00000000","min_variant_price":"129.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-3,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/b156b4722675874a9fe2cb703a7190f0.webp"],"detail_url":"\/product-detail\/velentine-s-soup-flower-vs5\/cfe19ae3-81af-46a0-8899-8a92bfc88e3f"},{"id":5874,"pid":"2b51f87e-8406-4473-970d-7418f19b1d8e","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Soup Flower VS4","description":"Item: Soap Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of soap flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#soapflower\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-651","sale_price":"0.00000000","min_variant_price":"129.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/756fd37365d9605cd0b12bbe9817d3d2.webp"],"detail_url":"\/product-detail\/velentine-s-soup-flower-vs4\/2b51f87e-8406-4473-970d-7418f19b1d8e"},{"id":5872,"pid":"28c98a99-bb56-437b-9155-4c8992b2dfc4","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Soup Flower VS3","description":"Item: Soap Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of soap flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#soapflower\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-650","sale_price":"0.00000000","min_variant_price":"99.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/6da19fddef6ce9f2d276bf64e1c8dfcb.webp"],"detail_url":"\/product-detail\/velentine-s-soup-flower-vs3\/28c98a99-bb56-437b-9155-4c8992b2dfc4"},{"id":5870,"pid":"24547525-efd6-41bb-8216-861b5edbd186","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Soup Flower VS2","description":"Item: Soap Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of soap flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#soapflower\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-649","sale_price":"0.00000000","min_variant_price":"129.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-7,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-10 12:44:53","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/af5908ab718a9761ae6b8011ba75b938.webp"],"detail_url":"\/product-detail\/velentine-s-soup-flower-vs2\/24547525-efd6-41bb-8216-861b5edbd186"},{"id":5868,"pid":"23585c78-641f-42a6-a9cb-c8f34d16fdd1","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Soup Flower VS1","description":"Item: Soap Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of soap flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#soapflower\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-648","sale_price":"0.00000000","min_variant_price":"99.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/0a169dcf13b0d4cbf7c53016c08967e7.webp"],"detail_url":"\/product-detail\/velentine-s-soup-flower-vs1\/23585c78-641f-42a6-a9cb-c8f34d16fdd1"},{"id":5866,"pid":"f7e7f2e9-31f8-4dba-8c09-6a6f587b01a6","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Fresh Flower VF6","description":"Item: Mixed Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of mixed romantic flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#rose\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-647","sale_price":"0.00000000","min_variant_price":"189.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/71c9a0900032a23dcb07220aa83dd10f.webp"],"detail_url":"\/product-detail\/velentine-s-fresh-flower-vf6\/f7e7f2e9-31f8-4dba-8c09-6a6f587b01a6"},{"id":5864,"pid":"f08a153d-4fa3-418e-b15b-0d7b5c7da7ee","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Fresh Flower VF5","description":"Item: Mixed big \u0026 small roses, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of mixed romantic flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#rose\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-646","sale_price":"0.00000000","min_variant_price":"209.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/10cd8542d2ba78d9a41990136760758f.webp"],"detail_url":"\/product-detail\/velentine-s-fresh-flower-vf5\/f08a153d-4fa3-418e-b15b-0d7b5c7da7ee"},{"id":5862,"pid":"8e9b9495-d195-4191-8947-d2f10483a00c","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Fresh Flower VF4","description":"Item: Mixed Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of mixed romantic flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#rose\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-645","sale_price":"0.00000000","min_variant_price":"209.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/391d99c964769859a5b53e507d39fc41.webp"],"detail_url":"\/product-detail\/velentine-s-fresh-flower-vf4\/8e9b9495-d195-4191-8947-d2f10483a00c"},{"id":5860,"pid":"52f91975-558e-46ca-a977-284cf6ebfd7e","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Fresh Flower VF3","description":"Item: Mixed Romantic Flowers, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of mixed romantic flowers, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#rose\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-644","sale_price":"0.00000000","min_variant_price":"219.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/14251a6712ede2361f9ef6a1ca8bf095.webp"],"detail_url":"\/product-detail\/velentine-s-fresh-flower-vf3\/52f91975-558e-46ca-a977-284cf6ebfd7e"},{"id":5858,"pid":"1460d156-d584-458b-a6cb-d071e56a8bb4","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Fresh Flower VF2","description":"Item: 9 Roses, Decorative\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of 9 Roses, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#rose\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-643","sale_price":"0.00000000","min_variant_price":"169.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/67a9c7f6b8ccd160f1c423bec7bc1d43.webp"],"detail_url":"\/product-detail\/velentine-s-fresh-flower-vf2\/1460d156-d584-458b-a6cb-d071e56a8bb4"},{"id":5854,"pid":"943c6e38-203b-45f5-8a39-5613287856e0","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Velentine\u0027s Fresh Flower VF1","description":"Item: 12 Roses\nTraits: Affection, Admiration, Grace\n\nA charming bouquet of 12 Roses, symbolizing admiration and appreciation, perfect for expressing heartfelt emotions.\n\n#rose\n#handbouquet\n#romanticflower\n#proposal\n#valentines\n#valentines2026","product_type":"product","sku":"GF02-641","sale_price":"0.00000000","min_variant_price":"159.00000000","ignore_stock_count":1,"category_id":["22609a4b-6695-42d3-be37-df36273e4847","e027a3aa-6932-4966-9a36-ed470a45ddd9","7a108d6e-a4cd-4b74-a72a-04ea154fc306"],"category_name":["Valentine\u0027s 2026 (Pre-order)","by Occasion \u0026 Type","Romantic Flower"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/c0640b6ec4bd30c33dd9fc9c842636f5.webp"],"detail_url":"\/product-detail\/velentine-s-fresh-flower-vf1\/943c6e38-203b-45f5-8a39-5613287856e0"},{"id":5852,"pid":"e24002d6-cba5-4478-9709-acdd43933fa1","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Orchid Philanopsis Arrangement (Medium)","description":"Item: orchid, cny decorative items\n\n#orchid\n#chinesenewyear\n#cnyflower\n#cnyflower","product_type":"product","sku":"GF02-640","sale_price":"0.00000000","min_variant_price":"298.00000000","ignore_stock_count":1,"category_id":["f334accf-1c9f-4116-901c-60219f0b798a","79d16624-758b-4d98-8394-14f0818b0cd2","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Basket Flower","Chinese New Year 2026","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-10 13:37:17","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/4e3a75bd705e3e4e5e7f5e4976d36387.webp"],"detail_url":"\/product-detail\/orchid-philanopsis-arrangement-medium\/e24002d6-cba5-4478-9709-acdd43933fa1"},{"id":5850,"pid":"1a3f5a20-f6f2-4d17-96d6-0a8338befbb6","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Orchid Philanopsis Arrangement (Small)","description":"Item: orchid, cny decorative items\n\n#orchid\n#chinesenewyear\n#cnyflower\n#cnyflower","product_type":"product","sku":"GF02-639","sale_price":"0.00000000","min_variant_price":"198.00000000","ignore_stock_count":1,"category_id":["f334accf-1c9f-4116-901c-60219f0b798a","79d16624-758b-4d98-8394-14f0818b0cd2","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Basket Flower","Chinese New Year 2026","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":0,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/93d56306befc879c93aa19908e0be76d.webp"],"detail_url":"\/product-detail\/orchid-philanopsis-arrangement-small\/1a3f5a20-f6f2-4d17-96d6-0a8338befbb6"},{"id":5848,"pid":"c94c0aa9-c5c9-4198-9977-085a5e485faa","vendor_id":"e8774197-1864-441e-8dfd-4a3c51f72baa","name":"Orchid Philanopsis Arrangement (Big)","description":"Item: orchid, cny decorative items\n\n#orchid\n#chinesenewyear\n#cnyflower\n#cnyflower","product_type":"product","sku":"GF02-638","sale_price":"0.00000000","min_variant_price":"588.00000000","ignore_stock_count":1,"category_id":["f334accf-1c9f-4116-901c-60219f0b798a","79d16624-758b-4d98-8394-14f0818b0cd2","e027a3aa-6932-4966-9a36-ed470a45ddd9"],"category_name":["Basket Flower","Chinese New Year 2026","by Occasion \u0026 Type"],"best_before_day":"0","reminder_day":"0","share_link":"","brand":"","certification":[],"note":"","delivery_method":"Flower","status":"PUBLISHED","available_stock":-1,"created_ts":"2026-06-19 17:25:31","updated_ts":"2026-07-06 20:22:18","image":["https:\/\/365production.sgp1.cdn.digitaloceanspaces.com\/1000001\/69c2f1e9c6f98a3ecd2ff2c885942d9a.webp"],"detail_url":"\/product-detail\/orchid-philanopsis-arrangement-big\/c94c0aa9-c5c9-4198-9977-085a5e485faa"}];
        var paginationMeta = {"totalRecord":626,"totalPage":27,"pageNumber":1,"numRecord":24};
        // Active search term (from ?q=) — preserved across filter/pagination AJAX. A NEW search
        // re-submits the navbar GET form (full reload), so this only changes on reload.
        var currentSearch  = "";

        // No-results empty-state copy (i18n). All three variants flow through t('page.products.empty.*')
        // so en / zh-cn / ms stay fully translated. {q} in the search body is inserted via .text() (never .html()).
        var emptyTxt = {
            searchHeading:   "\u6ca1\u6709\u627e\u5230\u5339\u914d\u7684\u82b1\u827a",
            searchBody:      "\u6211\u4eec\u627e\u4e0d\u5230\u4e0e\u201c{q}\u201d\u76f8\u5173\u7684\u5185\u5bb9\u3002\u8bd5\u7740\u6e05\u9664\u641c\u7d22\u4ee5\u91cd\u65b0\u67e5\u770b\u6b64\u7cfb\u5217\uff0c\u6216\u6d4f\u89c8\u6211\u4eec\u7684\u5168\u90e8\u82b1\u827a\u2014\u2014\u6362\u4e2a\u82b1\u6b3e\u3001\u573a\u5408\u6216\u62fc\u5199\uff0c\u4e5f\u8bb8\u4f1a\u6709\u60ca\u559c\u3002",
            searchPrimary:   "\u6e05\u9664\u641c\u7d22",
            searchSecondary: "\u6d4f\u89c8\u6240\u6709\u82b1\u827a",
            catHeading:      "\u8fd9\u4e2a\u89d2\u843d\u6b63\u5728\u4f11\u606f",
            catBody:         "\u76ee\u524d\u8fd9\u4e9b\u7b5b\u9009\u6761\u4ef6\u4e0b\u8fd8\u6ca1\u6709\u82b1\u827a\u3002\u653e\u5bbd\u4e00\u4e9b\u6761\u4ef6\uff0c\u6216\u6d4f\u89c8\u6211\u4eec\u6240\u6709\u7efd\u653e\u7684\u82b1\u827a\u3002",
            catPrimary:      "\u6e05\u9664\u7b5b\u9009",
            catSecondary:    "\u6d4f\u89c8\u6240\u6709\u82b1\u827a",
            genHeading:      "\u6682\u65f6\u8fd8\u6ca1\u6709\u7efd\u653e\u7684\u82b1\u827a",
            genBody:         "\u6211\u4eec\u7684\u82b1\u67b6\u6b63\u5728\u91cd\u65b0\u5e03\u7f6e\u3002\u8bf7\u7a0d\u540e\u518d\u6765\u2014\u2014\u65b0\u7684\u82b1\u827a\u6b63\u5728\u8def\u4e0a\u3002",
            genPrimary:      "\u8fd4\u56de\u9996\u9875"        };

        var tableInstance = null;

        // Collapsible filter sections (desktop carets). Presentational ONLY — toggles the
        // section body's visibility + rotates the caret; never touches the .gs-cat-cb /
        // .gs-price-cb inputs or the readFilters() contract.
        function toggleFilterSection(heading) {
            var body = heading.nextElementSibling;   // the .fs-body wrapper
            if (!body) return;
            body.classList.toggle('hidden');
            var caret = heading.querySelector('.fs-caret');
            if (caret) caret.classList.toggle('rotate-180');
        }

        // Expand/collapse a category's sub-category list (presentational; show/hide only —
        // the sub <input.gs-cat-cb> checkboxes inside still feed readFilters() unchanged).
        function toggleSubcat(btn) {
            var ul = btn.parentElement.nextElementSibling;   // the sibling <ul data-parent>
            if (!ul || ul.tagName !== 'UL') return;
            ul.classList.toggle('hidden');
            btn.classList.toggle('rotate-90');               // chevron-right → points down when open
        }

        // Read the single selected category + price bucket from the sidebar.
        // Day-1: category + price are single-select (getProductV5.categoryId is one FIND_IN_SET value;
        // priceMin/priceMax are one range). Checkboxes look multi but behave single (enforced below).
        function readFilters() {
            var cat = document.querySelector('.gs-cat-cb:checked');
            var price = document.querySelector('.gs-price-cb:checked');
            return {
                categoryId: cat ? cat.value : '',
                priceMin:   price ? (price.getAttribute('data-min') || '') : '',
                priceMax:   price ? (price.getAttribute('data-max') || '') : ''
            };
        }

        function applyResult(table, data) {
            var listing = (data && data.listing) || [];
            table.data(listing);
            table.state.totalRecords = (data && data.totalRecord) || 0;
            table.state.currentPage  = (data && data.pageNumber)  || 1;
            table.state.pageSize      = 24;
            if (data && data.totalPage) table.state.totalPages = data.totalPage;
            table.renderPagination();
            var _total = (data && data.totalRecord) || 0;
            updateHeading(_total);
            syncEmptyState(_total);
        }

        // Keep the heading + subtitle in sync with the live (AJAX) result so search / category /
        // default states stay consistent (the PHP render only covers the initial page load).
        function updateHeading(total) {
            var $h = $('#listingHeading'), $s = $('#listingSubtitle');
            if (!$h.length) return;
            var n = (typeof total === 'number' && total >= 0) ? total : 0;
            var prodTxtAllProducts = "\u6240\u6709\u4ea7\u54c1";
            var prodTxtSubtitle    = "\u6d4f\u89c8\u6211\u4eec\u7684\u5b8c\u6574\u76ee\u5f55";
            var prodTxtResultsFor  = "\u201c{q}\u201d \u7684\u641c\u7d22\u7ed3\u679c";
            var prodTxtFound       = "\u627e\u5230 {n} {unit}";
            var prodTxtInCategory  = "\u6b64\u5206\u7c7b\u4e0b\u6709 {n} {unit}";
            var unit = (n === 1) ? "\u4ef6\u5546\u54c1" : "\u4ef6\u5546\u54c1";
            var catName = '';
            var $cat = $('.gs-cat-cb:checked');
            if ($cat.length) catName = $.trim($cat.first().closest('label').find('span').first().text());
            if (currentSearch) {
                $h.text(prodTxtResultsFor.replace('{q}', currentSearch));
                $s.text(prodTxtFound.replace('{n}', n).replace('{unit}', unit));
            } else if (catName) {
                $h.text(catName);
                $s.text(prodTxtInCategory.replace('{n}', n).replace('{unit}', unit));
            } else {
                $h.text(prodTxtAllProducts);
                $s.text(prodTxtSubtitle);
            }
        }

        // Variant precedence: SEARCH wins (a query is the most specific intent; clearing it keeps
        // the active category), then any active filter, else GENERIC. Same signals readFilters()/
        // updateHeading() trust. Swap the first two ifs to make FILTER win when both are active.
        function pickEmptyVariant() {
            if (currentSearch && currentSearch.length) return 'search';
            if (document.querySelector('.gs-cat-cb:checked') || document.querySelector('.gs-price-cb:checked')) return 'category';
            return 'generic';
        }

        // Toggle the no-results state against the live total. total>0 → grid shown, state hidden.
        // total===0 → hide the grid (incl. ResponsiveTable's own bare "No Result Found"), show the
        // branded state with variant-appropriate icon/copy + CTAs wired to existing recovery hooks.
        function syncEmptyState(total) {
            var $es = $('#productsEmptyState'), $grid = $('#listingTable');
            if (total > 0) {
                $es.addClass('hidden');
                $grid.removeClass('hidden');
                return;
            }
            $grid.addClass('hidden');

            var icon  = document.getElementById('emptyStateIcon');
            var pIcon = document.getElementById('emptyStatePrimaryIcon');
            var $head = $('#emptyStateHeading'), $body = $('#emptyStateBody');
            var $pri  = $('#emptyStatePrimaryCta'), $priL = $('#emptyStatePrimaryLabel');
            var $sec  = $('#emptyStateSecondaryCta'), $secL = $('#emptyStateSecondaryLabel');
            var v = pickEmptyVariant();

            // Namespaced unbind so re-entry never stacks handlers (and never nukes unrelated ones).
            $pri.off('click.es'); $sec.off('click.es');

            if (v === 'search') {
                icon.textContent = 'search_off';
                pIcon.textContent = 'search';
                $head.text(emptyTxt.searchHeading);
                $body.text(emptyTxt.searchBody.replace('{q}', currentSearch));   // {q} as TEXT — no markup injection
                // DOMINANT = clear the dead search (keeps any category); browse-all is subordinate.
                $priL.text(emptyTxt.searchPrimary);
                $pri.on('click.es', function () { document.dispatchEvent(new CustomEvent('gs:search-cleared')); });
                $secL.text(emptyTxt.searchSecondary);
                $sec.removeClass('hidden').on('click.es', function () { window.location.href = '/products'; });
            } else if (v === 'category') {
                icon.textContent = 'filter_list_off';
                pIcon.textContent = 'filter_list_off';
                $head.text(emptyTxt.catHeading);
                $body.text(emptyTxt.catBody);
                $priL.text(emptyTxt.catPrimary);
                $pri.on('click.es', function () { $('#clearFilters').trigger('click'); });   // full reset + refetch
                $secL.text(emptyTxt.catSecondary);
                $sec.removeClass('hidden').on('click.es', function () { window.location.href = '/products'; });
            } else {
                icon.textContent = 'local_florist';
                pIcon.textContent = 'storefront';
                $head.text(emptyTxt.genHeading);
                $body.text(emptyTxt.genBody);
                $priL.text(emptyTxt.genPrimary);
                $pri.on('click.es', function () { window.location.href = '/'; });   // homepage
                $sec.addClass('hidden').off('click.es');                            // generic: single primary only
            }
            $es.removeClass('hidden');
        }

        function fetchProducts(page) {
            if (!tableInstance) return;
            var f = readFilters();
            var formData = {
                predefined15: "gJYK0EEgHvCyWbOz+D8SfOVFFXf5bFokMYte6fVyppe9wYKV7TtwLnAILx3fwA4s4egicAuZp+1nUwhl2CvpRRm4poqFDzQ+retvk8zRYwv6NktKX2Asw4QrMQyNa5U0uK+uSZu733s0xgGr9rqp1PxdB2fHf6F\/W0n32ZUvdvrn552XCBVT+0joqMg823w9e80niQIyj94luqlCjqoOVIn4cvewY8su9z3FI2jQobfZB7XbU+E2TcIzXnP8iLslFWEF5qjxZ4KSyk1Veiw7s13\/kV+vMlVEjQLGeikIB5PNzAPwx9bZr4ut\/cQcPvTadxv+y9A41Y6zb2iIfe3krA==",
                predefined16: "UZHCvE\/m1Q7Tu7YZQ6+gW1DfUs3gDWQ5Oa3Dzvlq50+yBJgfvtekddjVeExpnr4LDwnaAulEWOv8soRmKH9ozF8dkOOCO8npDIxzklQJfDuc62K2uwazVOUEheTrUjCvNise8y84Q441p7\/xH3Vo6EapzrGU65OYTpY7YshgdKym\/1RhrZbBjVk5+WQtqJI6LL0JgKbcgcmzAOgfeig2RSjsEe+LsxCACn1N74PnYgBhPmXbtq7CyJacDaaqGtZ\/r4QxJQSWDerE80oj0TTNM\/Arwrrthdlfcm1aLav+a6v5EIE9Snvoh\/pmWFPoQMA0cEOhBu\/LF6Dr9xPSQRkcIQ==",
                // order must match predefined16 key list: pageNumber, categoryId, priceMin, priceMax, search
                val16: [ String(page || 1), f.categoryId, f.priceMin, f.priceMax, currentSearch ]
            };
            var table = tableInstance;
            ajaxSend(url, formData, method, function (data) {
                applyResult(table, data);
            }, debug, bypassBlocking, bypassLoading, 0);
        }

        // Product card — uses member theme tokens (no hex). Renders only fields the backend has;
        // brand shown if present. was/voucher/rating/sold are intentionally omitted (no backend source).
        // STRUCTURE: clones <template id="productCardTpl"> and fills it via DOM, then returns the
        // serialized HTML string (ResponsiveTable v3.0.1 interpolates the return as a string in
        // renderCardItem — a DOM node would stringify to "[object ...]"). Output is byte-identical to
        // the former string build: data-bind hooks sit FIRST on each node and are stripped after fill,
        // so serialized attribute order matches; textContent + src/href property assignment escape
        // safely without api.escapeHtml; brand-absent removes the node (original emitted none).
        function renderProductCard(row, rowIndex, api) {
            var pid   = row.pid || '';
            var name  = row.name || 'Untitled';
            // Pretty PDP URL built server-side in getProductListing() (row.detail_url); fall back
            // to the legacy query form if absent.
            var detailUrl = row.detail_url || ('/product-detail.php?id=' + encodeURIComponent(pid));
            var img   = Array.isArray(row.image) ? (row.image[0] || '') : (row.image || '');
            if (!img) img = DEFAULT_PRODUCT_IMAGE;
            var price = parseFloat(row.min_variant_price || 0) || 0;
            var brand = row.brand || '';

            var card = document.getElementById('productCardTpl').content.firstElementChild.cloneNode(true);

            // Drop the template's inter-tag whitespace so the serialized card matches the original
            // zero-whitespace string build exactly (DOM + pixel parity). Done before fill so a
            // text value is never mistaken for inter-tag whitespace.
            var tw = document.createTreeWalker(card, NodeFilter.SHOW_TEXT, null);
            var blank = [];
            while (tw.nextNode()) { if (!/\S/.test(tw.currentNode.nodeValue)) blank.push(tw.currentNode); }
            blank.forEach(function (n) { n.parentNode.removeChild(n); });

            var imgEl   = card.querySelector('[data-bind="img"]');
            var nameEl  = card.querySelector('[data-bind="name"]');
            var priceEl = card.querySelector('[data-bind="price"]');
            var brandEl = card.querySelector('[data-bind="brand"]');

            card.href           = detailUrl;   // href attribute set literally (property assignment is safe)
            imgEl.src           = img;
            imgEl.alt           = name;
            nameEl.textContent  = name;        // textContent escapes on serialization — no api.escapeHtml needed
            priceEl.textContent = 'RM' + Number(price).toLocaleString('en-MY', { minimumFractionDigits: Number.isInteger(Number(price)) ? 0 : 2, maximumFractionDigits: 2 });

            if (brand) {
                brandEl.textContent = brand;
                brandEl.removeAttribute('data-bind');
            } else {
                brandEl.remove();              // brand-absent: original emitted no node — remove to stay DOM-identical
            }

            card.removeAttribute('data-bind');
            imgEl.removeAttribute('data-bind');
            nameEl.removeAttribute('data-bind');
            priceEl.removeAttribute('data-bind');

            return card.outerHTML;
        }

        function initTable() {
            if (typeof ResponsiveTable === 'undefined') return;
            var container = document.querySelector('#listingTable');
            if (!container) return;

            var rows = Array.isArray(listingData) ? listingData : [];

            tableInstance = new ResponsiveTable(container, {
                renderMode: 'tailwind',
                iconSet: 'material-symbols',
                title: '',
                view: { mode: 'card' },
                card: { renderer: renderProductCard },
                data: rows,
                columns: [
                    { field: 'name', title: 'Product', priority: 1, type: 'id', sortable: false }
                ],
                classes: {
                    cardGrid: 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-[18px] gap-y-9',
                    cardItem: ''
                },
                features: {
                    sorting: false,
                    searching: { enabled: false },
                    filtering: { enabled: false },
                    pagination: {
                        enabled: true,
                        serverSide: true,
                        pageSize: 24,
                        totalRecords: paginationMeta.totalRecord || rows.length || 0,
                        totalPages:   paginationMeta.totalPage   || 1,
                        currentPage:  paginationMeta.pageNumber  || 1
                    },
                    selection: false,
                    draggable: false
                },
                pagingCallback: function (page) {
                    fetchProducts(page);
                }
            });
        }

        $(document).ready(function () {
            initTable();
            // Seed the empty-state on the initial GET paint (a zero-result landing — e.g. ?q= no-match —
            // shows the state with no AJAX round-trip; ResponsiveTable's bare message is hidden behind it).
            syncEmptyState(paginationMeta.totalRecord || (Array.isArray(listingData) ? listingData.length : 0));

            // Mobile: collapse the filter dropdown after a selection is applied. Adding `hidden` is a
            // no-op on desktop (the panel carries lg:block, which wins at ≥lg), so this is mobile-only
            // in effect. Replaces the old "Show results" button — the filter applies + closes on click.
            function closeMobileFilters() {
                $('#filterPanel').addClass('hidden');
                currentFilterGroup = null;
            }

            // Mobile chips reflect the CURRENT selection (the dropdown closes on pick, so the chip is
            // the only remaining cue of what's active): Category chip shows the chosen category name,
            // Price chip the chosen bucket; both revert to their default label + neutral style when
            // nothing is selected. Active colours are applied at RUNTIME via .css() with the brand
            // token (the default bg-white/secondary/border classes stay on the element and show through
            // once the inline overrides are cleared) — no dependency on Tailwind emitting a brand-bg
            // utility class that isn't otherwise used on the page.
            var chipDefaults = {
                category: "\u5206\u7c7b",
                price:    "\u4ef7\u683c"            };
            function setChip(sel, text, active) {
                var $chip = $(sel);
                $chip.find('[data-chip-label]').text(text);
                $chip.css(active
                    ? { backgroundColor: 'var(--color-brand-primary)', color: '#ffffff', borderColor: 'var(--color-brand-primary)' }
                    : { backgroundColor: '', color: '', borderColor: '' });
            }
            function updateFilterChips() {
                var $cat = $('.gs-cat-cb:checked');
                var $price = $('.gs-price-cb:checked');
                var catText = $cat.length ? ($cat.closest('label').find('span').first().text().trim() || chipDefaults.category) : chipDefaults.category;
                var priceText = $price.length ? $price.closest('label').text().trim() : chipDefaults.price;
                setChip('[data-filter-open="category"]', catText, $cat.length > 0);
                setChip('[data-filter-open="price"]',    priceText, $price.length > 0);
            }

            // Mirror the active category into the URL as ?category=<pid> (same param the homepage banner
            // deep-links with), so an on-page category pick is bookmarkable / shareable / reload-safe.
            // Preserves any other query param (e.g. ?q=); drops ?category when nothing is selected.
            function syncCategoryUrl() {
                if (!(window.history && history.replaceState)) return;
                var cat = document.querySelector('.gs-cat-cb:checked');
                var params = new URLSearchParams(window.location.search);
                if (cat && cat.value) { params.set('category', cat.value); }
                else { params.delete('category'); }
                var qs = params.toString();
                history.replaceState(null, '', window.location.pathname + (qs ? '?' + qs : ''));
            }

            // Category + price are single-select day-1 (backend takes one categoryId / one price range).
            // Selecting one unchecks the rest in its group, refetches from page 1, then closes the
            // mobile dropdown (desktop unaffected).
            function bindSingleSelect(selector) {
                $(document).on('change', selector, function () {
                    if (this.checked) {
                        $(selector).not(this).prop('checked', false);
                    }
                    fetchProducts(1);
                    updateFilterChips();
                    syncCategoryUrl();
                    closeMobileFilters();
                });
            }
            bindSingleSelect('.gs-cat-cb');
            bindSingleSelect('.gs-price-cb');

            // Deep-link (?category=<pid>, e.g. from a homepage banner): the matching checkbox is
            // pre-checked server-side (highlighted via has-[:checked]), but it may sit inside a
            // collapsed sub-group. Expand its ancestor groups so the highlighted selection is visible
            // on load — mirrors toggleSubcat's open state (ul un-hidden + chevron rotate-90).
            (function expandToCheckedCategory() {
                var checked = document.querySelector('.gs-cat-cb:checked');
                if (!checked) return;
                var ul = checked.closest('ul[data-parent]');
                while (ul) {
                    ul.classList.remove('hidden');
                    var row = ul.previousElementSibling;                 // the .flex row owning the chevron
                    var btn = row ? row.querySelector('button') : null;
                    if (btn) btn.classList.add('rotate-90');
                    ul = ul.parentElement ? ul.parentElement.closest('ul[data-parent]') : null;
                }
                var lbl = checked.closest('label');
                if (lbl && lbl.scrollIntoView) lbl.scrollIntoView({ block: 'nearest' });
            })();

            // Reflect any pre-selected (deep-linked) category in the mobile chip on load.
            updateFilterChips();

            // "All Product" heading → clear the category selection (show ALL products), then refetch.
            // Plain label (not a collapse toggle); clicking acts as the category "all / reset".
            $('#catAllHeading').on('click', function () {
                $('.gs-cat-cb').prop('checked', false);
                fetchProducts(1);
                updateFilterChips();
                syncCategoryUrl();
                closeMobileFilters();
            });

            // Clears the active search term: state var + navbar box + ?q= in the URL (so a reload
            // doesn't re-apply it). Does NOT touch category/price — only the ?q= param is dropped, so
            // an active ?category= (kept when the navbar ✕ clears just the search) survives.
            function clearSearchState() {
                currentSearch = '';
                var $q = $('form[role="search"] input[name="q"]');
                $q.val('');
                $q.trigger('input');   // updates the header ✕ visibility
                if (window.history && history.replaceState) {
                    var params = new URLSearchParams(window.location.search);
                    params.delete('q');
                    var qs = params.toString();
                    history.replaceState(null, '', window.location.pathname + (qs ? '?' + qs : ''));
                }
            }

            // Navbar ✕ → clear ONLY the search, keep category/price, refetch.
            document.addEventListener('gs:search-cleared', function () {
                clearSearchState();
                fetchProducts(1);
            });

            // "Clear all" → full reset: category + price + search.
            $('#clearFilters').on('click', function () {
                $('.gs-cat-cb, .gs-price-cb').prop('checked', false);
                clearSearchState();
                syncCategoryUrl();
                fetchProducts(1);
                updateFilterChips();
                closeMobileFilters();
            });

            // Mobile filter panel: a chip toggles it and scopes which section shows —
            // "all" (Filters) → both, "category" → category only, "price" → price only.
            // Tapping the SAME chip again collapses; a DIFFERENT chip switches the section.
            // Desktop is unaffected (sections + panel carry lg:block).
            var currentFilterGroup = null;   // null = panel collapsed (mobile)
            $('[data-filter-open]').on('click', function () {
                var group = $(this).attr('data-filter-open') || 'all';
                var $panel = $('#filterPanel');
                if (currentFilterGroup === group && !$panel.hasClass('hidden')) {
                    $panel.addClass('hidden');   // same chip while open → collapse
                    currentFilterGroup = null;
                    return;
                }
                $panel.removeClass('hidden');
                currentFilterGroup = group;
                $('[data-group="category"]').toggleClass('hidden', group === 'price');
                $('[data-group="price"]').toggleClass('hidden', group === 'category');
            });
        });
    </script>
</body>
<!--------------------------------------------------------Start of HTML block (end)-------------------------------------------------------->
</html>