@loafmarkets/ui 0.1.366 → 0.1.367

package/dist/index.mjs

@@ -28,7 +28,7 @@ var buttonVariants = cva(
         primary: "bg-teal-500 text-slate-950 hover:bg-teal-400 focus-visible:ring-teal-200",
         onboarding: "rounded-lg bg-[#F2D898] text-[#0A0C15] shadow-[0_20px_60px_rgba(242,216,152,0.35)] transition will-change-transform hover:-translate-y-0.5 hover:brightness-110 focus-visible:ring-[#F2D898]/50 focus-visible:ring-offset-[#0A0C15]",
         onboardingOutline: "rounded-lg border border-[#F2D898] bg-transparent text-white hover:bg-white/5 focus-visible:ring-[#F2D898]/50 focus-visible:ring-offset-[#0A0C15]",
-        accent: "bg-[var(--color-accent,#e6c87e)] text-black hover:bg-[var(--color-accent-hover,#f8d12f)] focus-visible:ring-[var(--color-accent,#e6c87e)]",
+        accent: "bg-[var(--color-accent,#e6c87e)] text-black hover:bg-[var(--color-accent-hover,#F2D898)] focus-visible:ring-[var(--color-accent,#e6c87e)]",
         accentOutline: "border border-[var(--color-accent,#e6c87e)] bg-transparent text-[var(--color-accent,#e6c87e)] hover:bg-[rgba(230,200,126,0.10)] focus-visible:ring-[var(--color-accent,#e6c87e)]",
         media: "border border-white/10 bg-transparent text-white/90 hover:bg-white/5 hover:border-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#e6c87e)] focus-visible:ring-[var(--color-accent,#e6c87e)]",
         outline: "border border-slate-800/20 bg-white text-slate-900 hover:border-slate-800/40 focus-visible:ring-slate-200",
@@ -782,7 +782,7 @@ function HousePositionSlider({
               }
             },
             placeholder: "Price",
-            className: "w-full rounded-[8px] border border-white/10 bg-black/30 px-4 py-3 pr-14 text-[0.95rem] text-white outline-none focus:border-[#f0b90b]"
+            className: "w-full rounded-[8px] border border-white/10 bg-black/30 px-4 py-3 pr-14 text-[0.95rem] text-white outline-none focus:border-[#E6C87E]"
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-[0.8rem] text-white/50", children: "USD" })
@@ -792,7 +792,7 @@ function HousePositionSlider({
           "Available: $",
           availableCash.toLocaleString()
         ] }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "text-[#f0b90b] hover:underline", children: "Add Funds" })
+        /* @__PURE__ */ jsx("button", { type: "button", className: "text-[#E6C87E] hover:underline", children: "Add Funds" })
       ] })
     ] })
   ] });
@@ -995,7 +995,7 @@ var styles = {
   addFundsButton: {
     background: "none",
     border: "none",
-    color: "#f0b90b",
+    color: "#E6C87E",
     fontSize: "0.75rem",
     cursor: "pointer",
     padding: 0
@@ -1811,7 +1811,8 @@ function DepthRow({
   amountPrecision,
   hasUserOrder,
   onPriceClick,
-  flashOnMount
+  flashOnMount,
+  fillHeight
 }) {
   const isAsk = side === "ask";
   const rowRef = React5.useRef(null);
@@ -1821,7 +1822,7 @@ function DepthRow({
     {
       ref: rowRef,
       className: "relative grid grid-cols-3 items-center gap-3 px-3 text-[0.8rem]",
-      style: { height: `${DEPTH_ROW_HEIGHT_PX}px`, cursor: onPriceClick ? "pointer" : void 0 },
+      style: fillHeight ? { flex: "1 1 0", minHeight: 0, cursor: onPriceClick ? "pointer" : void 0 } : { height: `${DEPTH_ROW_HEIGHT_PX}px`, cursor: onPriceClick ? "pointer" : void 0 },
       onClick: onPriceClick ? () => onPriceClick(price) : void 0,
       children: [
         /* @__PURE__ */ jsx(
@@ -2208,7 +2209,8 @@ function DesktopOrderbookLayout({
                 amountPrecision,
                 hasUserOrder: userAskPrices.has(l.price),
                 onPriceClick,
-                flashOnMount: newAskPrices.has(l.price)
+                flashOnMount: newAskPrices.has(l.price),
+                fillHeight
               },
               `ask-${l.price}`
             ))
@@ -2246,7 +2248,8 @@ function DesktopOrderbookLayout({
                 amountPrecision,
                 hasUserOrder: userBidPrices.has(l.price),
                 onPriceClick,
-                flashOnMount: newBidPrices.has(l.price)
+                flashOnMount: newBidPrices.has(l.price),
+                fillHeight
               },
               `bid-${l.price}`
             ))
@@ -2603,6 +2606,9 @@ var PropertyTour = React5.forwardRef(
               ref: videoRef,
               className: "absolute inset-0 h-full w-full object-cover object-center",
               controls,
+              controlsList: "nodownload noplaybackrate",
+              disablePictureInPicture: true,
+              onContextMenu: (e) => e.preventDefault(),
               loop,
               autoPlay,
               muted,
@@ -2658,7 +2664,7 @@ var categoryStyles = {
     label: "Market News",
     backgroundColor: "rgba(248, 209, 47, 0.15)",
     borderColor: "rgba(248, 209, 47, 0.45)",
-    color: "#f8d12f"
+    color: "#F2D898"
   }
 };
 var formatDate = (value) => {
@@ -2827,7 +2833,7 @@ function NewsArticleModal({ item, onClose }) {
                   gap: "0.4rem",
                   fontSize: "0.8rem",
                   fontWeight: 600,
-                  color: "var(--color-accent, #f0b90b)",
+                  color: "var(--color-accent, #E6C87E)",
                   textDecoration: "none",
                   transition: "opacity 0.15s"
                 },
@@ -2929,7 +2935,7 @@ var PropertyNewsUpdates = React5.forwardRef(
                 subheading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
               ] })
             ] }),
-            isHomeVariant && viewAllHref ? /* @__PURE__ */ jsxs("a", { href: viewAllHref, style: { color: "var(--color-accent, #f0b90b)", fontWeight: 500, fontSize: "0.75rem", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.25rem", height: "24px" }, children: [
+            isHomeVariant && viewAllHref ? /* @__PURE__ */ jsxs("a", { href: viewAllHref, style: { color: "var(--color-accent, #E6C87E)", fontWeight: 500, fontSize: "0.75rem", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.25rem", height: "24px" }, children: [
               viewAllLabel,
               /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
             ] }) : !isHomeVariant && !isPurchaseVariant ? connectionStatus === "connecting" ? /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center font-semibold uppercase", style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em", color: "#f97316" }, children: [
@@ -2948,7 +2954,7 @@ var PropertyNewsUpdates = React5.forwardRef(
               style: {
                 background: "transparent",
                 border: "none",
-                borderBottom: homeTab === tab ? "2px solid var(--color-accent, #f0b90b)" : "2px solid transparent",
+                borderBottom: homeTab === tab ? "2px solid var(--color-accent, #E6C87E)" : "2px solid transparent",
                 padding: "0 0 0.5rem 0",
                 marginBottom: "-1px",
                 fontSize: "0.75rem",
@@ -2989,7 +2995,7 @@ var PropertyNewsUpdates = React5.forwardRef(
                   purchase.id
                 );
               }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "3rem 0", gap: "0.75rem" }, children: [
-                /* @__PURE__ */ jsx("div", { style: { width: "28px", height: "28px", border: "3px solid rgba(255,255,255,0.1)", borderTopColor: "var(--color-accent, #f0b90b)", borderRadius: "50%", animation: "propertyNewsSpin 1s linear infinite" } }),
+                /* @__PURE__ */ jsx("div", { style: { width: "28px", height: "28px", border: "3px solid rgba(255,255,255,0.1)", borderTopColor: "var(--color-accent, #E6C87E)", borderRadius: "50%", animation: "propertyNewsSpin 1s linear infinite" } }),
                 /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.4)" }, children: "Awaiting offering..." })
               ] }) : isHomeVariant ? hasItems ? homePaginatedItems.map((item, index) => {
                 const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
@@ -3031,7 +3037,7 @@ var PropertyNewsUpdates = React5.forwardRef(
                         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: isMobile ? "0.35rem" : "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
                           /* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: isMobile ? "0.55rem" : "0.7rem" }, children: formatDateShort(item.date) }),
                           item.source && /* @__PURE__ */ jsx("span", { style: { padding: isMobile ? "0.08rem 0.35rem" : "0.1rem 0.4rem", borderRadius: "3px", fontSize: isMobile ? "0.52rem" : "0.62rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap" }, children: item.source }),
-                          /* @__PURE__ */ jsx("span", { style: { padding: isMobile ? "0.1rem 0.35rem" : "0.15rem 0.4rem", borderRadius: "2px", fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#f0b90b" }, children: isProperty ? "Property Update" : "Market News" }),
+                          /* @__PURE__ */ jsx("span", { style: { padding: isMobile ? "0.1rem 0.35rem" : "0.15rem 0.4rem", borderRadius: "2px", fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#E6C87E" }, children: isProperty ? "Property Update" : "Market News" }),
                           sentimentInfo && /* @__PURE__ */ jsxs("span", { style: { fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
                             sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
                             sentimentInfo.label
@@ -3995,7 +4001,7 @@ var YourOrders = React5.forwardRef(
                 ) : null
               ] }) : null
             ] }),
-            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500, color: "#D4AF37" }, children: formatCurrency2(value) }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500, color: "#E6C87E" }, children: formatCurrency2(value) }),
             /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.92)" }, children: holding }),
             showPropertyPercentColumn ? /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.8)" }, children: formatPercent(propertyPercent, 3) }) : null,
             /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.9)" }, children: formatCurrency2(avgPrice) }),
@@ -4114,7 +4120,7 @@ var YourOrders = React5.forwardRef(
                         left: 0,
                         right: 0,
                         height: "2px",
-                        background: "#f0b90b"
+                        background: "#E6C87E"
                       }
                     }
                   ) : null
@@ -4974,7 +4980,7 @@ var StatusBadge = styled9.div`
   align-items: center;
   gap: 0.5rem;
   background-color: ${({ $isLive }) => $isLive ? "rgba(20, 20, 20, 0.85)" : "rgba(240, 185, 11, 0.9)"};
-  color: ${({ $isLive }) => $isLive ? "#f0b90b" : "#000"};
+  color: ${({ $isLive }) => $isLive ? "#E6C87E" : "#000"};
   padding: 0.5rem 1rem;
   border-radius: 6px;
   font-weight: 600;
@@ -4987,7 +4993,7 @@ var PulsingDot = styled9.span`
   display: inline-block;
   width: 8px;
   height: 8px;
-  background-color: #f0b90b;
+  background-color: #E6C87E;
   border-radius: 50%;
   animation: heroStatusPulse 1.5s infinite;
 
@@ -5044,6 +5050,7 @@ var Header = ({
   onSettingsClick,
   showTradeTab = true,
   portfolioSummary,
+  fundsPending = false,
   transparentOnTop = false
 }) => {
   const [headerBgOpacity, setHeaderBgOpacity] = useState(transparentOnTop ? 0 : 1);
@@ -5068,6 +5075,27 @@ var Header = ({
       return next;
     });
   }, []);
+  const SIMULATE_FUNDS = false;
+  const [simFundsPending, setSimFundsPending] = useState(true);
+  useEffect(() => {
+    return;
+  }, [simFundsPending]);
+  const showFundsPending = (fundsPending || SIMULATE_FUNDS) && isAuthenticated && isPortfolioBarVisible;
+  const [fundsCountdown, setFundsCountdown] = useState(10);
+  useEffect(() => {
+    if (!showFundsPending) return;
+    setFundsCountdown(10);
+    const id = setInterval(() => {
+      setFundsCountdown((n) => {
+        if (n <= 1) {
+          clearInterval(id);
+          return 0;
+        }
+        return n - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [showFundsPending]);
   useEffect(() => {
     const handler = () => {
       if (LoginPopupComponent) {
@@ -5480,18 +5508,16 @@ var Header = ({
           ] })
         ] })
       ] }),
-      isMobileMenuOpen && /* @__PURE__ */ jsx(
-        MobileOnlyButton,
-        {
-          onClick: () => setIsMobileMenuOpen(false),
-          $isOpen: true,
-          style: { position: "fixed", right: "1rem", top: "4rem" },
-          "aria-label": "Close menu",
-          children: "\u2715"
-        }
-      ),
       isAuthenticated ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-        portfolioSummary && isPortfolioBarVisible && (() => {
+        showFundsPending && /* @__PURE__ */ jsxs(FundsPendingInline, { className: "loaf-funds-pending", children: [
+          /* @__PURE__ */ jsx(FundsPendingText, { children: "Your test funds will arrive soon\u2026" }),
+          fundsCountdown > 0 && /* @__PURE__ */ jsxs(FundsPendingCountdown, { children: [
+            "~",
+            fundsCountdown,
+            "s"
+          ] })
+        ] }),
+        !showFundsPending && portfolioSummary && isPortfolioBarVisible && (() => {
           const fmtInline = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
           const isPLPos = portfolioSummary.pnl >= 0;
           return /* @__PURE__ */ jsxs(PortfolioInline, { className: "loaf-portfolio-inline", children: [
@@ -5513,7 +5539,7 @@ var Header = ({
             /* @__PURE__ */ jsx(PBOperator, { children: "=" }),
             /* @__PURE__ */ jsxs(PBMetric, { children: [
               /* @__PURE__ */ jsx(PBMetricLabel, { children: "Portfolio" }),
-              /* @__PURE__ */ jsxs(PBMetricValue, { style: { color: "#D4AF37", fontWeight: 700 }, children: [
+              /* @__PURE__ */ jsxs(PBMetricValue, { style: { color: "#E6C87E", fontWeight: 700 }, children: [
                 "$",
                 fmtInline(portfolioSummary.portfolioValue)
               ] })
@@ -5620,84 +5646,93 @@ var Header = ({
             )
           ] })
         ] }),
-        !isMobileMenuOpen && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           MobileOnlyButton,
           {
-            onClick: () => setIsMobileMenuOpen(true),
-            $isOpen: false,
+            onClick: () => setIsMobileMenuOpen((v) => !v),
+            $isOpen: isMobileMenuOpen,
             className: "mobile-menu-button",
-            "aria-label": "Open menu",
-            children: "\u2630"
+            "aria-label": isMobileMenuOpen ? "Close menu" : "Open menu",
+            children: isMobileMenuOpen ? "\u2715" : "\u2630"
           }
         )
       ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsx(Button2, { className: "signup", onClick: handleSignIn, children: "Connect" }),
-        !isMobileMenuOpen && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           MobileOnlyButton,
           {
-            onClick: () => setIsMobileMenuOpen(true),
-            $isOpen: false,
+            onClick: () => setIsMobileMenuOpen((v) => !v),
+            $isOpen: isMobileMenuOpen,
             className: "mobile-menu-button",
-            "aria-label": "Open menu",
-            children: "\u2630"
+            "aria-label": isMobileMenuOpen ? "Close menu" : "Open menu",
+            children: isMobileMenuOpen ? "\u2715" : "\u2630"
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ jsx(HeaderSpacer, {}),
-    isAuthenticated && portfolioSummary && isPortfolioBarVisible && (() => {
-      const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-      const isPLPositive = portfolioSummary.pnl >= 0;
-      return /* @__PURE__ */ jsx(PortfolioBarContainer, { className: "loaf-portfolio-bar loaf-portfolio-bar-dropdown", children: /* @__PURE__ */ jsxs(PortfolioBarPill, { ref: portfolioPillRef, className: "loaf-portfolio-pill", children: [
-        portfolioArrowLeft !== null && /* @__PURE__ */ jsx(PortfolioBarArrow, { className: "loaf-portfolio-arrow", style: { left: `${portfolioArrowLeft}px` } }),
-        /* @__PURE__ */ jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsx(PBMetricLabel, { children: "Holdings" }),
-          /* @__PURE__ */ jsxs(PBMetricValue, { children: [
-            "$",
-            fmt(portfolioSummary.holdings)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(PBOperator, { children: "+" }),
-        /* @__PURE__ */ jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsx(PBMetricLabel, { children: "Cash" }),
-          /* @__PURE__ */ jsxs(PBMetricValue, { children: [
-            "$",
-            fmt(portfolioSummary.cash)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(PBOperator, { children: "=" }),
-        /* @__PURE__ */ jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsx(PBMetricLabel, { children: "Portfolio" }),
-          /* @__PURE__ */ jsxs(PBMetricValue, { style: { color: "#D4AF37", fontWeight: 700 }, children: [
-            "$",
-            fmt(portfolioSummary.portfolioValue)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(PBDot, {}),
-        /* @__PURE__ */ jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsx(PBMetricLabel, { children: "Locked Balance" }),
-          /* @__PURE__ */ jsxs(PBMetricValue, { style: { color: "#B0B0B8" }, children: [
-            "$",
-            fmt(portfolioSummary.frozen ?? 0)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(PBDot, {}),
-        /* @__PURE__ */ jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsx(PBMetricLabel, { children: "P&L" }),
-          /* @__PURE__ */ jsxs(PBMetricValue, { $positive: isPLPositive, $negative: !isPLPositive, children: [
-            isPLPositive ? "+" : "",
-            "$",
-            fmt(Math.abs(portfolioSummary.pnl)),
-            /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.6rem", marginLeft: "2px", opacity: 0.7 }, children: [
-              "(",
+    isAuthenticated && isPortfolioBarVisible && (showFundsPending || portfolioSummary) && /* @__PURE__ */ jsx(PortfolioBarContainer, { className: "loaf-portfolio-bar loaf-portfolio-bar-dropdown", children: /* @__PURE__ */ jsxs(PortfolioBarPill, { ref: portfolioPillRef, className: "loaf-portfolio-pill", children: [
+      portfolioArrowLeft !== null && /* @__PURE__ */ jsx(PortfolioBarArrow, { className: "loaf-portfolio-arrow", style: { left: `${portfolioArrowLeft}px` } }),
+      showFundsPending ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, className: "loaf-funds-pending", children: [
+        /* @__PURE__ */ jsx(FundsPendingText, { children: "Your test funds will arrive soon\u2026" }),
+        fundsCountdown > 0 && /* @__PURE__ */ jsxs(FundsPendingCountdown, { children: [
+          "~",
+          fundsCountdown,
+          "s"
+        ] })
+      ] }) : portfolioSummary ? (() => {
+        const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+        const isPLPositive = portfolioSummary.pnl >= 0;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(PBMetric, { children: [
+            /* @__PURE__ */ jsx(PBMetricLabel, { children: "Holdings" }),
+            /* @__PURE__ */ jsxs(PBMetricValue, { children: [
+              "$",
+              fmt(portfolioSummary.holdings)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(PBOperator, { children: "+" }),
+          /* @__PURE__ */ jsxs(PBMetric, { children: [
+            /* @__PURE__ */ jsx(PBMetricLabel, { children: "Cash" }),
+            /* @__PURE__ */ jsxs(PBMetricValue, { children: [
+              "$",
+              fmt(portfolioSummary.cash)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(PBOperator, { children: "=" }),
+          /* @__PURE__ */ jsxs(PBMetric, { children: [
+            /* @__PURE__ */ jsx(PBMetricLabel, { children: "Portfolio" }),
+            /* @__PURE__ */ jsxs(PBMetricValue, { style: { color: "#E6C87E", fontWeight: 700 }, children: [
+              "$",
+              fmt(portfolioSummary.portfolioValue)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(PBDot, {}),
+          /* @__PURE__ */ jsxs(PBMetric, { children: [
+            /* @__PURE__ */ jsx(PBMetricLabel, { children: "Locked Balance" }),
+            /* @__PURE__ */ jsxs(PBMetricValue, { style: { color: "#B0B0B8" }, children: [
+              "$",
+              fmt(portfolioSummary.frozen ?? 0)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(PBDot, {}),
+          /* @__PURE__ */ jsxs(PBMetric, { children: [
+            /* @__PURE__ */ jsx(PBMetricLabel, { children: "P&L" }),
+            /* @__PURE__ */ jsxs(PBMetricValue, { $positive: isPLPositive, $negative: !isPLPositive, children: [
               isPLPositive ? "+" : "",
-              portfolioSummary.pnlPercent.toFixed(2),
-              "%)"
+              "$",
+              fmt(Math.abs(portfolioSummary.pnl)),
+              /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.6rem", marginLeft: "2px", opacity: 0.7 }, children: [
+                "(",
+                isPLPositive ? "+" : "",
+                portfolioSummary.pnlPercent.toFixed(2),
+                "%)"
+              ] })
             ] })
           ] })
-        ] })
-      ] }) });
-    })(),
+        ] });
+      })() : null
+    ] }) }),
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsx(
       LoginPopupComponent,
       {
@@ -5728,11 +5763,11 @@ var Overlay = styled9.div`
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(3px);
-  z-index: 999;
+  z-index: 970;
 `;
 var MobileOnlyButton = styled9.button.attrs({ type: "button" })`
   display: none;
-  background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.2)" : "#f0b90b"};
+  background-color: ${(props) => props.$isOpen ? "rgba(230, 200, 126, 0.2)" : "#E6C87E"};
   color: ${(props) => props.$isOpen ? "#ffffff" : "#0b0e11"};
   font-size: 18px;
   font-weight: bold;
@@ -5743,18 +5778,18 @@ var MobileOnlyButton = styled9.button.attrs({ type: "button" })`
   margin-left: 0.5rem;
   z-index: 1100;
   border-radius: 6px;
-  border: ${(props) => props.$isOpen ? "1px solid #f0b90b" : "none"};
+  border: ${(props) => props.$isOpen ? "1px solid #E6C87E" : "none"};
   line-height: 1;
   padding: 0;
   cursor: pointer;
   box-shadow: ${(props) => props.$isOpen ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "none"};
 
   &:hover {
-    background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.3)" : "#e0aa0b"};
+    background-color: ${(props) => props.$isOpen ? "rgba(230, 200, 126, 0.3)" : "#F2D898"};
   }
 
   &:active {
-    background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.4)" : "#d19f0a"};
+    background-color: ${(props) => props.$isOpen ? "rgba(230, 200, 126, 0.4)" : "#F2D898"};
   }
 
   @media (max-width: 1024px) {
@@ -5769,7 +5804,7 @@ var HeaderContainer = styled9.header`
      still get the horizontal padding — only the top falls back to 0 */
   padding: 0 2rem;
   padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
-  background-color: rgba(13, 17, 23, ${({ $bgOpacity }) => $bgOpacity ?? 1});
+  background-color: rgba(17, 17, 19, ${({ $bgOpacity }) => $bgOpacity ?? 1});
   border-bottom: 1px solid rgba(35, 42, 50, ${({ $bgOpacity }) => $bgOpacity ?? 1});
   transition: background-color 0.15s ease, border-bottom-color 0.15s ease;
   position: fixed;
@@ -5792,7 +5827,7 @@ var HeaderContainer = styled9.header`
     min-height: 46px;
     padding: 0 0.75rem;
     border-radius: 12px;
-    background-color: rgba(13, 17, 23, ${({ $bgOpacity }) => Math.max(($bgOpacity ?? 1) * 0.92, 0)});
+    background-color: rgba(17, 17, 19, ${({ $bgOpacity }) => Math.max(($bgOpacity ?? 1) * 0.92, 0)});
     backdrop-filter: blur(${({ $bgOpacity }) => Math.round(($bgOpacity ?? 1) * 12)}px);
     border: 1px solid rgba(255, 255, 255, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.08});
     border-bottom: 1px solid rgba(255, 255, 255, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.08});
@@ -5860,19 +5895,25 @@ var Nav = styled9.nav`
 
   @media (max-width: 1024px) {
     position: fixed;
-    top: 56px;
-    top: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
-    right: ${(props) => props.$isOpen ? "0" : "-100%"} ;
-    width: 280px;
-    max-width: 280px;
-    height: calc(100vh - 56px);
-    height: calc(100vh - 56px - max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
+    /* Opens just below the nav — and below the Private Beta banner when it's showing.
+       The shell publishes --loaf-menu-top (banner-aware); the fallback is the bare
+       nav bottom for standalone apps with no shell/banner. */
+    top: var(--loaf-menu-top, calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px))));
+    right: 0;
+    left: 0;
+    width: 100%;
+    max-width: 100%;
+    height: calc(100dvh - var(--loaf-menu-top, calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)))));
     background: linear-gradient(180deg, #0f1419 0%, #0a0e13 100%);
-    z-index: 1000;
-    transition: right 0.3s ease;
-    box-shadow: ${(props) => props.$isOpen ? "-10px 0 30px rgba(0, 0, 0, 0.5)" : "none"};
+    z-index: 980;
+    /* Gentle fade + slide-down instead of an abrupt slide-in. */
+    opacity: ${(props) => props.$isOpen ? "1" : "0"};
+    transform: ${(props) => props.$isOpen ? "translateY(0)" : "translateY(-14px)"};
+    visibility: ${(props) => props.$isOpen ? "visible" : "hidden"};
+    pointer-events: ${(props) => props.$isOpen ? "auto" : "none"};
+    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
+    box-shadow: ${(props) => props.$isOpen ? "0 12px 30px rgba(0, 0, 0, 0.5)" : "none"};
     overflow-y: auto;
-    border-left: 1px solid rgba(255, 255, 255, 0.05);
 
     .desktop-nav {
       display: none;
@@ -5881,10 +5922,18 @@ var Nav = styled9.nav`
     .mobile-menu-content {
       display: flex;
       flex-direction: column;
-      padding-top: 0;
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      align-items: center;
+      justify-content: center;
+      min-height: 100%;
+      padding: 2rem 1.5rem 2.5rem;
+      gap: 0.4rem;
     }
   }
+
+  @media (max-width: 768px) {
+    top: var(--loaf-menu-top, calc(0.5rem + 46px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px))));
+    height: calc(100dvh - var(--loaf-menu-top, calc(0.5rem + 46px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)))));
+  }
 `;
 var NavLink = styled9.a`
   margin: 0 12px;
@@ -5906,7 +5955,7 @@ var NavLink = styled9.a`
 
   &:hover,
   &.active {
-    color: #f0b90b;
+    color: #E6C87E;
   }
 
   &.active::after {
@@ -5916,7 +5965,7 @@ var NavLink = styled9.a`
     left: 0;
     width: 100%;
     height: 3px;
-    background-color: #f0b90b;
+    background-color: #E6C87E;
   }
 
   @media (max-width: 768px) {
@@ -5955,8 +6004,8 @@ var Button2 = styled9.button.attrs({ type: "button" })`
 
   &.login {
     background-color: transparent;
-    border: 1px solid #f0b90b;
-    color: #f0b90b;
+    border: 1px solid #E6C87E;
+    color: #E6C87E;
 
     &:hover {
       background-color: rgba(240, 185, 11, 0.1);
@@ -5968,12 +6017,12 @@ var Button2 = styled9.button.attrs({ type: "button" })`
   }
 
   &.signup {
-    background-color: #f0b90b;
+    background-color: #E6C87E;
     color: #0b0e11;
     border: none;
 
     &:hover {
-      background-color: #f8d12f;
+      background-color: #F2D898;
     }
   }
 
@@ -6064,7 +6113,7 @@ var MenuItem = styled9.div`
   border-bottom: none;
 
   &:hover {
-    color: #f0b90b;
+    color: #E6C87E;
     background-color: rgba(240, 185, 11, 0.08);
   }
 
@@ -6073,13 +6122,7 @@ var MenuItem = styled9.div`
   }
 `;
 var MobileMenuHeader = styled9.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 16px 20px;
-  margin-top: 60px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(0, 0, 0, 0.2);
+  display: none;
 `;
 var MobileMenuClose = styled9.button.attrs({ type: "button" })`
   background: none;
@@ -6095,19 +6138,20 @@ var MobileMenuClose = styled9.button.attrs({ type: "button" })`
 var MobileNavItem = styled9.div`
   display: flex;
   align-items: center;
-  padding: 14px 20px;
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 15px;
+  justify-content: center;
+  padding: 13px 20px;
+  width: 100%;
+  max-width: 320px;
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 18px;
   cursor: pointer;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-  font-weight: 400;
-  transition: all 0.2s ease;
+  font-weight: 500;
+  transition: color 0.2s ease;
   letter-spacing: 0.2px;
+  text-align: center;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.05);
-    color: #ffffff;
-    padding-left: 24px;
+    color: #E6C87E;
   }
 `;
 var pbShimmer = keyframes`
@@ -6123,14 +6167,14 @@ var PortfolioEyeButton = styled9.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.5)"};
+  color: ${(p) => p.$active ? "#E6C87E" : "rgba(255,255,255,0.5)"};
   transition: all 0.2s ease;
   margin-left: 6px;
   margin-right: 10px;
 
   &:hover {
     background: rgba(212, 175, 55, 0.2);
-    color: #D4AF37;
+    color: #E6C87E;
   }
 
   @media (max-width: 768px) {
@@ -6262,6 +6306,35 @@ var PortfolioInline = styled9.div`
     display: none;
   }
 `;
+var fundsPendingPulse = keyframes`
+  0%   { opacity: 0.25; }
+  50%  { opacity: 1; }
+  100% { opacity: 0.25; }
+`;
+var FundsPendingInline = styled9.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-right: 0.75rem;
+
+  @media (max-width: 1800px) {
+    display: none;
+  }
+`;
+var FundsPendingText = styled9.span`
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  color: #E6C87E;
+  white-space: nowrap;
+  animation: ${fundsPendingPulse} 1.8s ease-in-out infinite;
+`;
+var FundsPendingCountdown = styled9.span`
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.55);
+  font-variant-numeric: tabular-nums;
+`;
 var PBMetric = styled9.div`
   display: flex;
   flex-direction: column;
@@ -6588,20 +6661,6 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
-  const handlePasskeyLogin = async () => {
-    if (!onPasskeyLogin) return;
-    setError("");
-    setLoading(true);
-    try {
-      await onPasskeyLogin();
-      onClose();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Passkey sign-in failed";
-      setError(message);
-    } finally {
-      setLoading(false);
-    }
-  };
   const handleEmailClick = (signUp = false) => {
     setIsSignUp(signUp);
     setView("email");
@@ -6617,13 +6676,9 @@ var LoginPopup = ({
       setError("Email addresses with '+' are not allowed. Please use your base email address.");
       return;
     }
-    if (isSignUp && !handle.trim()) {
-      setError("Please claim a handle to continue");
-      return;
-    }
     setLoading(true);
     setError("");
-    const normalizedHandle = isSignUp ? handle.trim() : void 0;
+    const normalizedHandle = isSignUp && handle.trim() ? handle.trim() : void 0;
     try {
       const demoResult = await onDemoLogin?.(email, normalizedHandle ?? null);
       if (demoResult && demoResult.success) {
@@ -6851,13 +6906,13 @@ var LoginPopup = ({
     return /* @__PURE__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxs(Title, { children: [
-        /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
-        /* @__PURE__ */ jsxs(TitleText, { children: [
-          "Welcome to Loaf",
-          /* @__PURE__ */ jsx(BetaBadge, { children: "(Private Beta)" })
-        ] })
+        /* @__PURE__ */ jsxs(LogoContainer3, { children: [
+          /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
+          /* @__PURE__ */ jsx(LogoBeta, { children: "Private Beta" })
+        ] }),
+        /* @__PURE__ */ jsx(TitleText, { children: "Welcome to Loaf" })
       ] }),
-      /* @__PURE__ */ jsx(Subtitle, { children: "Sign in to claim $100k in test USD." }),
+      /* @__PURE__ */ jsx(Subtitle, { children: "Sign in to claim 100k in test USD." }),
       /* @__PURE__ */ jsxs(ButtonsContainer, { children: [
         /* @__PURE__ */ jsxs(LoginButton, { onClick: () => handleEmailClick(false), children: [
           /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) }),
@@ -6867,11 +6922,12 @@ var LoginPopup = ({
         /* @__PURE__ */ jsxs(LoginButton, { onClick: handleWalletLogin, children: [
           /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
           "Sign in with Wallet"
-        ] }),
-        onPasskeyLogin && /* @__PURE__ */ jsxs(LoginButton, { onClick: handlePasskeyLogin, disabled: loading, children: [
-          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C9.79 2 8 3.79 8 6v4H6c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2h-2V6c0-2.21-1.79-4-4-4zm-2 4c0-1.1.9-2 2-2s2 .9 2 2v4h-4V6zm2 9a2 2 0 100 4 2 2 0 000-4z" }) }),
-          "Sign in with Passkey"
         ] })
+      ] }),
+      /* @__PURE__ */ jsxs(SignUpPrompt, { children: [
+        "New to Loaf?",
+        " ",
+        /* @__PURE__ */ jsx(SignUpLink, { type: "button", onClick: () => handleEmailClick(true), children: "Sign up" })
       ] })
     ] }) });
   }
@@ -6886,7 +6942,7 @@ var LoginPopup = ({
         /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         isSignUp ? "Sign up with Email" : "Sign in with Email"
       ] }),
-      /* @__PURE__ */ jsx("form", { onSubmit: handleSendCode, children: /* @__PURE__ */ jsxs(EmailFormContainer, { children: [
+      /* @__PURE__ */ jsx("form", { onSubmit: handleSendCode, style: { marginTop: "1.5rem" }, children: /* @__PURE__ */ jsxs(EmailFormContainer, { children: [
         /* @__PURE__ */ jsx(
           EmailInput,
           {
@@ -6901,13 +6957,13 @@ var LoginPopup = ({
           EmailInput,
           {
             type: "text",
-            placeholder: "Claim your handle (e.g. Landlord)",
+            placeholder: "Claim your username (Optional)",
             value: handle,
             onChange: (event) => setHandle(event.target.value),
             style: { marginTop: "0.5rem" }
           }
         ),
-        /* @__PURE__ */ jsx(SubmitButton, { type: "submit", disabled: loading || !email || isSignUp && !handle, children: loading ? "Sending..." : "Continue" }),
+        /* @__PURE__ */ jsx(SubmitButton, { type: "submit", disabled: loading || !email, children: loading ? "Sending..." : "Continue" }),
         error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
       ] }) }),
       /* @__PURE__ */ jsx(InfoText, { children: "We'll send you a verification code to sign in securely." }),
@@ -6995,7 +7051,7 @@ var LoginPopup = ({
               style: {
                 background: "none",
                 border: "none",
-                color: "#f0b90b",
+                color: "#E6C87E",
                 cursor: "pointer",
                 textDecoration: "underline"
               },
@@ -7025,7 +7081,7 @@ var LoginPopup = ({
             ] })
           ] }),
           !showKycWidget && /* @__PURE__ */ jsxs(KycLandingContainer, { children: [
-            /* @__PURE__ */ jsx(KycLockIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx(KycLockIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#E6C87E", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
               /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
               /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
             ] }) }),
@@ -7192,7 +7248,7 @@ var LoginPopup = ({
           /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
         ] }) }),
         /* @__PURE__ */ jsx(OnboardingHeading, { children: "Enter code to access Private Beta trading" }),
-        /* @__PURE__ */ jsx(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter your code to unlock $100k in testnet USD, or skip to continue." }),
+        /* @__PURE__ */ jsx(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter code to trade 100k in USDC, or skip to continue." }),
         /* @__PURE__ */ jsxs(EmailFormContainer, { style: { width: "100%", marginBottom: 0 }, children: [
           /* @__PURE__ */ jsx(
             EmailInput,
@@ -7500,7 +7556,7 @@ var KycStartButton = styled9.button`
   border-radius: 8px;
   border: none;
   cursor: pointer;
-  background: #D4AF37;
+  background: #E6C87E;
   color: #0a0a0a;
   font-weight: 600;
   font-size: 0.9rem;
@@ -7569,18 +7625,17 @@ var Title = styled9.h2`
   gap: 1rem;
 `;
 var TitleText = styled9.span`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.35rem;
   text-align: center;
   line-height: 1.2;
 `;
-var BetaBadge = styled9.span`
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-accent, #e6c87e);
+var LogoBeta = styled9.span`
+  color: var(--color-accent, #E6C87E);
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
   white-space: nowrap;
+  padding-bottom: 0.95rem;
 `;
 var Subtitle = styled9.p`
   font-size: 0.9rem;
@@ -7591,7 +7646,9 @@ var Subtitle = styled9.p`
 `;
 var LogoContainer3 = styled9.div`
   display: flex;
+  align-items: flex-end;
   justify-content: center;
+  gap: 0.45rem;
   margin-bottom: 0.5rem;
 `;
 var LogoImage = styled9.img`
@@ -7603,6 +7660,25 @@ var ButtonsContainer = styled9.div`
   gap: 1rem;
   margin-bottom: 1.5rem;
 `;
+var SignUpPrompt = styled9.div`
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary, #848e9c);
+  margin-bottom: 0.5rem;
+`;
+var SignUpLink = styled9.button`
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--color-accent, #E6C87E);
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
 var LoginButton = styled9.button`
   display: flex;
   align-items: center;
@@ -7620,13 +7696,13 @@ var LoginButton = styled9.button`
 
   &:hover {
     background-color: rgba(230, 198, 86, 0.1);
-    border-color: var(--color-accent, #e6c656);
+    border-color: var(--color-accent, #E6C87E);
   }
 
   svg {
     width: 20px;
     height: 20px;
-    color: var(--color-accent, #e6c656);
+    color: var(--color-accent, #E6C87E);
   }
 `;
 var InfoText = styled9.p`
@@ -7653,7 +7729,7 @@ var EmailInput = styled9.input`
 
   &:focus {
     outline: none;
-    border-color: var(--color-accent, #e6c656);
+    border-color: var(--color-accent, #E6C87E);
   }
 
   &::placeholder {
@@ -7674,19 +7750,19 @@ var OTPInput = styled9.input`
   background-color: var(--color-background-light, #1a1a1a);
   border: 1px solid rgba(230, 198, 86, 0.2);
   border-radius: var(--border-radius, 8px);
-  color: var(--color-accent, #e6c656);
+  color: var(--color-accent, #E6C87E);
   transition: all 0.2s ease;
 
   &:focus {
     outline: none;
-    border-color: var(--color-accent, #e6c656);
+    border-color: var(--color-accent, #E6C87E);
     box-shadow: 0 0 0 2px rgba(230, 198, 86, 0.2);
   }
 `;
 var SubmitButton = styled9.button`
   width: 100%;
   padding: 0.85rem;
-  background-color: var(--color-accent, #e6c656);
+  background-color: var(--color-accent, #E6C87E);
   border: none;
   border-radius: var(--border-radius, 8px);
   color: var(--color-background, #0a0a0a);
@@ -7696,7 +7772,7 @@ var SubmitButton = styled9.button`
   transition: all 0.2s ease;
 
   &:hover:not(:disabled) {
-    background-color: var(--color-accent-hover, #d4a50a);
+    background-color: var(--color-accent-hover, #F2D898);
     transform: translateY(-1px);
   }
 
@@ -7718,7 +7794,7 @@ var BackButton = styled9.button`
   margin-bottom: 1rem;
 
   &:hover {
-    color: var(--color-accent, #e6c656);
+    color: var(--color-accent, #E6C87E);
   }
 `;
 var StatusMessage = styled9.p`
@@ -8039,7 +8115,7 @@ var SpinnerRing = styled9.div`
   width: 40px;
   height: 40px;
   border: 3px solid rgba(230, 198, 86, 0.2);
-  border-top-color: var(--color-accent, #e6c656);
+  border-top-color: var(--color-accent, #E6C87E);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 
@@ -8072,7 +8148,7 @@ var FactLabel = styled9.div`
   letter-spacing: 0.12em;
   text-transform: uppercase;
   font-weight: 700;
-  color: var(--color-accent, #e6c656);
+  color: var(--color-accent, #E6C87E);
   margin-bottom: 0.4rem;
 `;
 var FactText = styled9.p`
@@ -8529,6 +8605,18 @@ var PriceChange = styled9.span`
   gap: 0.35rem;
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
+function useMaxWidth(maxWidth) {
+  const [match, setMatch] = useState(() => typeof window !== "undefined" && window.matchMedia(`(max-width: ${maxWidth}px)`).matches);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
+    const onChange = () => setMatch(mq.matches);
+    onChange();
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [maxWidth]);
+  return match;
+}
 function GalleryMapSection({
   images = [],
   categories = [],
@@ -8548,6 +8636,8 @@ function GalleryMapSection({
   const [showVideo, setShowVideo] = useState(false);
   const [autoPlaying, setAutoPlaying] = useState(autoPlay);
   const [showFullMap, setShowFullMap] = useState(false);
+  const [showFullVideo, setShowFullVideo] = useState(false);
+  const isMobile = useMaxWidth(768);
   const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
   useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
@@ -8578,62 +8668,67 @@ function GalleryMapSection({
           /* @__PURE__ */ jsx(BiImages, {}),
           " Property Gallery"
         ] }),
-        /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onPhotoClick?.(carouselIndex), children: [
+        isMobile ? videoUrl && /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setShowFullVideo(true), children: [
+          /* @__PURE__ */ jsx(BiVideo, { size: 15 }),
+          "Video"
+        ] }) : /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onPhotoClick?.(carouselIndex), children: [
           /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { width: 14, height: 14 }, children: /* @__PURE__ */ jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" }) }),
           "Full View"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs(Carousel, { children: [
-        showVideo && videoUrl && /* @__PURE__ */ jsx(VideoOverlay, { children: /* @__PURE__ */ jsx("video", { autoPlay: true, loop: true, playsInline: true, controls: true, style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }, children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) }) }),
-        /* @__PURE__ */ jsx(Track, { style: { transform: `translateX(-${carouselIndex * 100}%)` }, children: images.map((img, idx) => /* @__PURE__ */ jsxs(Slide, { onClick: () => onPhotoClick?.(idx), children: [
-          /* @__PURE__ */ jsx("img", { src: img.src, alt: img.title }),
-          /* @__PURE__ */ jsxs(SlideCaption, { children: [
-            /* @__PURE__ */ jsx("h4", { children: img.title }),
-            img.subtitle && /* @__PURE__ */ jsx("p", { children: img.subtitle })
+      isMobile ? /* @__PURE__ */ jsx(StackedGallery, { images, onPhotoClick }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Carousel, { children: [
+          showVideo && videoUrl && /* @__PURE__ */ jsx(VideoOverlay, { children: /* @__PURE__ */ jsx("video", { autoPlay: true, loop: true, playsInline: true, controls: true, style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }, children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) }) }),
+          /* @__PURE__ */ jsx(Track, { style: { transform: `translateX(-${carouselIndex * 100}%)` }, children: images.map((img, idx) => /* @__PURE__ */ jsxs(Slide, { onClick: () => onPhotoClick?.(idx), children: [
+            /* @__PURE__ */ jsx("img", { src: img.src, alt: img.title }),
+            /* @__PURE__ */ jsxs(SlideCaption, { children: [
+              /* @__PURE__ */ jsx("h4", { children: img.title }),
+              img.subtitle && /* @__PURE__ */ jsx("p", { children: img.subtitle })
+            ] })
+          ] }, idx)) }),
+          !showVideo && images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CarouselButton, { className: "prev", onClick: goPrev, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) }) }),
+            /* @__PURE__ */ jsx(CarouselButton, { className: "next", onClick: goNext, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) }) })
           ] })
-        ] }, idx)) }),
-        !showVideo && images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(CarouselButton, { className: "prev", onClick: goPrev, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) }) }),
-          /* @__PURE__ */ jsx(CarouselButton, { className: "next", onClick: goNext, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(ThumbStrip, { children: [
-        /* @__PURE__ */ jsx(ThumbScroll, { children: images.filter((img) => img.category !== "Floorplan").map((img) => {
-          const actualIndex = images.indexOf(img);
-          return /* @__PURE__ */ jsx(Thumbnail2, { "data-active": !showVideo && carouselIndex === actualIndex, onClick: () => {
-            stopAutoPlay();
-            setShowVideo(false);
-            setCarouselIndex(actualIndex);
-          }, children: /* @__PURE__ */ jsx("img", { src: img.src, alt: img.title }) }, actualIndex);
-        }) }),
-        /* @__PURE__ */ jsx(ThumbDivider, {}),
-        /* @__PURE__ */ jsxs(FixedButtons, { children: [
-          floorplanIndex !== -1 && /* @__PURE__ */ jsxs(FixedBtn, { $active: isFloorplan, onClick: () => {
-            stopAutoPlay();
-            setShowVideo(false);
-            setCarouselIndex(floorplanIndex);
-          }, children: [
-            /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "1" }),
-              /* @__PURE__ */ jsx("line", { x1: "2", y1: "10", x2: "22", y2: "10" }),
-              /* @__PURE__ */ jsx("line", { x1: "10", y1: "2", x2: "10", y2: "22" })
+        ] }),
+        /* @__PURE__ */ jsxs(ThumbStrip, { children: [
+          /* @__PURE__ */ jsx(ThumbScroll, { children: images.filter((img) => img.category !== "Floorplan").map((img) => {
+            const actualIndex = images.indexOf(img);
+            return /* @__PURE__ */ jsx(Thumbnail2, { "data-active": !showVideo && carouselIndex === actualIndex, onClick: () => {
+              stopAutoPlay();
+              setShowVideo(false);
+              setCarouselIndex(actualIndex);
+            }, children: /* @__PURE__ */ jsx("img", { src: img.src, alt: img.title }) }, actualIndex);
+          }) }),
+          /* @__PURE__ */ jsx(ThumbDivider, {}),
+          /* @__PURE__ */ jsxs(FixedButtons, { children: [
+            floorplanIndex !== -1 && /* @__PURE__ */ jsxs(FixedBtn, { $active: isFloorplan, onClick: () => {
+              stopAutoPlay();
+              setShowVideo(false);
+              setCarouselIndex(floorplanIndex);
+            }, children: [
+              /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "1" }),
+                /* @__PURE__ */ jsx("line", { x1: "2", y1: "10", x2: "22", y2: "10" }),
+                /* @__PURE__ */ jsx("line", { x1: "10", y1: "2", x2: "10", y2: "22" })
+              ] }),
+              "Floor Plan"
             ] }),
-            "Floor Plan"
-          ] }),
-          videoUrl && /* @__PURE__ */ jsxs(FixedBtn, { $active: showVideo, onClick: () => setShowVideo((p) => !p), children: [
-            /* @__PURE__ */ jsx(BiVideo, { size: 16 }),
-            " Video"
+            videoUrl && /* @__PURE__ */ jsxs(FixedBtn, { $active: showVideo, onClick: () => setShowVideo((p) => !p), children: [
+              /* @__PURE__ */ jsx(BiVideo, { size: 16 }),
+              " Video"
+            ] })
           ] })
-        ] })
-      ] }),
-      filteredCategories.length > 0 && /* @__PURE__ */ jsx(CategoryRow, { children: filteredCategories.map((cat, i) => {
-        const isActive = carouselIndex >= cat.startIndex && (i === filteredCategories.length - 1 || carouselIndex < filteredCategories[i + 1].startIndex);
-        return /* @__PURE__ */ jsx("button", { type: "button", "data-active": isActive, onClick: () => {
-          stopAutoPlay();
-          setShowVideo(false);
-          setCarouselIndex(cat.startIndex);
-        }, children: cat.name }, cat.name);
-      }) })
+        ] }),
+        filteredCategories.length > 0 && /* @__PURE__ */ jsx(CategoryRow, { children: filteredCategories.map((cat, i) => {
+          const isActive = carouselIndex >= cat.startIndex && (i === filteredCategories.length - 1 || carouselIndex < filteredCategories[i + 1].startIndex);
+          return /* @__PURE__ */ jsx("button", { type: "button", "data-active": isActive, onClick: () => {
+            stopAutoPlay();
+            setShowVideo(false);
+            setCarouselIndex(cat.startIndex);
+          }, children: cat.name }, cat.name);
+        }) })
+      ] })
     ] }),
     featuresSlot,
     !hideMap && /* @__PURE__ */ jsxs(MapPanel, { children: [
@@ -8693,7 +8788,130 @@ function GalleryMapSection({
       ] }),
       /* @__PURE__ */ jsx(SuburbDesc, { children: "One of Sydney's most prestigious harbourside suburbs, consistently ranked among Australia's highest-value residential markets. Strong capital growth driven by limited supply, heritage conservation overlays, and international buyer demand." })
     ] }),
-    showFullMap && !hideMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false), mapUrl: resolvedMapUrl })
+    showFullMap && !hideMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false), mapUrl: resolvedMapUrl }),
+    showFullVideo && videoUrl && /* @__PURE__ */ jsxs(FullVideoOverlay, { onClick: () => setShowFullVideo(false), children: [
+      /* @__PURE__ */ jsx(FullVideoClose, { onClick: () => setShowFullVideo(false), "aria-label": "Close video", children: "\u2715" }),
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: videoUrl,
+          autoPlay: true,
+          controls: true,
+          playsInline: true,
+          controlsList: "nodownload",
+          disablePictureInPicture: true,
+          onClick: (e) => e.stopPropagation(),
+          onContextMenu: (e) => e.preventDefault()
+        }
+      )
+    ] })
+  ] });
+}
+function StackedGallery({ images, onPhotoClick }) {
+  const [expanded, setExpanded] = useState(false);
+  const [cardH, setCardH] = useState(200);
+  const wrapRef = useRef(null);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const measure = () => {
+      const w = el.clientWidth;
+      if (w > 0) setCardH(Math.round(w * 9 / 16));
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const update = () => {
+      const nav = document.getElementById("loaf-header");
+      let topPx = nav ? nav.getBoundingClientRect().bottom : 56;
+      const header = document.querySelector(".trade-top-sticky");
+      if (header) {
+        const b = header.getBoundingClientRect().bottom;
+        if (b > 0 && b < window.innerHeight * 0.5) topPx = Math.max(topPx, b);
+      }
+      el.style.setProperty("--gallery-showless-top", `${Math.round(topPx) + 12}px`);
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+  const collapse = () => {
+    setExpanded(false);
+    requestAnimationFrame(() => {
+      const wrap = wrapRef.current;
+      const panel = wrap?.parentElement;
+      if (!panel) return;
+      const nav = document.getElementById("loaf-header");
+      let offset = nav ? nav.getBoundingClientRect().bottom : 56;
+      const header = document.querySelector(".trade-top-sticky");
+      if (header) {
+        const b = header.getBoundingClientRect().bottom;
+        if (b > 0 && b < window.innerHeight * 0.5) offset = Math.max(offset, b);
+      }
+      const top = panel.getBoundingClientRect().top + window.scrollY - offset - 64;
+      window.scrollTo({ top: Math.max(0, top), behavior: "auto" });
+    });
+  };
+  const n = images.length;
+  const PEEK = 12;
+  const INSET = 10;
+  const GAP = 14;
+  const MAX_BEHIND = 2;
+  const collapsedHeight = cardH + MAX_BEHIND * PEEK;
+  const expandedHeight = n * cardH + (n - 1) * GAP;
+  return /* @__PURE__ */ jsxs(StackWrap, { ref: wrapRef, children: [
+    expanded && /* @__PURE__ */ jsxs(ShowLessBtn, { type: "button", onClick: collapse, children: [
+      /* @__PURE__ */ jsx(BiChevronUp, { size: 16 }),
+      " Show less"
+    ] }),
+    /* @__PURE__ */ jsx(StackViewport, { style: { height: (expanded ? expandedHeight : collapsedHeight) || void 0 }, children: images.map((img, i) => {
+      const depth = Math.min(i, MAX_BEHIND);
+      const top = expanded ? i * (cardH + GAP) : depth * PEEK;
+      const side = expanded ? 0 : depth * INSET;
+      const hidden = !expanded && i > MAX_BEHIND;
+      return /* @__PURE__ */ jsxs(
+        StackCard,
+        {
+          style: {
+            top,
+            left: side,
+            right: side,
+            height: cardH,
+            zIndex: expanded ? 1 : n - i,
+            opacity: hidden ? 0 : 1,
+            pointerEvents: hidden ? "none" : "auto"
+          },
+          onClick: () => {
+            if (!expanded) setExpanded(true);
+            else onPhotoClick?.(i);
+          },
+          children: [
+            /* @__PURE__ */ jsx("img", { src: img.src, alt: img.title, draggable: false }),
+            /* @__PURE__ */ jsxs(StackCaption, { children: [
+              /* @__PURE__ */ jsx("h4", { children: img.title }),
+              img.subtitle && /* @__PURE__ */ jsx("p", { children: img.subtitle })
+            ] }),
+            !expanded && i === 0 && n > 1 && /* @__PURE__ */ jsxs(StackBadge, { children: [
+              /* @__PURE__ */ jsx(BiImages, { size: 13 }),
+              " ",
+              n,
+              " photos ",
+              /* @__PURE__ */ jsx(BiChevronDown, { size: 14 })
+            ] })
+          ]
+        },
+        i
+      );
+    }) })
   ] });
 }
 function FullMapPopup({ onClose, mapUrl }) {
@@ -8757,6 +8975,9 @@ var Row = styled9.div`
   overflow: hidden;
   box-sizing: border-box;
   width: 100%;
+  /* Mobile uses the stacked gallery whose "Show less" is position:sticky — overflow:hidden
+     on any ancestor breaks sticky, so open it up here (no carousel to clip on mobile). */
+  @media (max-width: 768px) { overflow: visible; }
 `;
 var PanelBase = styled9.div`
   background: #111111;
@@ -8775,7 +8996,7 @@ var PanelHeader = styled9.div`
   border-bottom: 1px solid rgba(255,255,255,0.1);
   h3 { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
   button {
-    background: transparent; border: 1px solid #D4AF37; color: #D4AF37;
+    background: transparent; border: 1px solid #E6C87E; color: #E6C87E;
     padding: 0.35rem 0.75rem; border-radius: 4px; font-size: 0.75rem;
     cursor: pointer; display: flex; align-items: center; gap: 0.35rem;
   }
@@ -8783,6 +9004,90 @@ var PanelHeader = styled9.div`
 `;
 var GalleryPanel = styled9(PanelBase)`
   min-width: 0; overflow: hidden;
+  /* Allow the sticky "Show less" to pin against the viewport on mobile. */
+  @media (max-width: 768px) { overflow: visible; }
+`;
+var StackWrap = styled9.div`
+  position: relative;
+  width: 100%;
+`;
+var StackViewport = styled9.div`
+  position: relative;
+  width: 100%;
+  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
+`;
+var StackCard = styled9.div`
+  position: absolute;
+  border-radius: 14px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #0c0c0c;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+    left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+    right 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.3s ease;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+`;
+var StackCaption = styled9.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0.9rem 1rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
+  pointer-events: none;
+  h4 { margin: 0; font-size: 0.92rem; font-weight: 600; color: #fff; }
+  p { margin: 0.2rem 0 0; font-size: 0.72rem; color: rgba(255, 255, 255, 0.72); }
+`;
+var StackBadge = styled9.div`
+  position: absolute;
+  top: 0.65rem;
+  right: 0.65rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.32rem 0.6rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(6px);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  color: #fff;
+  font-size: 0.72rem;
+  font-weight: 600;
+`;
+var ShowLessBtn = styled9.button`
+  /* Starts above the first image (right-aligned). As you scroll it pins just below the
+     page's tab bar (--gallery-showless-top, measured live) and rides along; sticky
+     auto-releases at the bottom of the gallery, so it stops at the last image's bottom-right. */
+  position: sticky;
+  top: var(--gallery-showless-top, 116px);
+  z-index: 9;
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  margin: 0 0 0.75rem auto;
+  padding: 0.45rem 1rem;
+  border-radius: 999px;
+  background: rgba(20, 20, 24, 0.92);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: #fff;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+  &:hover { background: rgba(40, 40, 46, 0.95); border-color: #E6C87E; color: #E6C87E; }
 `;
 var Carousel = styled9.div`
   position: relative; width: 100%; overflow: hidden; border-radius: 8px;
@@ -8829,7 +9134,7 @@ var Thumbnail2 = styled9.div`
   min-width: 60px; height: 45px; border-radius: 4px; overflow: hidden;
   cursor: pointer; border: 2px solid transparent; opacity: 0.6;
   transition: all 0.2s ease; flex-shrink: 0;
-  &[data-active='true'] { border-color: #D4AF37; opacity: 1; }
+  &[data-active='true'] { border-color: #E6C87E; opacity: 1; }
   img { width: 100%; height: 100%; object-fit: cover; }
 `;
 var ThumbDivider = styled9.div`
@@ -8843,9 +9148,9 @@ var FixedBtn = styled9.button`
   height: 45px; padding: 0 0.75rem; border-radius: 4px;
   display: flex; align-items: center; justify-content: center; gap: 0.4rem;
   cursor: pointer; transition: all 0.2s ease;
-  border: 1px solid ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.25)"};
+  border: 1px solid ${(p) => p.$active ? "#E6C87E" : "rgba(255,255,255,0.25)"};
   background: ${(p) => p.$active ? "rgba(212,175,55,0.15)" : "rgba(255,255,255,0.06)"};
-  color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.7)"};
+  color: ${(p) => p.$active ? "#E6C87E" : "rgba(255,255,255,0.7)"};
   font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap;
 `;
 var CategoryRow = styled9.div`
@@ -8858,7 +9163,7 @@ var CategoryRow = styled9.div`
     font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
     flex-shrink: 0; white-space: nowrap;
   }
-  button[data-active='true'] { background: rgba(212,175,55,0.2); border-color: #D4AF37; color: #D4AF37; }
+  button[data-active='true'] { background: rgba(212,175,55,0.2); border-color: #E6C87E; color: #E6C87E; }
 `;
 var MapPanel = styled9(PanelBase)`
   min-height: 350px; padding: 1.5rem;
@@ -8875,7 +9180,7 @@ var SuburbProfilePanel = styled9(PanelBase)`
 `;
 var SuburbProfileTitle = styled9.div`
   font-size: 0.65rem;
-  color: #D4AF37;
+  color: #E6C87E;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-weight: 600;
@@ -8927,6 +9232,44 @@ var FullMapOverlay = styled9.div`
   justify-content: center;
   backdrop-filter: blur(4px);
 `;
+var FullVideoOverlay = styled9.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.92);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  video {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    border-radius: 10px;
+    background: #000;
+  }
+`;
+var FullVideoClose = styled9.button`
+  position: absolute;
+  top: max(1rem, env(safe-area-inset-top, 0px));
+  right: 1rem;
+  z-index: 1;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(6px);
+  color: #fff;
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover { background: rgba(40, 40, 46, 0.9); }
+`;
 var FullMapPanel = styled9.div`
   background: #111;
   border: 1px solid rgba(255,255,255,0.08);
@@ -9506,6 +9849,9 @@ var GallerySpecLeft = styled9.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  /* Don't clip the stacked gallery's sticky "Show less" on mobile (overflow:hidden on an
+     ancestor disables position:sticky). */
+  @media (max-width: 768px) { overflow: visible; }
 `;
 var AssetBentoNarratives = styled9.div`
   display: grid;
@@ -9598,7 +9944,7 @@ var TokenDetailsCard = styled9.div`
 `;
 var TokenDetailsTitle = styled9.div`
   font-size: 0.65rem;
-  color: #D4AF37;
+  color: #E6C87E;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   font-weight: 600;
@@ -9645,7 +9991,7 @@ var CopyBtn = styled9.button`
 var DocLinkBtn = styled9.button`
   background: none;
   border: none;
-  color: #D4AF37;
+  color: #E6C87E;
   cursor: pointer;
   padding: 0;
   font-size: inherit;
@@ -9683,7 +10029,7 @@ var StatsRowSection = styled9.div`
 `;
 var StatsRowLabel = styled9.div`
   font-size: 0.65rem;
-  color: #D4AF37;
+  color: #E6C87E;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   font-weight: 600;
@@ -9717,14 +10063,13 @@ var StatsHCellLabel = styled9.span`
 var StatsHCellValue = styled9.span`
   font-size: 0.92rem;
   font-weight: 500;
-  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
+  color: ${(p) => p.$gold ? "#E6C87E" : "#fff"};
   font-variant-numeric: tabular-nums;
 `;
 var StatsTabbedCard = styled9.div`
   background: #111111;
   border: 1px solid rgba(255,255,255,0.1);
   border-radius: 12px;
-  max-width: 400px;
 `;
 var StatsTabBar = styled9.div`
   display: flex;
@@ -9741,10 +10086,10 @@ var StatsTab = styled9.button`
   letter-spacing: 0.1em;
   cursor: pointer;
   transition: color 0.15s, border-color 0.15s;
-  color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.35)"};
-  border-bottom: 2px solid ${(p) => p.$active ? "#D4AF37" : "transparent"};
+  color: ${(p) => p.$active ? "#E6C87E" : "rgba(255,255,255,0.35)"};
+  border-bottom: 2px solid ${(p) => p.$active ? "#E6C87E" : "transparent"};
   margin-bottom: -1px;
-  &:hover { color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.6)"}; }
+  &:hover { color: ${(p) => p.$active ? "#E6C87E" : "rgba(255,255,255,0.6)"}; }
 `;
 var StatsTabContent = styled9.div`
   padding: 0.5rem 1.25rem 1.25rem;
@@ -9757,7 +10102,7 @@ var StatsColumn = styled9.div`
 `;
 var StatsColumnHeader = styled9.div`
   font-size: 0.65rem;
-  color: #D4AF37;
+  color: #E6C87E;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   font-weight: 600;
@@ -9788,7 +10133,7 @@ var StatLabel = styled9.span`
 var StatValue = styled9.span`
   font-size: 0.88rem;
   font-weight: 500;
-  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
+  color: ${(p) => p.$gold ? "#E6C87E" : "#fff"};
   font-variant-numeric: tabular-nums;
 `;
 var NarrativeCard = styled9.div`
@@ -9811,7 +10156,7 @@ var NarrativeIcon = styled9.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #D4AF37;
+  color: #E6C87E;
   flex-shrink: 0;
 `;
 var NarrativeTitle = styled9.div`
@@ -9853,7 +10198,7 @@ var TimelineDot = styled9.div`
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.15)"};
+  background: ${(p) => p.$active ? "#E6C87E" : "rgba(255,255,255,0.15)"};
   border: ${(p) => p.$active ? "2px solid rgba(212,175,55,0.4)" : "none"};
   justify-self: center;
 `;
@@ -9876,7 +10221,7 @@ var TimelinePriceWrap = styled9.div`
 var TimelinePrice = styled9.span`
   font-size: 0.85rem;
   font-weight: 600;
-  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
+  color: ${(p) => p.$gold ? "#E6C87E" : "#fff"};
   font-variant-numeric: tabular-nums;
 `;
 var FeaturesPanel = styled9.div`
@@ -9977,7 +10322,7 @@ var SecurityValue = styled9.span`
 `;
 var SecurityDocLink = styled9.a`
   font-size: 0.82rem;
-  color: #D4AF37;
+  color: #E6C87E;
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;
@@ -9991,7 +10336,7 @@ var DividendHistoryBtn = styled9.button`
   padding: 0.5rem 0;
   background: none;
   border: none;
-  color: #D4AF37;
+  color: #E6C87E;
   font-size: 0.78rem;
   font-weight: 500;
   cursor: pointer;
@@ -10107,7 +10452,7 @@ var STATUS_BG = {
 var STATUS_COLOR = {
   active: "#0ecb81",
   rejected: "#f6465d",
-  pending: "#f2c94c",
+  pending: "#E6C87E",
   historical: "#3861fb",
   expired: "rgba(255,255,255,0.7)"
 };
@@ -10128,7 +10473,7 @@ function PropertyOffers({ offers, totalShares }) {
           "button",
           {
             onClick: () => alert("Coming soon..."),
-            className: "rounded-md px-6 py-[0.65rem] font-semibold text-[0.9rem] cursor-pointer transition-all duration-200 bg-[var(--color-accent,#f0b90b)] border-none text-black hover:bg-[var(--color-accent-hover,#f8d12f)] hover:-translate-y-px",
+            className: "rounded-md px-6 py-[0.65rem] font-semibold text-[0.9rem] cursor-pointer transition-all duration-200 bg-[var(--color-accent,#E6C87E)] border-none text-black hover:bg-[var(--color-accent-hover,#F2D898)] hover:-translate-y-px",
             children: "Make Offer"
           }
         ),
@@ -10136,7 +10481,7 @@ function PropertyOffers({ offers, totalShares }) {
           "button",
           {
             onClick: () => alert("Coming soon..."),
-            className: "rounded-md px-6 py-[0.65rem] font-semibold text-[0.9rem] cursor-pointer transition-all duration-200 bg-transparent border border-[var(--color-accent,#f0b90b)] text-[var(--color-accent,#f0b90b)] hover:bg-[rgba(240,185,11,0.12)] hover:-translate-y-px",
+            className: "rounded-md px-6 py-[0.65rem] font-semibold text-[0.9rem] cursor-pointer transition-all duration-200 bg-transparent border border-[var(--color-accent,#E6C87E)] text-[var(--color-accent,#E6C87E)] hover:bg-[rgba(240,185,11,0.12)] hover:-translate-y-px",
             children: "Enquire"
           }
         )
@@ -10180,7 +10525,7 @@ function PropertyOffers({ offers, totalShares }) {
               "button",
               {
                 onClick: () => alert(`Voted for offer: ${offer.price} by ${offer.buyer}`),
-                className: "bg-[var(--color-accent,#f0b90b)] text-black border-none rounded-md px-5 py-[0.45rem] font-semibold text-[0.78rem] uppercase cursor-pointer transition-all duration-200 hover:bg-[var(--color-accent-hover,#f8d12f)] hover:-translate-y-px",
+                className: "bg-[var(--color-accent,#E6C87E)] text-black border-none rounded-md px-5 py-[0.45rem] font-semibold text-[0.78rem] uppercase cursor-pointer transition-all duration-200 hover:bg-[var(--color-accent-hover,#F2D898)] hover:-translate-y-px",
                 children: "Vote"
               }
             )
@@ -10603,9 +10948,9 @@ var FilterButtonsContainer = styled9.div`
   }
 `;
 var FilterButton = styled9.button`
-  background-color: ${(props) => props.$active ? "var(--color-accent, #f0b90b)" : "transparent"};
+  background-color: ${(props) => props.$active ? "var(--color-accent, #E6C87E)" : "transparent"};
   color: ${(props) => props.$active ? "#000" : "#fff"};
-  border: 1px solid var(--color-accent, #f0b90b);
+  border: 1px solid var(--color-accent, #E6C87E);
   border-radius: 4px;
   padding: 0.4rem 0.8rem;
   font-size: 0.9rem;
@@ -10613,7 +10958,7 @@ var FilterButton = styled9.button`
   transition: all 0.2s;
 
   &:hover {
-    background-color: ${(props) => props.$active ? "var(--color-accent, #f0b90b)" : "rgba(240, 185, 11, 0.1)"};
+    background-color: ${(props) => props.$active ? "var(--color-accent, #E6C87E)" : "rgba(240, 185, 11, 0.1)"};
   }
 
   @media (max-width: 768px) {
@@ -10724,7 +11069,7 @@ var TypeBadge2 = styled9.span`
   background-color: ${(props) => {
   switch (props.$type) {
     case "Listed":
-      return "var(--color-accent, #f0b90b)";
+      return "var(--color-accent, #E6C87E)";
     case "Sale":
       return "rgba(14, 203, 129, 0.15)";
     case "Leased":
@@ -10936,7 +11281,7 @@ var ComingSoonBadge = styled9.span`
   margin-left: auto;
   padding: 0.25rem 0.5rem;
   background: rgba(212, 175, 55, 0.1);
-  color: #D4AF37;
+  color: #E6C87E;
   border-radius: 0.25rem;
   font-size: 0.7rem;
   font-weight: 500;
@@ -11073,8 +11418,8 @@ var SpotsLeft = styled9.span`
 var BookButton = styled9.button`
   padding: 0.4rem 1rem;
   background: transparent;
-  border: 1px solid var(--color-accent, #f0b90b);
-  color: var(--color-accent, #f0b90b);
+  border: 1px solid var(--color-accent, #E6C87E);
+  color: var(--color-accent, #E6C87E);
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 600;
@@ -11135,8 +11480,8 @@ var SignInSub = styled9.div`
 var SignInButton = styled9.button`
   padding: 0.5rem 1.25rem;
   background: transparent;
-  border: 1px solid var(--color-accent, #f0b90b);
-  color: var(--color-accent, #f0b90b);
+  border: 1px solid var(--color-accent, #E6C87E);
+  color: var(--color-accent, #E6C87E);
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 600;
@@ -11259,8 +11604,20 @@ var IPOAssetSelector = styled9.div`
 
   @media (max-width: 768px) {
     flex-wrap: nowrap;
-    padding: 0.6rem 0.75rem;
-    gap: 0.4rem;
+    gap: 0.5rem;
+    /* Curved ribbon extending down from the nav: the box stretches up UNDER the
+       nav (negative margin) while the content is pushed back down (top padding),
+       so the dark background runs all the way to the nav with no visible top edge.
+       The nav has a higher z-index and covers the overhang. Inset to the nav's width. */
+    margin: -2.25rem 0.25rem 0;
+    padding: 3rem 0.9rem 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: none;
+    border-radius: 0 0 14px 14px;
+    background: rgba(20, 24, 31, 0.97);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+    &:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.08); }
   }
 `;
 var AssetThumbnail = styled9.img`
@@ -11272,9 +11629,9 @@ var AssetThumbnail = styled9.img`
   border: 1px solid rgba(255, 255, 255, 0.1);
 
   @media (max-width: 768px) {
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
+    width: 42px;
+    height: 42px;
+    border-radius: 8px;
   }
 `;
 var AssetSelectorDropdown = styled9.div`
@@ -11305,7 +11662,7 @@ var AssetName = styled9.div`
   }
 
   @media (max-width: 768px) {
-    font-size: 1rem;
+    font-size: 1.2rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -11376,7 +11733,7 @@ var MetricLabel = styled9.span`
 var MetricValue = styled9.span`
   font-size: ${(p) => p.$secondary ? "0.95rem" : "1.25rem"};
   font-weight: ${(p) => p.$secondary ? "600" : "700"};
-  color: ${(p) => p.$accent ? "#D4AF37" : p.$secondary ? "rgba(255,255,255,0.7)" : "#fff"};
+  color: ${(p) => p.$accent ? "#E6C87E" : p.$secondary ? "rgba(255,255,255,0.7)" : "#fff"};
 
   @media (max-width: 768px) {
     font-size: ${(p) => p.$secondary ? "0.85rem" : "1.05rem"};
@@ -11621,8 +11978,8 @@ function OfferingProgressCard({
         ] }) : ipoStarted ? /* @__PURE__ */ jsxs(StatusSpan, { $color: "#0ecb81", children: [
           /* @__PURE__ */ jsx(StatusDot3, { $color: "#0ecb81", $pulse: true }),
           "LIVE"
-        ] }) : /* @__PURE__ */ jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
-          /* @__PURE__ */ jsx(StatusDot3, { $color: statusColor || "#D4AF37" }),
+        ] }) : /* @__PURE__ */ jsxs(StatusSpan, { $color: statusColor || "#E6C87E", children: [
+          /* @__PURE__ */ jsx(StatusDot3, { $color: statusColor || "#E6C87E" }),
           statusLabel || "Preparing"
         ] }) })
       ] }),
@@ -11741,8 +12098,8 @@ function OfferingProgressCard({
           " ",
           "AEST"
         ] })
-      ] }) : /* @__PURE__ */ jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
-        /* @__PURE__ */ jsx(StatusDot3, { $color: statusColor || "#D4AF37", $pulse: true }),
+      ] }) : /* @__PURE__ */ jsxs(StatusSpan, { $color: statusColor || "#E6C87E", children: [
+        /* @__PURE__ */ jsx(StatusDot3, { $color: statusColor || "#E6C87E", $pulse: true }),
         isPrivateClient ? "PRE-OFFERING" : statusLabel || "PREPARING"
       ] }) })
     ] }),
@@ -11907,7 +12264,7 @@ var MetricLabel2 = styled9.div`
 var MetricValue2 = styled9.div`
   font-size: 1.5rem;
   font-weight: 700;
-  color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
+  color: ${(p) => p.$accent ? "#E6C87E" : "#fff"};
 `;
 var CountdownCenter = styled9.div`
   text-align: center;
@@ -11933,7 +12290,7 @@ var CountdownNumber = styled9.span`
   font-size: 2rem;
   font-weight: 700;
   font-family: monospace;
-  color: #D4AF37;
+  color: #E6C87E;
   @media (max-width: 768px) {
     font-size: 1.5rem;
   }
@@ -11974,7 +12331,7 @@ var LiveLabel = styled9.div`
 var LivePercent = styled9.div`
   font-size: 2rem;
   font-weight: 600;
-  color: #D4AF37;
+  color: #E6C87E;
   display: flex;
   align-items: center;
   .arrow {
@@ -11988,7 +12345,7 @@ var UnitsValue = styled9.div`
   font-size: clamp(1.25rem, 4vw, 1.75rem);
   font-weight: 700;
   white-space: nowrap;
-  span { color: #D4AF37; }
+  span { color: #E6C87E; }
   small { color: rgba(255,255,255,0.3); font-weight: 700; margin-left: 0.35rem; font-size: inherit; }
 `;
 var ProgressBarOuter = styled9.div`
@@ -12001,7 +12358,7 @@ var ProgressBarOuter = styled9.div`
 `;
 var ProgressBarInner = styled9.div`
   height: 100%;
-  background: linear-gradient(90deg, #D4AF37, #f0b90b);
+  background: linear-gradient(90deg, #E6C87E, #E6C87E);
   border-radius: 6px;
   transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: width;
@@ -12017,7 +12374,7 @@ var ProgressSubscribers = styled9.div`
 `;
 var ProgressAmounts = styled9.div`
   font-weight: 600;
-  .raised { color: #D4AF37; }
+  .raised { color: #E6C87E; }
   .target { color: rgba(255,255,255,0.3); }
 `;
 var CompactContainer = styled9.div`
@@ -12064,7 +12421,7 @@ var HomeSpinner = styled9.span`
   width: 14px;
   height: 14px;
   border: 2px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--color-accent, #f0b90b);
+  border-top-color: var(--color-accent, #E6C87E);
   border-radius: 50%;
   animation: homeSpin 1s linear infinite;
   vertical-align: middle;
@@ -12263,7 +12620,7 @@ function OrderPanel({
       /* @__PURE__ */ jsx("div", { className: "pending-footnote", children: "Your order has been submitted and is being processed. This usually takes a few seconds." })
     ] }) : orderPlacedSuccess ? /* @__PURE__ */ jsxs(OrderSuccessCard, { children: [
       /* @__PURE__ */ jsxs("div", { className: "success-header", children: [
-        /* @__PURE__ */ jsx("div", { className: "icon", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "icon", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#E6C87E", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { children: "Order Complete" }),
           /* @__PURE__ */ jsxs("small", { children: [
@@ -12645,7 +13002,7 @@ var QuickSelectRow = styled9.div`
   button.active {
     background: rgba(212,175,55,0.2);
     border-color: rgba(212,175,55,0.5);
-    color: #D4AF37;
+    color: #E6C87E;
   }
 
   @media (max-width: 480px) {
@@ -12670,7 +13027,7 @@ var DepositButton2 = styled9.button`
   border-radius: 4px;
   padding: 0.25rem 0.5rem;
   font-size: 0.65rem;
-  color: #D4AF37;
+  color: #E6C87E;
   cursor: pointer;
   font-weight: 500;
 `;
@@ -12739,11 +13096,11 @@ var SubscribeButton = styled9.button`
     color: #fff;
   }
   &:not([disabled])[data-green='false'] {
-    background-color: #D4AF37;
+    background-color: #E6C87E;
     color: #0a0a0a;
   }
   &:not([disabled])[data-verify='true'] {
-    background: linear-gradient(135deg, #D4AF37 0%, #b8962e 100%);
+    background: linear-gradient(135deg, #E6C87E 0%, #E6C87E 100%);
     color: #0a0a0a;
     font-weight: 700;
     box-shadow: 0 2px 8px rgba(212,175,55,0.25);
@@ -12788,7 +13145,7 @@ var BalanceValue = styled9.div`
 `;
 var BalanceAction = styled9.div`
   font-size: 0.75rem;
-  color: #D4AF37;
+  color: #E6C87E;
   cursor: pointer;
   font-weight: 500;
   margin-top: 0.5rem;
@@ -12829,7 +13186,7 @@ var OrderPendingCard = styled9.div`
       height: 32px;
       border-radius: 50%;
       border: 2.5px solid rgba(212,175,55,0.15);
-      border-top-color: #D4AF37;
+      border-top-color: #E6C87E;
       animation: spin 0.8s linear infinite;
       flex-shrink: 0;
     }
@@ -12981,7 +13338,7 @@ var OrderSuccessCard = styled9.div`
     strong {
       font-size: 1.05rem;
       font-weight: 700;
-      color: #D4AF37;
+      color: #E6C87E;
       font-family: monospace;
     }
   }
@@ -13000,7 +13357,7 @@ var OrderSuccessCard = styled9.div`
     font-weight: 600;
     font-size: 0.9rem;
     cursor: pointer;
-    background: linear-gradient(135deg, #D4AF37 0%, #b8962e 100%);
+    background: linear-gradient(135deg, #E6C87E 0%, #E6C87E 100%);
     color: #0a0a0a;
     border: none;
     box-shadow: 0 2px 8px rgba(212,175,55,0.25);
@@ -13310,7 +13667,7 @@ var Badge2 = styled9.span`
   text-transform: uppercase;
   letter-spacing: 0.5px;
   background: linear-gradient(135deg, rgba(212,175,55,0.2) 0%, rgba(212,175,55,0.1) 100%);
-  color: #D4AF37;
+  color: #E6C87E;
   border: 1px solid rgba(212,175,55,0.3);
 `;
 var ModalBody = styled9.div`
@@ -13337,7 +13694,7 @@ var ModalRow = styled9.div`
     font-size: 0.95rem;
   }
   strong[data-highlight='true'] {
-    color: #D4AF37;
+    color: #E6C87E;
     font-weight: 600;
   }
 `;
@@ -13459,7 +13816,7 @@ var PrimaryButton = styled9(BaseButton)`
 
 // src/components/property-buy/constants.ts
 var STATUS_COLOR2 = {
-  PENDING: "#D4AF37",
+  PENDING: "#E6C87E",
   LIVE: "#0ecb81",
   CLOSED: "#848e9c",
   CANCELLED: "#f6465d"
@@ -13497,7 +13854,7 @@ var getOrderStatusMeta = (statusRaw) => {
   if (status === "CANCELLED" || status === "CANCELED" || status === "REJECTED") {
     return { color: "#f6465d", bg: "rgba(246,70,93,0.12)" };
   }
-  return { color: "#f0b90b", bg: "rgba(240,185,11,0.15)" };
+  return { color: "#E6C87E", bg: "rgba(240,185,11,0.15)" };
 };
 function EditableField({ value, onCommit, format }) {
   const [editing, setEditing] = useState(false);
@@ -14076,7 +14433,7 @@ function PortfolioActivityPanel({
             const isFailed = s === "SETTLEMENT_FAILED" || s === "REJECTED" || s === "CANCELLED" || s === "CANCELED";
             const isSettling = !isSettled && !isFailed && !!trade.status;
             const settlementLabel = isSettled ? "Settled" : isFailed ? "Settlement Failed" : isSettling ? prettyLabel(trade.status) : "\u2014";
-            const settlementMeta = isSettled ? { color: "#0ecb81", bg: "rgba(14,203,129,0.1)" } : isFailed ? { color: "#f6465d", bg: "rgba(246,70,93,0.12)" } : isSettling ? { color: "#f0b90b", bg: "rgba(240,185,11,0.15)" } : null;
+            const settlementMeta = isSettled ? { color: "#0ecb81", bg: "rgba(14,203,129,0.1)" } : isFailed ? { color: "#f6465d", bg: "rgba(246,70,93,0.12)" } : isSettling ? { color: "#E6C87E", bg: "rgba(240,185,11,0.15)" } : null;
             return /* @__PURE__ */ jsxs(GridRow, { $columns: "1.2fr 0.6fr 0.8fr 1fr 1fr 1fr 1fr 36px", children: [
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(CellText, { $primary: true, children: trade.tokenName }) }),
               /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(SideBadge, { $side: sideLabel(trade.side), children: sideLabel(trade.side) }) }),
@@ -14211,6 +14568,11 @@ var PanelTitle = styled9.h3`
   font-weight: 600;
   color: var(--color-text, #fff);
   margin: 0 0 0.75rem;
+  padding-left: 1rem;
+  /* Redundant on mobile — the tab row already says what this is. Reclaim the space. */
+  @media (max-width: 768px) {
+    display: none;
+  }
 `;
 var TabContainer = styled9.div`
   display: flex;
@@ -14951,9 +15313,9 @@ function PropertyBuy({
   const ipoStarted = ipoStatus === "LIVE" || isPrivateClient && ipoStatus === "PENDING";
   const ipoEnded = ipoStatus === "CLOSED" || ipoStatus === "CANCELLED";
   const statusLabel = ipoStatus === "PENDING" ? "Preparing" : ipoStatus;
-  const statusColor = STATUS_COLOR2[ipoStatus] ?? "#D4AF37";
+  const statusColor = STATUS_COLOR2[ipoStatus] ?? "#E6C87E";
   const displayStatusLabel = isPrivateClient && ipoStatus !== "LIVE" ? "Private Client Access" : statusLabel;
-  const displayStatusColor = isPrivateClient && ipoStatus !== "LIVE" ? "#D4AF37" : statusColor;
+  const displayStatusColor = isPrivateClient && ipoStatus !== "LIVE" ? "#E6C87E" : statusColor;
   const rawSpend = manualOrderAmount !== null ? manualOrderAmount : sliderValue === 100 ? Math.floor(availableBalance / (1 + feeRate)) : Math.round(sliderValue / 100 * availableBalance);
   const tokenQuantity = Math.floor(rawSpend / tokenPrice);
   const feeInUsd = tokenQuantity * tokenPrice * feeRate;
@@ -15375,7 +15737,7 @@ var RecentOrderPanel = styled9.div`
     height: 40px;
     border-radius: 50%;
     border: 2px solid rgba(212,175,55,0.3);
-    border-top-color: #D4AF37;
+    border-top-color: #E6C87E;
     animation: roaSpin 1s linear infinite;
   }
 
@@ -15532,7 +15894,7 @@ var PaymentMethodDetails = styled9.div`
   }
 `;
 var ConfirmButton = styled9.button`
-  background: ${(props) => props.disabled ? "rgba(255, 255, 255, 0.1)" : "linear-gradient(to right, #d4af37, #f2d35b)"};
+  background: ${(props) => props.disabled ? "rgba(255, 255, 255, 0.1)" : "linear-gradient(to right, #E6C87E, #f2d35b)"};
   border: none;
   border-radius: 8px;
   padding: 0.75rem 1.5rem;
@@ -15543,7 +15905,7 @@ var ConfirmButton = styled9.button`
   transition: all 0.2s;
 
   &:hover {
-    background: ${(props) => props.disabled ? "rgba(255, 255, 255, 0.1)" : "linear-gradient(to right, #f2d35b, #d4af37)"};
+    background: ${(props) => props.disabled ? "rgba(255, 255, 255, 0.1)" : "linear-gradient(to right, #f2d35b, #E6C87E)"};
     transform: ${(props) => props.disabled ? "none" : "translateY(-2px)"};
   }
 `;
@@ -15616,7 +15978,7 @@ function PaymentPopup({
         ] }),
         /* @__PURE__ */ jsx("h4", { className: "text-[1.2rem] m-0 mb-4 text-white", children: "Select Payment Method" }),
         /* @__PURE__ */ jsxs(PaymentOption, { $isSelected: selectedPaymentMethod === "tokens", onClick: () => setSelectedPaymentMethod("tokens"), children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 rounded-full bg-white/10 mr-4", style: { color: "#d4af37" }, children: /* @__PURE__ */ jsx(BiCoin, { size: 24 }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 rounded-full bg-white/10 mr-4", style: { color: "#E6C87E" }, children: /* @__PURE__ */ jsx(BiCoin, { size: 24 }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
             /* @__PURE__ */ jsx("div", { className: "font-semibold mb-1", children: "Loaf Tokens" }),
             /* @__PURE__ */ jsx("div", { className: "text-[0.85rem] text-white/70", children: "Pay with your Loaf token balance" })
@@ -15997,9 +16359,9 @@ var OwnerBooking = ({ propertyName, token }) => {
                 ),
                 /* @__PURE__ */ jsx(DateSelectorDropdown, { $isOpen: isDateSelectorOpen, children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-[0.6rem]", children: [
-                    /* @__PURE__ */ jsx("button", { onClick: () => changeYear(-1), className: "bg-none border-none text-[#d4af37] text-[1.1rem] cursor-pointer px-2 py-1 transition-colors duration-200 hover:text-[#f2d35b]", children: "<" }),
+                    /* @__PURE__ */ jsx("button", { onClick: () => changeYear(-1), className: "bg-none border-none text-[#E6C87E] text-[1.1rem] cursor-pointer px-2 py-1 transition-colors duration-200 hover:text-[#f2d35b]", children: "<" }),
                     /* @__PURE__ */ jsx("span", { className: "text-white text-base", children: selectorYear }),
-                    /* @__PURE__ */ jsx("button", { onClick: () => changeYear(1), className: "bg-none border-none text-[#d4af37] text-[1.1rem] cursor-pointer px-2 py-1 transition-colors duration-200 hover:text-[#f2d35b]", children: ">" })
+                    /* @__PURE__ */ jsx("button", { onClick: () => changeYear(1), className: "bg-none border-none text-[#E6C87E] text-[1.1rem] cursor-pointer px-2 py-1 transition-colors duration-200 hover:text-[#f2d35b]", children: ">" })
                   ] }),
                   /* @__PURE__ */ jsx("h4", { className: "m-0 mt-[0.65rem] mb-[0.4rem] text-[0.85rem] uppercase tracking-[0.08em] text-[rgba(212,175,55,0.9)]", children: "Select Month" }),
                   /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: monthNames.map((month, index) => /* @__PURE__ */ jsx(
@@ -16015,8 +16377,8 @@ var OwnerBooking = ({ propertyName, token }) => {
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center flex-wrap", children: [
-              /* @__PURE__ */ jsx("button", { onClick: () => shiftMonth("prev"), className: "bg-[rgba(212,175,55,0.15)] border-none rounded-md text-[#d4af37] w-8 h-8 flex items-center justify-center cursor-pointer transition-colors duration-200 hover:bg-[rgba(212,175,55,0.3)]", children: "<" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => shiftMonth("next"), className: "bg-[rgba(212,175,55,0.15)] border-none rounded-md text-[#d4af37] w-8 h-8 flex items-center justify-center cursor-pointer transition-colors duration-200 hover:bg-[rgba(212,175,55,0.3)]", children: ">" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => shiftMonth("prev"), className: "bg-[rgba(212,175,55,0.15)] border-none rounded-md text-[#E6C87E] w-8 h-8 flex items-center justify-center cursor-pointer transition-colors duration-200 hover:bg-[rgba(212,175,55,0.3)]", children: "<" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => shiftMonth("next"), className: "bg-[rgba(212,175,55,0.15)] border-none rounded-md text-[#E6C87E] w-8 h-8 flex items-center justify-center cursor-pointer transition-colors duration-200 hover:bg-[rgba(212,175,55,0.3)]", children: ">" }),
               /* @__PURE__ */ jsx("button", { onClick: jumpToNextAvailable, className: "bg-[rgba(212,175,55,0.18)] border border-[rgba(212,175,55,0.4)] rounded-md text-[#f2d35b] px-3 py-[0.35rem] text-[0.85rem] cursor-pointer whitespace-nowrap transition-all duration-200 hover:bg-[rgba(212,175,55,0.3)]", children: "Next Available Date" })
             ] })
           ] }),
@@ -16182,7 +16544,7 @@ var OwnerBooking = ({ propertyName, token }) => {
                     " nights"
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "text-[0.95rem] font-semibold text-[#d4af37]", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "text-[0.95rem] font-semibold text-[#E6C87E]", children: [
                       range.tokens.toFixed(4),
                       " Elara"
                     ] }),
@@ -16223,7 +16585,7 @@ var OwnerBooking = ({ propertyName, token }) => {
             {
               onClick: () => setIsPaymentPopupOpen(true),
               className: "mt-2 w-full border-none rounded-xl p-4 text-base font-semibold text-black cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_12px_30px_rgba(212,175,55,0.3)]",
-              style: { background: "linear-gradient(90deg, #d4af37, #f2d35b)" },
+              style: { background: "linear-gradient(90deg, #E6C87E, #f2d35b)" },
               children: "Confirm Reservation"
             }
           )
@@ -16266,8 +16628,8 @@ var DateSelectorDropdown = styled9.div`
 var MonthButton = styled9.button`
   background: ${({ $isSelected }) => $isSelected ? "rgba(212, 175, 55, 0.2)" : "transparent"};
   border: 1px solid
-    ${({ $isSelected }) => $isSelected ? "#d4af37" : "rgba(255, 255, 255, 0.12)"};
-  color: ${({ $isSelected }) => $isSelected ? "#d4af37" : "#fff"};
+    ${({ $isSelected }) => $isSelected ? "#E6C87E" : "rgba(255, 255, 255, 0.12)"};
+  color: ${({ $isSelected }) => $isSelected ? "#E6C87E" : "#fff"};
   border-radius: 6px;
   padding: 0.4rem 0;
   cursor: pointer;
@@ -16352,7 +16714,7 @@ var ReservationCard = styled9.div`
 var ActionButton = styled9.button`
   background: none;
   border: none;
-  color: ${({ $variant }) => $variant === "danger" ? "#ff7676" : "#d4af37"};
+  color: ${({ $variant }) => $variant === "danger" ? "#ff7676" : "#E6C87E"};
   cursor: pointer;
   padding: 0.25rem;
   display: inline-flex;
@@ -16368,7 +16730,7 @@ var musgraveComparisonData = {
   datasets: [
     {
       name: "Musgrave",
-      color: "#D4AF37",
+      color: "#E6C87E",
       data: [100, 115, 125, 118, 130, 145, 155, 165, 180, 195, 210, 225, 240, 225, 235, 231, 265, 285, 300, 310, 320]
     },
     {
@@ -16471,7 +16833,7 @@ function PropertyValuation({
           const year = musgraveComparisonData.labels[ctx.dataIndex];
           if (year === "2006") return "#4CAF50";
           if (year === "2021") return "#FF5722";
-          if (year === "2026") return "#D4AF37";
+          if (year === "2026") return "#E6C87E";
         }
         return dataset.color;
       },
@@ -16495,13 +16857,13 @@ function PropertyValuation({
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(ValuationHeading, { children: "Valuation Model" }),
     /* @__PURE__ */ jsxs(LoafPricingSection, { children: [
-      /* @__PURE__ */ jsx("h2", { style: { color: "#D4AF37", marginBottom: "0" }, children: "Loaf Pricing Model" }),
+      /* @__PURE__ */ jsx("h2", { style: { color: "#E6C87E", marginBottom: "0" }, children: "Loaf Pricing Model" }),
       /* @__PURE__ */ jsx(BlurredContent, { children: /* @__PURE__ */ jsxs(PricingModelCard, { children: [
         /* @__PURE__ */ jsxs(PricingModelHeader, { children: [
           /* @__PURE__ */ jsx(PricingModelTitle, { children: propertyTitle }),
           /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
             /* @__PURE__ */ jsx("div", { style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.7)" }, children: "Valuation as of" }),
-            /* @__PURE__ */ jsx("div", { style: { color: "#D4AF37", fontWeight: "600" }, children: (valSummary?.valuationAsOf ? new Date(valSummary.valuationAsOf) : /* @__PURE__ */ new Date()).toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" }) }),
+            /* @__PURE__ */ jsx("div", { style: { color: "#E6C87E", fontWeight: "600" }, children: (valSummary?.valuationAsOf ? new Date(valSummary.valuationAsOf) : /* @__PURE__ */ new Date()).toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" }) }),
             /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.7)" }, children: [
               (valSummary?.valuationAsOf ? new Date(valSummary.valuationAsOf) : /* @__PURE__ */ new Date()).toLocaleTimeString("en-AU", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, timeZone: "Australia/Sydney" }),
               " AEST"
@@ -16521,7 +16883,7 @@ function PropertyValuation({
                 valSummary.confidence
               ] })
             ] }),
-            /* @__PURE__ */ jsx(PricingDetailValue, { style: { color: "#D4AF37", fontWeight: "bold" }, children: valSummary?.fairValue != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(PricingDetailValue, { style: { color: "#E6C87E", fontWeight: "bold" }, children: valSummary?.fairValue != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
               `$${valSummary.fairValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
               totalUnits > 0 && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.85em", fontWeight: "normal", opacity: 0.8 }, children: [
                 " ($",
@@ -16541,9 +16903,9 @@ function PropertyValuation({
               padding: "10px 16px",
               border: "1px solid rgba(212, 175, 55, 0.2)"
             }, children: [
-              /* @__PURE__ */ jsx("span", { style: { color: "#D4AF37", fontWeight: "600" }, children: valSummary?.valuationStatus ?? "Fair Value" }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#E6C87E", fontWeight: "600" }, children: valSummary?.valuationStatus ?? "Fair Value" }),
               /* @__PURE__ */ jsx("div", { style: {
-                background: "linear-gradient(135deg, #D4AF37 0%, #B8960C 100%)",
+                background: "linear-gradient(135deg, #E6C87E 0%, #B8960C 100%)",
                 color: "white",
                 padding: "5px 12px",
                 borderRadius: "20px",
@@ -16600,7 +16962,7 @@ function PropertyValuation({
         /* @__PURE__ */ jsxs(ValuationIndicator, { children: [
           /* @__PURE__ */ jsxs(ValuationHeader, { children: [
             /* @__PURE__ */ jsx(ValuationTitle, { style: { color: "#4CAF50" }, children: "Undervalued" }),
-            /* @__PURE__ */ jsx(ValuationTitle, { style: { color: "#D4AF37" }, children: "Fair Value" }),
+            /* @__PURE__ */ jsx(ValuationTitle, { style: { color: "#E6C87E" }, children: "Fair Value" }),
             /* @__PURE__ */ jsx(ValuationTitle, { style: { color: "#F44336" }, children: "Overvalued" })
           ] }),
           /* @__PURE__ */ jsxs(ValuationGauge, { children: [
@@ -16608,7 +16970,7 @@ function PropertyValuation({
             /* @__PURE__ */ jsx(GaugeIndicator, { $position: gaugePosition }),
             /* @__PURE__ */ jsxs(GaugePriceTag, { $position: gaugePosition, children: [
               /* @__PURE__ */ jsx("span", { children: "IPO Price" }),
-              /* @__PURE__ */ jsx("span", { style: { color: "#D4AF37" }, children: tokenPriceValue != null ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : /* @__PURE__ */ jsx(Skeleton, { width: 60, height: 12 }) })
+              /* @__PURE__ */ jsx("span", { style: { color: "#E6C87E" }, children: tokenPriceValue != null ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : /* @__PURE__ */ jsx(Skeleton, { width: 60, height: 12 }) })
             ] })
           ] }),
           /* @__PURE__ */ jsxs(ValuationDetails, { children: [
@@ -16623,7 +16985,7 @@ function PropertyValuation({
                 "m)"
               ] })
             ] }) : /* @__PURE__ */ jsx(Skeleton, { width: 90, height: 16 }) }) }),
-            /* @__PURE__ */ jsx(ValuationItem, { children: /* @__PURE__ */ jsx(ValuationValue, { style: { color: "#D4AF37" }, children: tokenPriceValue != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ValuationItem, { children: /* @__PURE__ */ jsx(ValuationValue, { style: { color: "#E6C87E" }, children: tokenPriceValue != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { children: `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` }),
               totalUnits > 0 && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.8rem", fontWeight: "normal", color: "rgba(255,255,255,0.6)" }, children: [
                 "($",
@@ -16683,8 +17045,8 @@ function PropertyValuation({
                   {
                     $active: hoveredSaleYear === marker.year,
                     style: {
-                      backgroundColor: marker.year === "2006" ? "#4CAF50" : marker.year === "2021" ? "#FF5722" : "#D4AF37",
-                      boxShadow: hoveredSaleYear === marker.year ? `0 0 12px ${marker.year === "2006" ? "#4CAF50" : marker.year === "2021" ? "#FF5722" : "#D4AF37"}` : "none"
+                      backgroundColor: marker.year === "2006" ? "#4CAF50" : marker.year === "2021" ? "#FF5722" : "#E6C87E",
+                      boxShadow: hoveredSaleYear === marker.year ? `0 0 12px ${marker.year === "2006" ? "#4CAF50" : marker.year === "2021" ? "#FF5722" : "#E6C87E"}` : "none"
                     }
                   }
                 ),
@@ -16866,7 +17228,7 @@ var ValuationGauge = styled9.div`
 var GaugeBackground = styled9.div`
   height: 8px;
   border-radius: 4px;
-  background: linear-gradient(to right, #4CAF50 0%, #4CAF50 33%, #D4AF37 33%, #D4AF37 66%, #F44336 66%, #F44336 100%);
+  background: linear-gradient(to right, #4CAF50 0%, #4CAF50 33%, #E6C87E 33%, #E6C87E 66%, #F44336 66%, #F44336 100%);
 `;
 var GaugeIndicator = styled9.div`
   position: absolute;
@@ -16875,7 +17237,7 @@ var GaugeIndicator = styled9.div`
   transform: translateX(-50%);
   width: 3px;
   height: 30px;
-  background: #D4AF37;
+  background: #E6C87E;
   border-radius: 2px;
 `;
 var GaugePriceTag = styled9.div`
@@ -17080,7 +17442,7 @@ var FeatureTooltip = styled9.div`
   max-width: 220px;
   padding: 0.65rem 0.85rem;
   border-radius: 10px;
-  border: 1px solid var(--color-accent, #f0b90b);
+  border: 1px solid var(--color-accent, #E6C87E);
   background: rgba(20, 23, 29, 0.95);
   color: white;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
@@ -17093,7 +17455,7 @@ var FeatureTooltip = styled9.div`
   h4 {
     margin: 0 0 0.2rem;
     font-size: 0.9rem;
-    color: var(--color-accent, #f0b90b);
+    color: var(--color-accent, #E6C87E);
     font-weight: 600;
   }
 
@@ -17194,12 +17556,27 @@ var MainImage = styled9.img`
   opacity: ${(p) => p.$visible ? 1 : 0};
   pointer-events: ${(p) => p.$visible ? "auto" : "none"};
   transition: opacity 300ms ease;
+  /* Inset box excludes the bottom thumbnail strip so margin:auto centres the image in the
+     space ABOVE the thumbnails (absolute ignores the parent's padding). */
   position: absolute;
-  inset: 0;
+  top: 24px;
+  left: 24px;
+  right: 24px;
+  bottom: 120px;
   margin: auto;
 
+  /* Desktop: keep the image from dominating the viewport (incl. 14"/16" MacBooks). */
+  @media (min-width: 769px) {
+    max-width: 72%;
+    max-height: 84%;
+  }
+
   @media (max-width: 768px) {
     max-width: 100%;
+    left: 0;
+    right: 0;
+    top: 12px;
+    bottom: 64px;
   }
 `;
 var Hotspot = styled9.button`
@@ -17209,7 +17586,7 @@ var Hotspot = styled9.button`
   border-radius: 50%;
   border: none;
   cursor: pointer;
-  background: var(--color-accent, #f0b90b);
+  background: var(--color-accent, #E6C87E);
   color: #0b0e13;
   transform: translate(-50%, -50%);
   opacity: ${(p) => p.$visible ? 1 : 0};
@@ -17232,6 +17609,10 @@ var ThumbnailStrip = styled9.div`
   overflow-x: auto;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
 
+  /* Hide the native scrollbar — still scrollable via drag/trackpad. */
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+
   @media (max-width: 768px) {
     display: none;
   }
@@ -17241,7 +17622,7 @@ var Thumbnail3 = styled9.button`
   height: 64px;
   border-radius: 6px;
   overflow: hidden;
-  border: 2px solid ${(p) => p.$active ? "var(--color-accent, #f0b90b)" : "transparent"};
+  border: 2px solid ${(p) => p.$active ? "var(--color-accent, #E6C87E)" : "transparent"};
   opacity: ${(p) => p.$active ? 1 : 0.45};
   transition: all 0.2s ease;
   background: transparent;
@@ -17278,21 +17659,8 @@ var NavigationButton = styled9.button`
   }
 `;
 var SliderContainer = styled9.div`
-  position: absolute;
-  bottom: 110px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(860px, 90%);
-  background: rgba(0, 0, 0, 0.8);
-  border-radius: 16px;
-  padding: 0.75rem 1.5rem;
-  backdrop-filter: blur(12px);
-  user-select: none;
-
-  @media (max-width: 768px) {
-    bottom: 70px;
-    width: 85%;
-  }
+  /* Slider/scrubber removed — navigate via thumbnails + arrows (desktop) or swipe (mobile). */
+  display: none;
 `;
 var SliderTrack = styled9.div`
   position: relative;
@@ -17305,7 +17673,7 @@ var SliderProgress = styled9.div`
   position: absolute;
   inset: 0;
   width: ${(p) => p.$progress}%;
-  background: linear-gradient(90deg, var(--color-accent, #f0b90b), rgba(240, 185, 11, 0.5));
+  background: linear-gradient(90deg, var(--color-accent, #E6C87E), rgba(240, 185, 11, 0.5));
   border-radius: inherit;
 `;
 var SliderThumb = styled9.div`
@@ -17316,24 +17684,13 @@ var SliderThumb = styled9.div`
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: var(--color-accent, #f0b90b);
+  background: var(--color-accent, #E6C87E);
   border: 3px solid white;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
 `;
 var SliderLabels = styled9.div`
-  display: flex;
-  justify-content: space-between;
-  margin-top: 0.75rem;
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.7);
-
-  span {
-    cursor: pointer;
-  }
-
-  @media (max-width: 768px) {
-    display: none;
-  }
+  /* Per-image category labels removed from the fullscreen carousel. */
+  display: none;
 `;
 var MobileDots = styled9.div`
   position: absolute;
@@ -17352,7 +17709,7 @@ var MobileDot = styled9.button`
   height: 8px;
   border-radius: 50%;
   border: none;
-  background: ${(p) => p.$active ? "var(--color-accent, #f0b90b)" : "rgba(255,255,255,0.3)"};
+  background: ${(p) => p.$active ? "var(--color-accent, #E6C87E)" : "rgba(255,255,255,0.3)"};
   ${(p) => p.$active && css`
       transform: scale(1.2);
     `}