<!--
============================================================
UNIFIED HOUSE — SUPABASE SCHEMA
Run this in: supabase.com → Your Project → SQL Editor → New Query
============================================================

-- PRODUCTS table
create table products (
  id text primary key,
  name text not null,
  cat text,
  price numeric not null,
  was numeric,
  badge text,
  sale boolean default false,
  stock integer default 0,
  sold integer default 0,
  c1 text default '#c79858',
  c2 text default '#8c3e2c',
  shape integer default 0,
  image text,
  description text,
  created_at timestamptz default now()
);

-- CATEGORIES table
create table categories (
  id text primary key,
  name text not null,
  num text,
  c1 text,
  c2 text,
  shape integer default 0,
  image text
);

-- ORDERS table
create table orders (
  id text primary key,
  name text,
  email text,
  phone text,
  address text,
  city text,
  state text,
  pincode text,
  gstin text,
  items jsonb,
  subtotal numeric,
  shipping numeric,
  tax numeric,
  cgst numeric,
  sgst numeric,
  igst numeric,
  total numeric,
  payment_method text,
  payment_id text,
  invoice_number text,
  invoice_date timestamptz,
  status text default 'pending',
  created_at timestamptz default now()
);

-- INVOICES table (one row per generated invoice — keeps a sequence + audit trail)
create table invoices (
  invoice_number text primary key,
  order_id text references orders(id),
  customer_name text,
  customer_email text,
  customer_address text,
  customer_gstin text,
  place_of_supply text,
  items jsonb,
  subtotal numeric,
  cgst numeric,
  sgst numeric,
  igst numeric,
  total numeric,
  is_interstate boolean default false,
  pdf_data text,
  issued_at timestamptz default now()
);

-- RETURNS table
create table returns (
  id text primary key,
  order_id text,
  customer text,
  email text,
  item_ids jsonb,
  reason text,
  resolution text,
  method text,
  note text,
  photos jsonb,
  status text default 'pending',
  created_at timestamptz default now()
);

-- SITE_CONFIG table (one row, stores all site settings as JSON)
create table site_config (
  id integer primary key default 1,
  site jsonb,
  brands jsonb,
  socials jsonb,
  footer_cols jsonb,
  policy jsonb,
  return_reasons jsonb
);

-- CART table (per-session carts using a session_id)
create table carts (
  session_id text not null,
  product_id text not null,
  qty integer default 1,
  updated_at timestamptz default now(),
  primary key (session_id, product_id)
);

-- ============================================================
-- ROW LEVEL SECURITY (RLS) POLICIES
-- ============================================================

alter table products enable row level security;
create policy "Public read products" on products for select using (true);
create policy "Admin write products" on products for all using (auth.role() = 'authenticated');

alter table categories enable row level security;
create policy "Public read categories" on categories for select using (true);
create policy "Admin write categories" on categories for all using (auth.role() = 'authenticated');

alter table orders enable row level security;
create policy "Public insert orders" on orders for insert with check (true);
create policy "Admin read orders" on orders for select using (auth.role() = 'authenticated');
create policy "Admin update orders" on orders for update using (auth.role() = 'authenticated');

alter table invoices enable row level security;
create policy "Public insert invoices" on invoices for insert with check (true);
create policy "Public read own invoices" on invoices for select using (true);
create policy "Admin manage invoices" on invoices for all using (auth.role() = 'authenticated');

alter table returns enable row level security;
create policy "Public insert returns" on returns for insert with check (true);
create policy "Admin manage returns" on returns for all using (auth.role() = 'authenticated');

alter table site_config enable row level security;
create policy "Public read site_config" on site_config for select using (true);
create policy "Admin write site_config" on site_config for all using (auth.role() = 'authenticated');

alter table carts enable row level security;
create policy "Session cart access" on carts for all using (true);
============================================================
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Supabase JavaScript SDK -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<!--
  ADMIN SETUP: Create an admin user at supabase.com → Your Project
  → Authentication → Users → Invite User
  Enter your email. You will receive a magic link to set your password.
  Use that email + password to log in to the Staff Portal.
-->
<title>UnifieD HousE — A Department for Modern Living | Curated Lifestyle Store India</title>

<!-- ===== SEO META TAGS ===== -->
<meta name="description" content="UnifieD HousE — a curated lifestyle department store for the modern Indian home. Shop fashion, beauty, home décor, and gifts. Free shipping over ₹1,499. 30-day returns.">
<meta name="keywords" content="lifestyle store india, online shopping, women fashion, men fashion, home decor, beauty products, indian designers, curated shopping, bangalore, mumbai, delhi, jaipur">
<meta name="author" content="UnifieD HousE Retail Pvt. Ltd.">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta name="theme-color" content="#b8553d">
<link rel="canonical" href="https://unifiedhouse.in/">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://unifiedhouse.in/">
<meta property="og:title" content="UnifieD HousE — A Department for Modern Living">
<meta property="og:description" content="Curated lifestyle department store for the modern Indian home. Fashion, beauty, home, and small treasures that make a house yours.">
<meta property="og:image" content="https://unifiedhouse.in/og-cover.jpg">
<meta property="og:locale" content="en_IN">
<meta property="og:site_name" content="UnifieD HousE">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@unifiedhouse">
<meta name="twitter:title" content="UnifieD HousE — Curated Lifestyle Store">
<meta name="twitter:description" content="Fashion, beauty, home — thoughtfully curated for modern Indian living.">
<meta name="twitter:image" content="https://unifiedhouse.in/og-cover.jpg">

<!-- Mobile / PWA -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="UnifieD HousE">
<meta name="format-detection" content="telephone=no">

<!-- Schema.org Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Store",
  "name": "UnifieD HousE",
  "description": "Curated lifestyle department store for the modern Indian home.",
  "url": "https://unifiedhouse.in/",
  "logo": "https://unifiedhouse.in/logo.png",
  "image": "https://unifiedhouse.in/og-cover.jpg",
  "address": {
    "@type": "PostalAddress",
    "addressCountry": "IN",
    "addressLocality": "Bangalore",
    "addressRegion": "Karnataka"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+91-80-4567-8900",
    "contactType": "customer service",
    "email": "hello@unifiedhouse.in",
    "areaServed": "IN",
    "availableLanguage": ["English", "Hindi"]
  },
  "sameAs": [
    "https://instagram.com/unifiedhouse",
    "https://pinterest.com/unifiedhouse",
    "https://youtube.com/@unifiedhouse"
  ],
  "paymentAccepted": "Razorpay, UPI, Visa, Mastercard, RuPay, Net Banking",
  "currenciesAccepted": "INR",
  "priceRange": "₹₹"
}
</script>

<!-- Razorpay Checkout SDK (real, ready for live mode) -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<!-- jsPDF + AutoTable for client-side PDF invoice generation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  :root {
    --cream: #f4ede2; --cream-2: #fbf7f0; --ink: #1a1612; --ink-soft: #4a4138;
    --terra: #b8553d; --terra-deep: #8c3e2c; --sage: #8a9a7b; --gold: #c79858;
    --line: #e0d6c5;
    --shadow: 0 1px 2px rgba(26,22,18,0.04), 0 12px 40px -12px rgba(26,22,18,0.18);
    --serif: "Fraunces","Times New Roman",serif; --sans: "Manrope",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body.locked{overflow:hidden}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,textarea,select{font-family:inherit}

  .promo{background:var(--ink);color:var(--cream);font-size:12px;letter-spacing:0.15em;text-transform:uppercase;padding:10px 24px;text-align:center;font-weight:500}
  .promo span{margin:0 18px;opacity:0.85}
  .promo span.hl{color:var(--gold);opacity:1}

  header.site{position:sticky;top:0;z-index:50;background:rgba(244,237,226,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-wrap{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 32px;gap:24px}
  .nav-left,.nav-right{display:flex;align-items:center;gap:28px}
  .nav-right{justify-content:flex-end}
  .nav-link{font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;position:relative;padding:6px 0;transition:color 0.2s}
  .nav-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--terra);transition:width 0.3s ease}
  .nav-link:hover{color:var(--terra)}
  .nav-link:hover::after{width:100%}
  .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
  .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all 0.3s}
  .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  .mob-nav{display:none;position:fixed;inset:0;z-index:200;background:rgba(26,22,18,0.97);backdrop-filter:blur(12px);flex-direction:column;align-items:center;justify-content:center;gap:32px;animation:fade 0.2s ease}
  .mob-nav.open{display:flex}
  .mob-nav .mob-link{font-family:var(--serif);font-size:28px;font-weight:400;color:var(--ink);letter-spacing:0.05em;transition:color 0.2s}
  .mob-nav .mob-link:hover{color:var(--terra)}
  .mob-nav .mob-close{position:absolute;top:20px;right:20px;font-size:28px;color:var(--ink);background:none;border:none;cursor:pointer;padding:8px;line-height:1}
  .brand{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:-0.01em;text-align:center;font-variation-settings:"opsz" 144;line-height:1;white-space:nowrap}
  .brand .em{font-style:italic;color:var(--terra)}
  .brand small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:0.4em;text-transform:uppercase;margin-top:4px;color:var(--ink-soft);font-weight:600}
  .icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s;position:relative}
  .icon-btn:hover{background:rgba(26,22,18,0.06)}
  .icon-btn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6}
  .badge{position:absolute;top:4px;right:4px;background:var(--terra);color:var(--cream);font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}

  .hero{max-width:1400px;margin:0 auto;padding:60px 32px 80px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:end;position:relative}
  .eyebrow{font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--terra);font-weight:700;margin-bottom:24px;display:inline-flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:28px;height:1px;background:var(--terra)}
  .hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(48px,7vw,104px);line-height:0.95;letter-spacing:-0.025em;font-variation-settings:"opsz" 144;margin-bottom:28px}
  .hero h1 em{font-style:italic;font-weight:400;color:var(--terra);font-variation-settings:"opsz" 144}
  .hero p.lead{font-size:17px;color:var(--ink-soft);max-width:460px;margin-bottom:36px;line-height:1.6}
  .cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .btn-primary{background:var(--ink);color:var(--cream);padding:16px 32px;font-size:13px;letter-spacing:0.15em;text-transform:uppercase;font-weight:600;border-radius:100px;display:inline-flex;align-items:center;gap:10px;transition:transform 0.2s,background 0.2s}
  .btn-primary:hover{background:var(--terra);transform:translateY(-2px)}
  .btn-ghost{padding:16px 24px;font-size:13px;letter-spacing:0.15em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--ink);border-radius:0}
  .btn-ghost:hover{color:var(--terra);border-color:var(--terra)}
  .hero-art{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
  .hero-art svg{width:100%;height:100%;display:block}
  .hero-tag{position:absolute;top:24px;left:24px;background:rgba(244,237,226,0.95);padding:8px 16px;border-radius:100px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600}
  .hero-circle{position:absolute;bottom:-28px;left:-28px;width:120px;height:120px;border-radius:50%;background:var(--terra);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:14px;text-align:center;line-height:1.2;animation:spin 22s linear infinite}
  .hero-circle span{display:block;font-family:var(--sans);font-style:normal;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;margin-top:4px}
  @keyframes spin{to{transform:rotate(360deg)}}

  .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--cream-2)}
  .marquee-track{display:flex;gap:60px;animation:scroll 35s linear infinite;white-space:nowrap;width:max-content}
  .marquee-track span{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);display:inline-flex;align-items:center;gap:60px}
  .marquee-track span::after{content:"✦";color:var(--terra);font-style:normal;font-size:14px}
  @keyframes scroll{to{transform:translateX(-50%)}}

  .section{max-width:1400px;margin:0 auto;padding:96px 32px}
  .section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px;gap:32px;flex-wrap:wrap}
  .section-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.5vw,56px);line-height:1;letter-spacing:-0.02em;font-variation-settings:"opsz" 144}
  .section-head h2 em{font-style:italic;color:var(--terra)}
  .section-head p{color:var(--ink-soft);max-width:380px;font-size:15px}
  .view-all{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--ink)}

  .cats{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
  .cat{aspect-ratio:3/4;border-radius:4px;overflow:hidden;position:relative;cursor:pointer;transition:transform 0.4s ease;box-shadow:var(--shadow)}
  .cat:hover{transform:translateY(-6px)}
  .cat svg{width:100%;height:100%;display:block}
  .cat-label{position:absolute;bottom:0;left:0;right:0;padding:24px 20px;color:white;background:linear-gradient(transparent,rgba(0,0,0,0.55))}
  .cat-label small{display:block;font-size:10px;letter-spacing:0.25em;text-transform:uppercase;opacity:0.85;margin-bottom:6px}
  .cat-label h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;letter-spacing:-0.01em}

  .products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .card{cursor:pointer;transition:transform 0.3s}
  .card:hover{transform:translateY(-4px)}
  .card-img{aspect-ratio:3/4;border-radius:4px;overflow:hidden;margin-bottom:16px;position:relative;background:var(--cream-2)}
  .card-img svg{width:100%;height:100%;display:block}
  .card-badge{position:absolute;top:14px;left:14px;background:var(--cream);color:var(--ink);padding:5px 11px;border-radius:100px;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;font-weight:700}
  .card-badge.sale{background:var(--terra);color:white}
  .card-fav{position:absolute;top:12px;right:12px;width:34px;height:34px;background:rgba(255,255,255,0.85);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
  .card-fav:hover{background:white}
  .card-fav svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.6}
  .card-meta{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;font-weight:600}
  .card-name{font-family:var(--serif);font-size:18px;font-weight:500;margin-bottom:6px;line-height:1.25}
  .card-price{display:flex;align-items:center;gap:10px;font-size:14px}
  .card-price .now{font-weight:700}
  .card-price .was{color:var(--ink-soft);text-decoration:line-through;font-size:13px}
  .card-price .off{color:var(--terra);font-weight:700;font-size:12px}

  .editorial{margin:0;padding:0;background:var(--ink);color:var(--cream)}
  .ed-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;min-height:540px;align-items:center}
  .ed-text{padding:80px 64px}
  .ed-text .eyebrow{color:var(--gold)}
  .ed-text .eyebrow::before{background:var(--gold)}
  .ed-text h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-0.02em;margin-bottom:24px}
  .ed-text h2 em{font-style:italic;color:var(--gold)}
  .ed-text p{color:rgba(244,237,226,0.75);max-width:440px;margin-bottom:32px}
  .ed-text .btn-primary{background:var(--cream);color:var(--ink)}
  .ed-text .btn-primary:hover{background:var(--gold);color:var(--ink)}
  .ed-art{height:100%;min-height:540px}
  .ed-art svg{width:100%;height:100%;display:block}

  .brands{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:0 32px;max-width:1400px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .brand-cell{padding:36px 20px;text-align:center;font-family:var(--serif);font-size:22px;font-style:italic;color:var(--ink-soft);border-right:1px solid var(--line);transition:color 0.2s,background 0.2s}
  .brand-cell:last-child{border-right:none}
  .brand-cell:hover{color:var(--terra);background:var(--cream-2)}

  .news{background:var(--cream-2);padding:88px 32px;text-align:center;border-top:1px solid var(--line)}
  .news .inner{max-width:600px;margin:0 auto}
  .news h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.5vw,54px);letter-spacing:-0.02em;line-height:1.05;margin-bottom:16px}
  .news h2 em{font-style:italic;color:var(--terra)}
  .news p{color:var(--ink-soft);margin-bottom:32px}
  .news-form{display:flex;gap:0;max-width:460px;margin:0 auto;border-bottom:1px solid var(--ink);padding-bottom:6px}
  .news-form input{flex:1;padding:12px 0;font-size:15px;background:transparent;border:none;outline:none;color:var(--ink)}
  .news-form input::placeholder{color:var(--ink-soft)}
  .news-form button{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;padding:0 8px}
  .news-form button:hover{color:var(--terra)}

  footer{background:var(--ink);color:var(--cream);padding:80px 32px 32px}
  .foot{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(244,237,226,0.15)}
  .foot-brand .brand{text-align:left;color:var(--cream);font-size:32px}
  .foot-brand .brand small{color:rgba(244,237,226,0.6)}
  .foot-brand p{color:rgba(244,237,226,0.7);margin-top:20px;max-width:280px;font-size:14px}
  .foot h4{font-size:11px;letter-spacing:0.25em;text-transform:uppercase;font-weight:700;margin-bottom:20px;color:var(--gold)}
  .foot ul{list-style:none}
  .foot ul li{margin-bottom:12px}
  .foot ul a{color:rgba(244,237,226,0.75);font-size:14px;transition:color 0.2s}
  .foot ul a:hover{color:var(--gold)}
  .foot-bottom{max-width:1400px;margin:32px auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:rgba(244,237,226,0.5);font-size:12px}
  .foot-bottom a:hover{color:var(--gold)}
  .admin-link{color:rgba(244,237,226,0.4);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;border:1px solid rgba(244,237,226,0.2);padding:6px 14px;border-radius:100px;transition:all 0.2s}
  .admin-link:hover{color:var(--gold);border-color:var(--gold)}

  .modal-bg{position:fixed;inset:0;z-index:300;background:rgba(26,22,18,0.55);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;animation:fade 0.25s ease}
  .modal-bg.show{display:flex}
  @media(max-width:640px){
    .modal-bg{align-items:flex-end;padding:0}
    .modal-bg .modal{border-radius:16px 16px 0 0;max-height:88vh;width:100%;max-width:100%;animation:slideUp 0.3s cubic-bezier(0.32,0.72,0,1)}
    @keyframes slideUp{from{transform:translateY(100%);opacity:0}}
  }
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{background:var(--cream);border-radius:8px;padding:48px;width:100%;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,0.4);animation:pop 0.3s cubic-bezier(0.2,0.9,0.4,1.1);position:relative;max-height:90vh;overflow-y:auto}
  .modal.wide{max-width:720px}
  @keyframes pop{from{transform:scale(0.94) translateY(8px);opacity:0}}
  .modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s;z-index:5}
  .modal-close:hover{background:rgba(26,22,18,0.08)}
  .modal h3{font-family:var(--serif);font-weight:400;font-size:32px;letter-spacing:-0.01em;line-height:1.1;margin-bottom:8px}
  .modal h3 em{font-style:italic;color:var(--terra)}
  .modal .sub{color:var(--ink-soft);font-size:14px;margin-bottom:28px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;margin-bottom:8px;color:var(--ink-soft)}
  .field input,.field textarea,.field select{width:100%;padding:14px 16px;font-size:15px;background:var(--cream-2);border:1px solid var(--line);border-radius:4px;outline:none;color:var(--ink);transition:border 0.2s}
  .field textarea{resize:vertical;min-height:80px}
  .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--terra)}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .modal .btn-primary{width:100%;justify-content:center;margin-top:8px}
  .modal-foot{text-align:center;margin-top:20px;font-size:13px;color:var(--ink-soft)}
  .modal-foot a{color:var(--terra);font-weight:600;cursor:pointer}
  .err-msg{background:rgba(184,85,61,0.1);color:var(--terra-deep);border:1px solid rgba(184,85,61,0.3);padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:16px;display:none}
  .err-msg.show{display:block;animation:shake 0.4s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  .lock-icon{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}

  .step-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:8px}
  .step-dot{flex:1;height:3px;background:var(--line);border-radius:100px;transition:background 0.3s}
  .step-dot.done,.step-dot.active{background:var(--terra)}
  .step-label{font-size:11px;color:var(--ink-soft);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;font-weight:600}
  .step-num{color:var(--terra);margin-right:10px;font-weight:700}
  .opt-card{border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:10px;cursor:pointer;transition:all 0.2s;display:flex;gap:14px;align-items:center}
  .opt-card:hover{border-color:var(--terra);background:var(--cream-2)}
  .opt-card.selected{border-color:var(--terra);background:rgba(184,85,61,0.06)}
  .opt-card .opt-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;transition:all 0.2s;position:relative}
  .opt-card.selected .opt-radio{border-color:var(--terra)}
  .opt-card.selected .opt-radio::after{content:"";position:absolute;inset:3px;background:var(--terra);border-radius:50%}
  .opt-card .opt-icon{width:40px;height:40px;border-radius:8px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .opt-card .opt-icon svg{width:20px;height:20px;stroke:var(--terra);fill:none;stroke-width:1.6}
  .opt-card h5{font-family:var(--serif);font-size:16px;font-weight:500;margin-bottom:2px}
  .opt-card p{font-size:12px;color:var(--ink-soft)}
  .step-actions{display:flex;gap:12px;margin-top:24px}
  .btn-back{flex:1;padding:14px;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;font-weight:700;border:1px solid var(--ink);border-radius:100px;transition:all 0.2s}
  .btn-back:hover{background:var(--ink);color:var(--cream)}
  .btn-next{flex:1.5;padding:14px;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;font-weight:700;background:var(--ink);color:var(--cream);border-radius:100px;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .btn-next:hover{background:var(--terra)}
  .btn-next:disabled{opacity:0.4;cursor:not-allowed}
  .item-row{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:6px;margin-bottom:10px;align-items:center;cursor:pointer;transition:all 0.2s}
  .item-row:hover{background:var(--cream-2)}
  .item-row.selected{border-color:var(--terra);background:rgba(184,85,61,0.06)}
  .item-thumb{width:60px;height:76px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--cream-2)}
  .item-thumb svg{width:100%;height:100%;display:block}
  .item-info{flex:1}
  .item-info .nm{font-family:var(--serif);font-size:16px;font-weight:500;margin-bottom:2px}
  .item-info .meta{font-size:12px;color:var(--ink-soft)}
  .item-info .pr{font-size:13px;font-weight:700;margin-top:4px}
  .item-check{width:22px;height:22px;border-radius:4px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s}
  .item-row.selected .item-check{background:var(--terra);border-color:var(--terra)}
  .item-row.selected .item-check::after{content:"✓";color:white;font-size:14px;font-weight:700}
  .photo-up{border:2px dashed var(--line);border-radius:8px;padding:32px;text-align:center;cursor:pointer;transition:all 0.2s;margin-bottom:12px;display:block}
  .photo-up:hover{border-color:var(--terra);background:var(--cream-2)}
  .photo-up svg{width:28px;height:28px;stroke:var(--terra);fill:none;stroke-width:1.6;margin-bottom:8px}
  .photo-up p{font-size:13px;color:var(--ink-soft)}
  .photo-preview{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .photo-preview .ph{width:70px;height:70px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--line);position:relative}
  .photo-preview .ph button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:white;font-size:12px;display:flex;align-items:center;justify-content:center}
  .summary-box{background:var(--cream-2);border-radius:6px;padding:20px;margin:16px 0}
  .summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border-bottom:1px solid var(--line);gap:16px}
  .summary-row:last-child{border-bottom:none}
  .summary-row span:first-child{color:var(--ink-soft)}
  .summary-row span:last-child{font-weight:600;text-align:right;max-width:60%}
  .rma-box{background:var(--ink);color:var(--cream);padding:28px;border-radius:8px;text-align:center;margin:20px 0}
  .rma-box .label{font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
  .rma-box .num{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:0.04em;margin-bottom:12px}
  .rma-box .hint{font-size:12px;color:rgba(244,237,226,0.7)}

  #adminPanel{position:fixed;inset:0;z-index:200;background:#0f0d0a;color:var(--cream);display:none;overflow-y:auto}
  #adminPanel.show{display:block}
  .admin-top{background:#1a1612;border-bottom:1px solid #2a241d;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
  .admin-brand{font-family:var(--serif);font-size:22px;display:flex;align-items:center;gap:10px}
  .admin-brand .em{font-style:italic;color:var(--gold)}
  .admin-brand small{background:var(--terra);color:white;font-family:var(--sans);font-size:9px;padding:3px 8px;border-radius:3px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700}
  .admin-user{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(244,237,226,0.7)}
  .admin-user .av{width:34px;height:34px;border-radius:50%;background:var(--terra);color:white;display:flex;align-items:center;justify-content:center;font-weight:700}
  .view-store{background:rgba(199,152,88,0.15);color:var(--gold);padding:8px 14px;border-radius:4px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;transition:background 0.2s}
  .view-store:hover{background:rgba(199,152,88,0.25)}
  .logout{background:rgba(184,85,61,0.15);color:var(--terra);padding:8px 14px;border-radius:4px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;transition:background 0.2s}
  .logout:hover{background:rgba(184,85,61,0.25)}
  .admin-body{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 64px)}
  .admin-side{background:#1a1612;border-right:1px solid #2a241d;padding:24px 16px}
  .side-label{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(244,237,226,0.4);padding:0 12px;margin:24px 0 12px;font-weight:700}
  .side-label:first-child{margin-top:0}
  .side-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:6px;font-size:14px;color:rgba(244,237,226,0.75);cursor:pointer;transition:all 0.15s;margin-bottom:2px}
  .side-item:hover{background:rgba(244,237,226,0.05);color:var(--cream)}
  .side-item.active{background:var(--terra);color:white}
  .side-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
  .side-item .count{margin-left:auto;background:rgba(244,237,226,0.15);color:var(--cream);font-size:10px;padding:2px 7px;border-radius:100px;font-weight:700}
  .side-item.active .count{background:rgba(255,255,255,0.25)}
  .admin-main{padding:32px 40px}
  .admin-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px;flex-wrap:wrap}
  .admin-h h1{font-family:var(--serif);font-weight:400;font-size:32px;letter-spacing:-0.01em}
  .admin-h .meta{color:rgba(244,237,226,0.5);font-size:13px}
  .admin-h .actions{display:flex;gap:10px}
  .btn-add{background:var(--terra);color:white;padding:10px 18px;border-radius:6px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;transition:background 0.2s;display:inline-flex;align-items:center;gap:6px}
  .btn-add:hover{background:var(--terra-deep)}
  .btn-save{background:var(--sage);color:white;padding:10px 18px;border-radius:6px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;transition:opacity 0.2s}
  .btn-save:hover{opacity:0.85}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
  .stat{background:#1a1612;border:1px solid #2a241d;padding:22px;border-radius:8px;transition:border-color 0.2s}
  .stat:hover{border-color:var(--terra)}
  .stat-label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(244,237,226,0.5);font-weight:600;margin-bottom:12px}
  .stat-val{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1;margin-bottom:8px}
  .stat-trend{font-size:12px}
  .stat-trend.up{color:var(--sage)}
  .stat-trend.down{color:var(--terra)}
  .panel-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
  .panel{background:#1a1612;border:1px solid #2a241d;border-radius:8px;padding:24px;margin-bottom:24px}
  .panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
  .panel-h h3{font-family:var(--serif);font-size:20px;font-weight:500}
  .panel-h .more{font-size:12px;color:var(--gold);cursor:pointer}
  table{width:100%;border-collapse:collapse}
  th{text-align:left;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(244,237,226,0.5);font-weight:700;padding:8px 12px;border-bottom:1px solid #2a241d}
  td{padding:14px 12px;font-size:13px;border-bottom:1px solid #2a241d;color:rgba(244,237,226,0.85);vertical-align:middle}
  tr:last-child td{border-bottom:none}
  tr.clickable{cursor:pointer;transition:background 0.15s}
  tr.clickable:hover td{background:rgba(244,237,226,0.03)}
  td .pill{display:inline-block;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
  .pill.shipped,.pill.approved{background:rgba(138,154,123,0.2);color:var(--sage)}
  .pill.processing,.pill.pending{background:rgba(199,152,88,0.2);color:var(--gold)}
  .pill.delivered,.pill.received{background:rgba(244,237,226,0.1);color:rgba(244,237,226,0.7)}
  .pill.cancelled,.pill.rejected,.pill.refunded{background:rgba(184,85,61,0.2);color:var(--terra)}
  .activity-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #2a241d}
  .activity-item:last-child{border-bottom:none}
  .act-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:7px;flex-shrink:0}
  .activity-item p{font-size:13px;line-height:1.5}
  .activity-item time{font-size:11px;color:rgba(244,237,226,0.4)}

  .admin-form{max-width:720px}
  .admin-form .field label{color:rgba(244,237,226,0.6)}
  .admin-form .field input,.admin-form .field textarea,.admin-form .field select{background:#0f0d0a;border-color:#2a241d;color:var(--cream)}
  .admin-form .field input:focus,.admin-form .field textarea:focus,.admin-form .field select:focus{border-color:var(--terra)}
  .grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
  .editor-card{background:#1a1612;border:1px solid #2a241d;border-radius:8px;overflow:hidden;transition:all 0.2s}
  .editor-card:hover{border-color:var(--terra)}
  .editor-card-img{aspect-ratio:3/4;background:#0f0d0a;position:relative;overflow:hidden}
  .editor-card-img svg{width:100%;height:100%;display:block}
  .editor-card-body{padding:14px}
  .editor-card-body h4{font-family:var(--serif);font-size:16px;font-weight:500;margin-bottom:4px}
  .editor-card-body .ec-meta{font-size:11px;color:rgba(244,237,226,0.5);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px}
  .editor-card-actions{display:flex;gap:6px}
  .ec-btn{flex:1;padding:7px 10px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;border-radius:4px;transition:all 0.2s}
  .ec-btn.edit{background:rgba(199,152,88,0.15);color:var(--gold)}
  .ec-btn.edit:hover{background:rgba(199,152,88,0.3)}
  .ec-btn.del{background:rgba(184,85,61,0.15);color:var(--terra)}
  .ec-btn.del:hover{background:rgba(184,85,61,0.3)}
  .swatch-row{display:flex;gap:10px;align-items:center}
  .swatch{width:48px;height:36px;border-radius:4px;border:1px solid #2a241d;cursor:pointer;flex-shrink:0;overflow:hidden}
  .swatch input{width:100%;height:100%;border:none;padding:0;cursor:pointer}
  .return-detail{background:#0f0d0a;border:1px solid #2a241d;padding:24px;border-radius:8px;margin-top:20px}
  .return-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px}
  .rd-block h5{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(244,237,226,0.5);font-weight:700;margin-bottom:10px}
  .rd-block p{font-size:14px;line-height:1.6}
  .rd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  .rd-btn{padding:10px 16px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;border-radius:6px;transition:all 0.2s}
  .rd-btn.approve{background:var(--sage);color:white}
  .rd-btn.reject{background:var(--terra);color:white}
  .rd-btn.next{background:var(--gold);color:var(--ink)}
  .rd-btn.refund{background:var(--cream);color:var(--ink)}
  .rd-btn:hover{opacity:0.85}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream);padding:14px 24px;border-radius:100px;font-size:13px;box-shadow:0 10px 40px rgba(0,0,0,0.3);z-index:500;opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-8px)}

  @media (max-width:1100px){
    .nav-left,.nav-right{gap:18px}
    .nav-link.hide-md{display:none}
    .hero{grid-template-columns:1fr;padding:40px 24px 60px}
    .hero-art{max-width:500px}
    .ed-grid{grid-template-columns:1fr}
    .ed-art{min-height:320px}
    .ed-text{padding:56px 32px}
    .cats{grid-template-columns:repeat(3,1fr)}
    .products{grid-template-columns:repeat(3,1fr)}
    .brands{grid-template-columns:repeat(3,1fr)}
    .brand-cell:nth-child(3n){border-right:none}
    .foot{grid-template-columns:1fr 1fr}
    .panel-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)}
    .admin-body{grid-template-columns:1fr}
    .admin-side{display:flex;overflow-x:auto;padding:12px;border-right:none;border-bottom:1px solid #2a241d}
    .side-label{display:none}
    .side-item{white-space:nowrap;margin-bottom:0;margin-right:4px}
    .return-detail-grid{grid-template-columns:1fr}
    .field-row{grid-template-columns:1fr}
  }
  @media (max-width:640px){
    .nav-wrap{padding:14px 18px;gap:12px}
    .nav-left{display:none!important}
    .brand{font-size:22px}
    .promo{font-size:11px;padding:8px 16px}
    .promo span{margin:0 6px;display:inline-block}
    .section{padding:56px 20px}
    .hero h1{font-size:40px}
    .hero p.lead{font-size:15px}
    .cats,.products,.brands{grid-template-columns:repeat(2,1fr)}
    .brand-cell{border-right:none}
    .brand-cell:nth-child(odd){border-right:1px solid var(--line)}
    .foot{grid-template-columns:1fr;gap:32px}
    .modal{padding:28px 18px;border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:92vh;width:100%;max-width:100%}
    .admin-main{padding:14px}
    .stats{grid-template-columns:1fr 1fr}
    .admin-h h1{font-size:20px}
    .panel{padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .panel-h{margin-bottom:12px}
    .panel-h h3{font-size:14px}
    table{min-width:520px}
    .cart-item{flex-wrap:wrap;gap:10px}
    .cart-item-info{min-width:0;flex:1}
    .checkout-grid{grid-template-columns:1fr}
    .summary-row{font-size:13px}
    .upi-apps{grid-template-columns:repeat(2,1fr);gap:8px}
    .upi-app{padding:12px 6px;font-size:10px}
    .upi-app .ic{width:28px;height:28px;font-size:14px}
    .admin-side{padding:8px;gap:4px}
    .side-item{padding:8px 12px;font-size:11px}
    .admin-form{max-width:100%}
    .field-row{grid-template-columns:1fr}
    .field input,.field textarea,.field select{font-size:14px}
    .btn-save{width:100%;text-align:center}
    .grid-cards{grid-template-columns:repeat(2,1fr);gap:10px}
    .editor-card-body{padding:10px}
    .editor-card-body h4{font-size:13px}
    .stat-card{padding:16px}
    .ec-btn{padding:6px 8px;font-size:10px}
    .pd-grid{grid-template-columns:1fr}
    .foot-bottom{flex-direction:column;text-align:center;gap:8px}
    .hamburger{display:flex!important}
  }
  @media(max-width:380px){
    .brand{font-size:18px}
    .hero h1{font-size:32px}
    .cats,.products{grid-template-columns:repeat(2,1fr)}
    .stats{grid-template-columns:1fr}
    .upi-apps{grid-template-columns:repeat(2,1fr)}
    .admin-h h1{font-size:17px}
    .modal{padding:22px 14px}
  }

  /* ========== CHECKOUT / PAYMENT ========== */
  .checkout-grid {
    display: grid; grid-template-columns: 1.2fr 0.8fr;
    gap: 32px; margin-top: 12px;
  }
  @media (max-width: 720px) { .checkout-grid { grid-template-columns: 1fr; } }
  .pay-tabs {
    display: flex; gap: 4px; background: var(--cream-2);
    padding: 4px; border-radius: 8px; margin-bottom: 18px;
  }
  .pay-tab {
    flex: 1; padding: 10px; font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
    border-radius: 6px; transition: all 0.2s; color: var(--ink-soft);
  }
  .pay-tab.active { background: var(--ink); color: var(--cream); }
  .pay-pane { display: none; }
  .pay-pane.active { display: block; animation: fade 0.2s ease; }

  .upi-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
  .upi-app {
    padding: 14px 8px; text-align: center;
    border: 1px solid var(--line); border-radius: 6px;
    cursor: pointer; transition: all 0.2s; font-size: 11px; font-weight: 600;
  }
  .upi-app:hover { border-color: var(--terra); background: var(--cream-2); transform: translateY(-2px); }
  .upi-app .ic {
    width: 32px; height: 32px; margin: 0 auto 6px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 14px;
  }
  .upi-app .ic.gp { background: linear-gradient(135deg,#4285f4,#34a853); }
  .upi-app .ic.pp { background: linear-gradient(135deg,#553cb6,#8b5cf6); }
  .upi-app .ic.pt { background: linear-gradient(135deg,#00baf2,#0a3478); }
  .upi-app .ic.bh { background: linear-gradient(135deg,#f26f21,#982e1d); }

  .qr-mock {
    width: 160px; height: 160px;
    background: repeating-conic-gradient(var(--ink) 0% 25%, white 0% 50%) 50% / 12px 12px;
    margin: 12px auto; border: 6px solid var(--ink); border-radius: 8px;
    position: relative;
  }
  .qr-mock::after {
    content: ""; position: absolute; inset: 30%;
    background: var(--cream); border: 4px solid var(--ink); border-radius: 8px;
  }

  .card-form .field-row.three { grid-template-columns: 1fr 1fr 1fr; }
  .card-input-row { position: relative; }
  .card-input-row .card-brand {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 700; color: var(--ink-soft);
    letter-spacing: 0.1em; text-transform: uppercase;
  }

  .razorpay-banner {
    background: linear-gradient(135deg, #072654, #2d4cdb);
    color: white; padding: 18px 20px; border-radius: 8px;
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
  }
  .razorpay-banner h5 {
    font-family: var(--serif); font-size: 18px; font-weight: 500; margin-bottom: 4px;
  }
  .razorpay-banner p { font-size: 12px; opacity: 0.85; }
  .razorpay-logo {
    width: 48px; height: 48px; background: white; color: #072654;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 22px; flex-shrink: 0;
  }
  .pay-summary {
    background: var(--cream-2); padding: 20px; border-radius: 8px;
  }
  .pay-summary h4 {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-soft); margin-bottom: 14px;
  }
  .pay-line {
    display: flex; justify-content: space-between; padding: 8px 0;
    font-size: 14px; border-bottom: 1px solid var(--line);
  }
  .pay-line:last-of-type { border-bottom: none; }
  .pay-total {
    display: flex; justify-content: space-between;
    padding: 14px 0 4px; font-family: var(--serif);
    font-size: 22px; font-weight: 500; border-top: 2px solid var(--ink);
    margin-top: 8px;
  }
  .secure-badges {
    display: flex; gap: 12px; align-items: center;
    margin-top: 14px; font-size: 11px; color: var(--ink-soft);
    letter-spacing: 0.05em;
  }
  .secure-badges svg { width: 14px; height: 14px; stroke: var(--sage); fill: none; stroke-width: 2; }

  .pay-success {
    text-align: center; padding: 12px 0;
  }
  .pay-success .check-anim {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--sage); margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    animation: pop-in 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.4);
  }
  @keyframes pop-in { from { transform: scale(0); } }
  .pay-success .check-anim svg { width: 40px; height: 40px; stroke: white; fill: none; stroke-width: 3; }

  /* SEO admin */
  .seo-preview {
    background: white; border: 1px solid var(--line); border-radius: 6px;
    padding: 14px; max-width: 500px;
  }
  .seo-preview .url { font-size: 13px; color: #4a7c4a; margin-bottom: 4px; }
  .seo-preview h4 { font-size: 18px; color: #1a0dab; margin-bottom: 4px; font-weight: 400; line-height: 1.3; }
  .seo-preview p { font-size: 13px; color: #4d5156; line-height: 1.5; }

  /* PRODUCT DETAIL MODAL */
  .pd-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  @media (max-width:720px){ .pd-grid{grid-template-columns:1fr} }
  .pd-img { aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:var(--cream-2); }
  .pd-img img, .pd-img svg { width:100%; height:100%; object-fit:cover; display:block; }
  .pd-cat { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; font-weight:600; }
  .pd-name { font-family:var(--serif); font-weight:400; font-size:32px; letter-spacing:-0.01em; line-height:1.1; margin-bottom:12px; }
  .pd-price { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
  .pd-price .now { font-size:26px; font-weight:700; }
  .pd-price .was { color:var(--ink-soft); text-decoration:line-through; font-size:16px; }
  .pd-price .off { color:var(--terra); font-weight:700; font-size:12px; background:rgba(184,85,61,0.1); padding:4px 10px; border-radius:4px; letter-spacing:0.1em; text-transform:uppercase; }
  .pd-desc { color:var(--ink-soft); margin-bottom:20px; line-height:1.7; font-size:14px; }
  .qty-selector { display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:100px; overflow:hidden; margin-bottom:8px; }
  .qty-selector button { padding:10px 16px; font-weight:700; font-size:16px; transition:background 0.2s; }
  .qty-selector button:hover { background:var(--cream-2); }
  .qty-selector span { padding:10px 18px; font-weight:700; min-width:40px; text-align:center; }
  .pd-stock { font-size:13px; color:var(--ink-soft); margin-bottom:20px; }
  .pd-stock.low { color:var(--terra); }
  .pd-actions { display:grid; gap:10px; }
  .btn-buy { background:var(--terra); color:white; padding:16px; font-size:13px; letter-spacing:0.15em; text-transform:uppercase; font-weight:700; border-radius:100px; transition:background 0.2s; }
  .btn-buy:hover { background:var(--terra-deep); }

  /* CART DRAWER */
  .cart-empty { text-align:center; padding:40px 20px; }
  .cart-empty svg { width:48px; height:48px; stroke:var(--ink-soft); fill:none; stroke-width:1.5; margin-bottom:16px; }
  .cart-empty p { color:var(--ink-soft); margin-bottom:20px; }
  .cart-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
  .cart-item:last-of-type { border-bottom:none; }
  .cart-item-img { width:70px; height:90px; border-radius:4px; overflow:hidden; flex-shrink:0; background:var(--cream-2); }
  .cart-item-img img, .cart-item-img svg { width:100%; height:100%; object-fit:cover; display:block; }
  .cart-item-info { flex:1; min-width:0; }
  .cart-item-info h5 { font-family:var(--serif); font-size:16px; font-weight:500; margin-bottom:4px; }
  .cart-item-info .meta { font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
  .cart-item-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .cart-qty { display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:100px; overflow:hidden; }
  .cart-qty button { padding:5px 11px; font-weight:700; font-size:14px; }
  .cart-qty button:hover { background:var(--cream-2); }
  .cart-qty span { padding:0 10px; font-weight:700; font-size:13px; min-width:24px; text-align:center; }
  .cart-item-price { font-weight:700; font-size:14px; }
  .cart-item-remove { font-size:11px; color:var(--terra); cursor:pointer; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; background:none; padding:4px 0; }
  .cart-summary { background:var(--cream-2); padding:20px; border-radius:6px; margin-top:18px; }
  .cart-summary .row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; }
  .cart-summary .row.muted { color:var(--ink-soft); font-size:13px; }
  .cart-summary .total { font-family:var(--serif); font-size:22px; padding-top:12px; margin-top:8px; border-top:2px solid var(--ink); font-weight:500; }

  /* IMAGE UPLOAD (admin) */
  .image-upload { display:flex; gap:14px; align-items:flex-start; background:#0f0d0a; border:1px dashed #2a241d; padding:14px; border-radius:6px; }
  .image-upload .preview { width:100px; height:130px; border-radius:6px; overflow:hidden; background:#1a1612; flex-shrink:0; position:relative; }
  .image-upload .preview img, .image-upload .preview svg { width:100%; height:100%; object-fit:cover; display:block; }
  .image-upload .preview .empty { display:flex; align-items:center; justify-content:center; height:100%; color:rgba(244,237,226,0.4); font-size:11px; text-align:center; padding:8px; }
  .image-upload .controls { flex:1; min-width:0; }
  .image-upload .controls p { font-size:12px; color:rgba(244,237,226,0.5); margin-bottom:10px; line-height:1.5; }
  .image-upload button { padding:8px 14px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; border-radius:4px; transition:all 0.2s; margin-right:6px; margin-bottom:6px; }
  .image-upload button.upload { background:var(--gold); color:var(--ink); }
  .image-upload button.upload:hover { opacity:0.85; }
  .image-upload button.clear { background:rgba(184,85,61,0.15); color:var(--terra); }
  .image-upload button.clear:hover { background:rgba(184,85,61,0.3); }

  /* Supabase loading bar */
  #dbLoadingBar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--terra), var(--gold), var(--terra));
    background-size: 200% 100%;
    animation: loadbar 1.2s linear infinite;
    z-index: 9999; display: none;
  }
  #dbLoadingBar.show { display: block; }
  @keyframes loadbar { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
</style>
</head>
<body>

<div id="dbLoadingBar"></div>

<div class="promo" id="promoBar"></div>

<!-- Mobile Nav Overlay -->
<div class="mob-nav" id="mobNav">
  <button class="mob-close" onclick="closeMobNav()">✕</button>
  <nav id="mobNavLinks"></nav>
  <a class="mob-link" href="#shop" onclick="closeMobNav()">Shop</a>
  <a class="mob-link" href="#story" onclick="closeMobNav()">Our Story</a>
</div>

<header class="site">
  <div class="nav-wrap">
    <nav class="nav-left" id="navLeft"></nav>
    <a class="brand" href="#top" id="brandTop"></a>
    <div class="nav-right">
      <button class="hamburger" id="hamburgerBtn" aria-label="Menu" onclick="toggleMobNav()">
        <span></span><span></span><span></span>
      </button>
      <button class="icon-btn" aria-label="Search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
      <button class="icon-btn" aria-label="Track Order / Returns" title="Track Order / Returns" onclick="openReturns()"><svg viewBox="0 0 24 24"><path d="M3 7h13a4 4 0 0 1 0 8H7m0 0 3 3m-3-3 3-3"/></svg></button>
      <button class="icon-btn" aria-label="Account" onclick="openModal('loginModal')"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg></button>
      <button class="icon-btn" aria-label="Wishlist"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9-9.5C1.5 7 4 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 3 0 5.5 3 4 7.5-2 5-9 9.5-9 9.5z"/></svg></button>
      <button class="icon-btn" aria-label="Cart" onclick="openCart()"><svg viewBox="0 0 24 24"><path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg><span class="badge" id="cartBadge" style="display:none">0</span></button>
    </div>
  </div>
</header>

<section class="hero" id="top">
  <div>
    <span class="eyebrow" id="heroEyebrow"></span>
    <h1 id="heroTitle"></h1>
    <p class="lead" id="heroLead"></p>
    <div class="cta-row">
      <a class="btn-primary" href="#new" id="heroCta"><span></span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      <a class="btn-ghost" href="#story">Our Story</a>
    </div>
  </div>
  <div class="hero-art">
    <span class="hero-tag" id="heroTag"></span>
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#d4a574"/><stop offset="100%" stop-color="#8c3e2c"/></linearGradient>
        <radialGradient id="hg2" cx="0.3" cy="0.3" r="0.7"><stop offset="0%" stop-color="#f4ede2" stop-opacity="0.5"/><stop offset="100%" stop-color="#f4ede2" stop-opacity="0"/></radialGradient>
      </defs>
      <rect width="400" height="500" fill="url(#hg)"/>
      <rect width="400" height="500" fill="url(#hg2)"/>
      <circle cx="200" cy="180" r="55" fill="#f4ede2" opacity="0.92"/>
      <path d="M120 250 Q200 220 280 250 L290 480 L110 480 Z" fill="#1a1612" opacity="0.88"/>
      <path d="M155 260 Q200 245 245 260 L255 360 L145 360 Z" fill="#f4ede2" opacity="0.15"/>
      <circle cx="180" cy="170" r="3" fill="#1a1612"/><circle cx="220" cy="170" r="3" fill="#1a1612"/>
      <path d="M190 195 Q200 200 210 195" stroke="#1a1612" stroke-width="1.5" fill="none"/>
      <circle cx="155" cy="195" r="4" fill="#c79858"/><circle cx="245" cy="195" r="4" fill="#c79858"/>
      <path d="M40 60 Q80 40 120 60" stroke="#f4ede2" stroke-width="1" fill="none" opacity="0.4"/>
      <path d="M280 440 Q330 420 370 440" stroke="#f4ede2" stroke-width="1" fill="none" opacity="0.4"/>
    </svg>
    <div class="hero-circle"><div>NEW <br/>Season<span>Just In</span></div></div>
  </div>
</section>

<div class="marquee">
  <div class="marquee-track">
    <span>Curated Living</span><span>Quiet Luxury</span><span>Made in India</span><span>Sustainably Sourced</span><span>Thoughtfully Designed</span>
    <span>Curated Living</span><span>Quiet Luxury</span><span>Made in India</span><span>Sustainably Sourced</span><span>Thoughtfully Designed</span>
  </div>
</div>

<section class="section" id="shop">
  <div class="section-head">
    <div><span class="eyebrow">Shop by Department</span><h2>Five floors,<br/>one <em>house.</em></h2></div>
    <p>Step inside our flagship — every department curated by experts who actually use what they sell.</p>
  </div>
  <div class="cats" id="catGrid"></div>
</section>

<section class="section" id="new" style="padding-top:0">
  <div class="section-head">
    <div><span class="eyebrow">Just Landed</span><h2>This week's <em>arrivals.</em></h2></div>
    <a class="view-all" href="#">View Everything →</a>
  </div>
  <div class="products" id="productGrid"></div>
</section>

<section class="editorial" id="story">
  <div class="ed-grid">
    <div class="ed-text">
      <span class="eyebrow" id="edEyebrow"></span>
      <h2 id="edTitle"></h2>
      <p id="edBody"></p>
      <a class="btn-primary" href="#" id="edCta"></a>
    </div>
    <div class="ed-art">
      <svg viewBox="0 0 700 540" preserveAspectRatio="xMidYMid slice">
        <defs><linearGradient id="eg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#c79858"/><stop offset="50%" stop-color="#b8553d"/><stop offset="100%" stop-color="#1a1612"/></linearGradient></defs>
        <rect width="700" height="540" fill="url(#eg)"/>
        <path d="M250 100 L250 360 Q250 100 350 100 Q450 100 450 360 L450 360 Z" fill="#f4ede2" opacity="0.9"/>
        <path d="M320 380 Q310 360 320 340 Q330 320 330 300 Q330 280 350 270 Q370 280 370 300 Q370 320 380 340 Q390 360 380 380 Z" fill="#1a1612"/>
        <path d="M350 270 Q345 230 360 200 M360 200 Q370 180 385 175 M360 200 Q345 185 335 195" stroke="#8a9a7b" stroke-width="2" fill="none"/>
        <circle cx="385" cy="175" r="6" fill="#f4ede2"/><circle cx="335" cy="195" r="5" fill="#f4ede2"/>
        <line x1="100" y1="430" x2="600" y2="430" stroke="#1a1612" stroke-width="1.5"/>
      </svg>
    </div>
  </div>
</section>

<div class="brands" id="brandStrip"></div>

<section class="news">
  <div class="inner">
    <span class="eyebrow">The Letter</span>
    <h2 id="newsTitle"></h2>
    <p id="newsBody"></p>
    <form class="news-form" onsubmit="event.preventDefault();toast('Thanks for subscribing.')">
      <input type="email" placeholder="your@email.com" required />
      <button type="submit">Subscribe →</button>
    </form>
  </div>
</section>

<footer>
  <div class="foot" id="footMain"></div>
  <div class="foot-bottom">
    <span id="footCopy"></span>
    <span>
      <a href="#" style="margin-right:18px">Privacy</a>
      <a href="#" style="margin-right:18px">Terms</a>
      <a href="#" style="margin-right:18px" onclick="event.preventDefault();openReturns()">Returns</a>
      <a href="#" class="admin-link" onclick="event.preventDefault();openModal('adminLoginModal')">⚿ Staff Portal</a>
    </span>
  </div>
</footer>

<div class="modal-bg" id="loginModal">
  <div class="modal">
    <button class="modal-close" onclick="closeModal('loginModal')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    <h3>Welcome <em>back.</em></h3>
    <p class="sub">Sign in to track orders, save favourites, and access member events.</p>
    <form onsubmit="event.preventDefault();toast('Demo storefront — user login is illustrative.');closeModal('loginModal')">
      <div class="field"><label>Email</label><input type="email" placeholder="your@email.com" required></div>
      <div class="field"><label>Password</label><input type="password" placeholder="••••••••" required></div>
      <button type="submit" class="btn-primary">Sign In</button>
    </form>
    <div class="modal-foot">New here? <a>Create an account</a></div>
  </div>
</div>

<div class="modal-bg" id="adminLoginModal">
  <div class="modal">
    <button class="modal-close" onclick="closeModal('adminLoginModal')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    <div class="lock-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></div>
    <h3 style="text-align:center">Staff <em>Portal</em></h3>
    <p class="sub" style="text-align:center">Sign in with your Supabase admin account.</p>
    <div class="err-msg" id="adminErr">Incorrect email or password. Please try again.</div>
    <form onsubmit="adminLogin(event)">
      <div class="field"><label>Admin Email</label><input type="email" id="adminUser" placeholder="admin@unifiedhouse.in" required autocomplete="email"></div>
      <div class="field"><label>Password</label><input type="password" id="adminPass" required autocomplete="current-password"></div>
      <button type="submit" class="btn-primary">Authenticate</button>
    </form>
    <div class="modal-foot">Set up your admin account in Supabase → Authentication → Users.</div>
  </div>
</div>

<!-- ===== PRODUCT DETAIL MODAL ===== -->
<div class="modal-bg" id="productModal">
  <div class="modal wide">
    <button class="modal-close" onclick="closeModal('productModal')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    <div id="productModalBody"></div>
  </div>
</div>

<!-- ===== CART DRAWER MODAL ===== -->
<div class="modal-bg" id="cartModal">
  <div class="modal" style="max-width:520px">
    <button class="modal-close" onclick="closeModal('cartModal')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    <div id="cartModalBody"></div>
  </div>
</div>

<!-- ===== CHECKOUT / PAYMENT MODAL ===== -->
<div class="modal-bg" id="checkoutModal">
  <div class="modal wide">
    <button class="modal-close" onclick="closeModal('checkoutModal')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    <div id="checkoutBody"></div>
  </div>
</div>

<div class="modal-bg" id="returnsModal">
  <div class="modal wide">
    <button class="modal-close" onclick="closeModal('returnsModal')"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    <div id="returnsStepNav" class="step-nav"></div>
    <div id="returnsStepBody"></div>
  </div>
</div>

<div class="modal-bg" id="editModal">
  <div class="modal" style="background:#1a1612;color:var(--cream);max-width:540px">
    <button class="modal-close" onclick="closeModal('editModal')" style="color:var(--cream)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    <div id="editModalBody" class="admin-form"></div>
  </div>
</div>

<div id="adminPanel">
  <div class="admin-top">
    <div class="admin-brand">Unifie<span class="em">D</span> Hous<span class="em">E</span><small>Admin</small></div>
    <div class="admin-user">
      <button class="view-store" onclick="hideAdmin();window.scrollTo(0,0)">View Store</button>
      <div class="av">A</div>
      <button class="logout" onclick="adminLogout()">Sign Out</button>
    </div>
  </div>
  <div class="admin-body">
    <aside class="admin-side" id="adminSide"></aside>
    <main class="admin-main" id="adminMain"></main>
  </div>
</div>

<div class="toast" id="toast"></div>

<script>
// ⚙️ SETUP: Replace SUPABASE_URL and SUPABASE_ANON_KEY with values from
// supabase.com → your project → Settings → API
const SUPABASE_URL = 'REPLACE_WITH_YOUR_SUPABASE_PROJECT_URL';
const SUPABASE_ANON_KEY = 'REPLACE_WITH_YOUR_SUPABASE_ANON_KEY';

// Initialize Supabase client (gracefully handles unconfigured state)
let supabaseClient = null;
try {
  if (typeof supabase !== 'undefined' && SUPABASE_URL && !SUPABASE_URL.startsWith('REPLACE_')) {
    supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
  }
} catch (e) { console.warn('Supabase init failed:', e); }
const SUPA_OK = () => supabaseClient !== null;

const DB_KEY = 'unifiedHouseDB_v3';

const defaultDB = {
  site: {
    brandFirst:"Unifie", brandLast:"Hous", tagline:"A Department for Modern Living",
    promoBar:["Complimentary shipping over ₹1,499","The Spring Edit is here","Now in 12 Cities across India"],
    heroEyebrow:"Spring / Summer Collection",
    heroTitle:"Live <em>beautifully.</em><br/>Live <em>well.</em>",
    heroLead:"A curated department store for the modern Indian home — fashion, beauty, furnishings, and the small treasures that make a house yours.",
    heroCtaLabel:"Shop the Edit", heroTag:"Editor's Pick · 04",
    edEyebrow:"The House Edit · Vol. 04",
    edTitle:"Stories from <em>our houses</em>, to yours.",
    edBody:"Inside the homes of our favourite makers, designers, and quiet rebels — and the small, considered choices that turn a house into a home worth coming back to.",
    edCta:"Read the Journal",
    newsTitle:"Quiet emails, <em>good things.</em>",
    newsBody:"One letter a fortnight — new arrivals, journal pieces, and the rare private sale. Unsubscribe whenever you like.",
    footAbout:"Curated lifestyle department store. Headquartered in Bangalore, with stores across 12 Indian cities.",
    footCopy:"© 2026 UnifieD HousE Retail Pvt. Ltd. · All rights reserved.",
    contactEmail:"hello@unifiedhouse.in", contactPhone:"+91 80 4567 8900",
    legalName:"UnifieD HousE Retail Pvt. Ltd.",
    gstin:"29AAACU1234A1Z5",
    pan:"AAACU1234A",
    sellerAddress:"4th Floor, Indiranagar 100ft Road, Bangalore — 560038, Karnataka",
    sellerState:"Karnataka",
    invoicePrefix:"UH/2026/"
  },
  socials:[
    {name:"Instagram",url:"https://instagram.com/unifiedhouse"},
    {name:"Pinterest",url:"https://pinterest.com/unifiedhouse"},
    {name:"YouTube",url:"https://youtube.com/@unifiedhouse"},
    {name:"Spotify",url:"https://spotify.com/unifiedhouse"}
  ],
  footerCols:[
    {title:"Shop",links:["Women","Men","Kids","Home","Beauty"]},
    {title:"House",links:["Our Story","Stores","Journal","Sustainability","Careers"]},
    {title:"Care",links:["Contact","Shipping","Returns","Size Guide","FAQs"]}
  ],
  categories:[
    {id:"c1",name:"Women",num:"01",c1:"#c79858",c2:"#8c3e2c",shape:0},
    {id:"c2",name:"Men",num:"02",c1:"#4a4138",c2:"#1a1612",shape:1},
    {id:"c3",name:"Kids",num:"03",c1:"#e8c4a0",c2:"#b8553d",shape:2},
    {id:"c4",name:"Home",num:"04",c1:"#8a9a7b",c2:"#4a5a48",shape:3},
    {id:"c5",name:"Beauty",num:"05",c1:"#e8b4b8",c2:"#b8553d",shape:4}
  ],
  products:[
    {id:"p1",name:"Linen Shirt — Ecru",cat:"Women",price:3490,was:4490,badge:"New",sale:false,stock:24,sold:142,c1:"#d4a574",c2:"#8c3e2c",shape:0},
    {id:"p2",name:"Hand-thrown Vase",cat:"Home",price:2150,was:null,badge:null,sale:false,stock:12,sold:74,c1:"#8a9a7b",c2:"#4a5a48",shape:1},
    {id:"p3",name:"Merino Knit — Charcoal",cat:"Men",price:5890,was:7490,badge:"-22%",sale:true,stock:18,sold:98,c1:"#1a1612",c2:"#4a4138",shape:2},
    {id:"p4",name:"Block-print Cushion Set",cat:"Home",price:1890,was:null,badge:"New",sale:false,stock:67,sold:88,c1:"#e8c4a0",c2:"#b8553d",shape:3},
    {id:"p5",name:"Cotton Kurta — Indigo",cat:"Men",price:2790,was:null,badge:null,sale:false,stock:31,sold:55,c1:"#c79858",c2:"#8c3e2c",shape:4},
    {id:"p6",name:"Silk Scarf — Saffron",cat:"Women",price:3290,was:4290,badge:"-23%",sale:true,stock:31,sold:62,c1:"#e8b4b8",c2:"#b8553d",shape:0},
    {id:"p7",name:"Brass Candle Holder",cat:"Home",price:1490,was:null,badge:null,sale:false,stock:42,sold:36,c1:"#b8a888",c2:"#5a4838",shape:1},
    {id:"p8",name:"Rosewater Mist",cat:"Beauty",price:890,was:null,badge:"New",sale:false,stock:88,sold:128,c1:"#a8b8a0",c2:"#3a4a38",shape:2}
  ],
  brands:["Maison Indigo","Khadi & Co.","Atelier Six","North & Aisle","Lumière","Studio Tenth"],
  orders:[
    {id:"#UH-10847",name:"Aarav Mehta",email:"aarav.m@example.in",total:8490,status:"shipped",items:["p1","p7"]},
    {id:"#UH-10846",name:"Priya Iyer",email:"priya.i@example.in",total:12340,status:"processing",items:["p3","p2"]},
    {id:"#UH-10845",name:"Rohan Kapoor",email:"rohan.k@example.in",total:3290,status:"delivered",items:["p6"]},
    {id:"#UH-10844",name:"Sara D'Souza",email:"sara.d@example.in",total:19880,status:"processing",items:["p3","p4","p5"]},
    {id:"#UH-10843",name:"Kabir Sharma",email:"kabir.s@example.in",total:1890,status:"cancelled",items:["p4"]},
    {id:"#UH-10842",name:"Meera Nair",email:"meera.n@example.in",total:6750,status:"shipped",items:["p1","p8"]}
  ],
  returns:[
    {id:"RMA-50124",orderId:"#UH-10845",customer:"Rohan Kapoor",email:"rohan.k@example.in",itemIds:["p6"],reason:"Color different from photos",resolution:"Refund to original payment",method:"Free courier pickup",note:"",photos:[],status:"approved",createdAt:"2026-04-28T10:15:00Z",timeline:[{t:"2026-04-28T10:15:00Z",e:"Return request submitted"},{t:"2026-04-28T11:02:00Z",e:"Approved by admin · Pickup scheduled"}]},
    {id:"RMA-50123",orderId:"#UH-10842",customer:"Meera Nair",email:"meera.n@example.in",itemIds:["p1"],reason:"Wrong size / poor fit",resolution:"Exchange for different size",method:"Drop-off at partner location",note:"Need size M instead of S",photos:[],status:"pending",createdAt:"2026-04-30T09:45:00Z",timeline:[{t:"2026-04-30T09:45:00Z",e:"Return request submitted"}]}
  ],
  policy:{windowDays:30,freeReturnShipping:true,refundDays:5,bonusForStoreCredit:10,text:"Free returns within 30 days for unworn, unwashed items in original condition. Beauty products are non-returnable once opened. Refunds processed within 5 business days of receipt."},
  returnReasons:["Wrong size / poor fit","Different from description","Color different from photos","Quality not as expected","Damaged in shipping","Defective product","Wrong item received","Changed my mind","Late delivery / no longer needed","Found a better price elsewhere"],
  cart:[]
};

let db;

/* ============== SUPABASE DATA LAYER ============== */
function getSessionId() {
  let sid = localStorage.getItem('uh_session_id');
  if (!sid) {
    sid = 'sess_' + Math.random().toString(36).slice(2) + Date.now().toString(36);
    localStorage.setItem('uh_session_id', sid);
  }
  return sid;
}

function showLoading() { const el = document.getElementById('dbLoadingBar'); if (el) el.classList.add('show'); }
function hideLoading() { const el = document.getElementById('dbLoadingBar'); if (el) el.classList.remove('show'); }

// Load all data from Supabase on page init
async function loadDB() {
  if (!SUPA_OK()) {
    // Supabase not configured — fall back to defaults so site still renders
    console.warn('Supabase not configured. Using default demo data.');
    return;
  }
  showLoading();
  try {
    const [prodRes, catRes, configRes] = await Promise.all([
      supabaseClient.from('products').select('*').order('created_at', { ascending: true }),
      supabaseClient.from('categories').select('*'),
      supabaseClient.from('site_config').select('*').eq('id', 1).maybeSingle()
    ]);
    if (prodRes.data && prodRes.data.length) db.products = prodRes.data;
    if (catRes.data && catRes.data.length) db.categories = catRes.data;
    if (configRes.data) {
      if (configRes.data.site) db.site = configRes.data.site;
      if (configRes.data.brands) db.brands = configRes.data.brands;
      if (configRes.data.socials) db.socials = configRes.data.socials;
      if (configRes.data.footer_cols) db.footerCols = configRes.data.footer_cols;
      if (configRes.data.policy) db.policy = configRes.data.policy;
      if (configRes.data.return_reasons) db.returnReasons = configRes.data.return_reasons;
    }
    await loadCart();
    renderAll();
  } catch (err) {
    console.error('Supabase loadDB error:', err);
    toast('⚠ Could not connect to database. Showing demo data.');
  } finally {
    hideLoading();
  }
}

// Load cart from Supabase
async function loadCart() {
  if (!SUPA_OK()) return;
  try {
    const { data } = await supabaseClient.from('carts').select('*').eq('session_id', getSessionId());
    db.cart = (data || []).map(row => ({ productId: row.product_id, qty: row.qty }));
  } catch (e) { console.error('loadCart:', e); }
}

// Upsert a product row
async function saveProductDB(productObj) {
  if (!SUPA_OK()) return;
  try {
    const { error } = await supabaseClient.from('products').upsert(productObj, { onConflict: 'id' });
    if (error) throw error;
  } catch (err) {
    console.error('saveProductDB:', err);
    toast('⚠ Save failed. Check your connection.');
  }
}
async function deleteProductDB(id) {
  if (!SUPA_OK()) return;
  try { await supabaseClient.from('products').delete().eq('id', id); }
  catch (err) { console.error('deleteProductDB:', err); toast('⚠ Delete failed.'); }
}

// Upsert a category row
async function saveCategoryDB(catObj) {
  if (!SUPA_OK()) return;
  try {
    const { error } = await supabaseClient.from('categories').upsert(catObj, { onConflict: 'id' });
    if (error) throw error;
  } catch (err) { console.error('saveCategoryDB:', err); toast('⚠ Save failed.'); }
}
async function deleteCategoryDB(id) {
  if (!SUPA_OK()) return;
  try { await supabaseClient.from('categories').delete().eq('id', id); }
  catch (err) { console.error('deleteCategoryDB:', err); toast('⚠ Delete failed.'); }
}

// Save the single site_config row
async function saveSiteConfig() {
  if (!SUPA_OK()) return;
  showLoading();
  try {
    const { error } = await supabaseClient.from('site_config').upsert({
      id: 1,
      site: db.site,
      brands: db.brands,
      socials: db.socials,
      footer_cols: db.footerCols,
      policy: db.policy,
      return_reasons: db.returnReasons
    }, { onConflict: 'id' });
    if (error) throw error;
  } catch (err) {
    console.error('saveSiteConfig:', err);
    toast('⚠ Save failed. Check your connection.');
  } finally { hideLoading(); }
}

// Save / update / remove a single cart item
async function saveCartItem(productId, qty) {
  if (!SUPA_OK()) return;
  try {
    if (qty <= 0) {
      await supabaseClient.from('carts').delete()
        .eq('session_id', getSessionId()).eq('product_id', productId);
    } else {
      await supabaseClient.from('carts').upsert({
        session_id: getSessionId(), product_id: productId, qty
      }, { onConflict: 'session_id,product_id' });
    }
  } catch (err) { console.error('saveCartItem:', err); }
}

// Legacy alias — most existing code calls saveDB(); now it just no-ops because
// targeted save functions handle persistence per data type.
function saveDB() { /* persistence handled by targeted Supabase save functions */ }
function resetDB(){
  if(!confirm("Reset everything to defaults? All your edits will be lost.")) return;
  db=JSON.parse(JSON.stringify(defaultDB));
  db.cart=[];
  if (SUPA_OK()) {
    showLoading();
    Promise.all([
      supabaseClient.from('products').delete().neq('id', '__none__'),
      supabaseClient.from('categories').delete().neq('id', '__none__'),
      supabaseClient.from('site_config').delete().eq('id', 1)
    ]).then(()=>{
      // Re-seed defaults
      return Promise.all([
        supabaseClient.from('products').insert(defaultDB.products),
        supabaseClient.from('categories').insert(defaultDB.categories),
        saveSiteConfig()
      ]);
    }).then(()=>{
      hideLoading();
      renderAll();
      if(currentAdminView)renderAdminMain(currentAdminView);
      toast("Site reset to defaults.");
    }).catch(err=>{
      hideLoading();
      console.error('resetDB:', err);
      toast("⚠ Reset failed.");
    });
  } else {
    renderAll();
    if(currentAdminView)renderAdminMain(currentAdminView);
    toast("Site reset (local only — Supabase not configured).");
  }
}

// Initialize with defaults for instant paint, then async-load from Supabase
db = JSON.parse(JSON.stringify(defaultDB));
db.cart = [];

const $=id=>document.getElementById(id);
const uid=p=>p+'-'+Math.random().toString(36).slice(2,8);
const inr=n=>'₹'+Number(n||0).toLocaleString('en-IN');
const escapeHtml=s=>String(s||'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'})[c]);
function toast(msg){const t=$('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2200)}

const PRODUCT_SHAPES=[
  c2=>`<rect x="60" y="80" width="180" height="240" fill="#f4ede2" opacity="0.92"/><path d="M80 100 Q150 90 220 100 L210 280 L90 280 Z" fill="${c2}" opacity="0.85"/>`,
  c2=>`<circle cx="150" cy="180" r="80" fill="#f4ede2" opacity="0.92"/><circle cx="150" cy="180" r="50" fill="${c2}" opacity="0.6"/>`,
  c2=>`<rect x="100" y="60" width="100" height="280" rx="12" fill="#f4ede2" opacity="0.92"/><rect x="120" y="80" width="60" height="60" fill="${c2}"/>`,
  c2=>`<path d="M100 280 Q150 100 200 280 Z" fill="#f4ede2" opacity="0.92"/><path d="M120 280 Q150 180 180 280 Z" fill="${c2}" opacity="0.7"/>`,
  c2=>`<ellipse cx="150" cy="180" rx="70" ry="100" fill="#f4ede2" opacity="0.92"/><ellipse cx="150" cy="180" rx="40" ry="70" fill="${c2}" opacity="0.6"/>`
];
function productSVG(p,k){const i=k||p.id;const s=(p.shape||0)%PRODUCT_SHAPES.length;return `<svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="pg-${i}" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="${p.c1}"/><stop offset="100%" stop-color="${p.c2}"/></linearGradient></defs><rect width="300" height="400" fill="url(#pg-${i})"/>${PRODUCT_SHAPES[s](p.c2)}</svg>`}

const CAT_SHAPES=[
  c2=>`<ellipse cx="150" cy="100" rx="40" ry="50" fill="#f4ede2" opacity="0.9"/><path d="M90 180 L210 180 L230 380 L70 380 Z" fill="#1a1612" opacity="0.85"/><path d="M110 200 Q150 190 190 200 L195 240 L105 240 Z" fill="${c2}" opacity="0.5"/>`,
  c2=>`<rect x="100" y="80" width="100" height="100" rx="6" fill="#8a9a7b" opacity="0.85"/><rect x="80" y="180" width="140" height="200" fill="#f4ede2" opacity="0.92"/><line x1="150" y1="180" x2="150" y2="380" stroke="#1a1612" stroke-width="1.5"/>`,
  c2=>`<circle cx="150" cy="140" r="48" fill="#f4ede2"/><path d="M105 200 L195 200 L210 380 L90 380 Z" fill="#8a9a7b"/><circle cx="135" cy="135" r="3" fill="#1a1612"/><circle cx="165" cy="135" r="3" fill="#1a1612"/><path d="M140 155 Q150 160 160 155" stroke="#1a1612" stroke-width="2" fill="none"/>`,
  c2=>`<rect x="60" y="220" width="180" height="120" fill="#f4ede2" opacity="0.92"/><rect x="80" y="240" width="60" height="80" fill="#c79858"/><rect x="160" y="240" width="60" height="60" fill="#1a1612"/><circle cx="190" cy="180" r="30" fill="#c79858" opacity="0.7"/>`,
  c2=>`<rect x="120" y="80" width="60" height="180" rx="4" fill="#f4ede2"/><rect x="130" y="60" width="40" height="30" fill="#1a1612"/><rect x="80" y="180" width="40" height="120" rx="6" fill="#c79858"/><rect x="180" y="200" width="40" height="100" rx="6" fill="#1a1612"/>`
];
function categorySVG(c){const i=(c.shape||0)%CAT_SHAPES.length;return `<svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="cg-${c.id}" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="${c.c1}"/><stop offset="100%" stop-color="${c.c2}"/></linearGradient></defs><rect width="300" height="400" fill="url(#cg-${c.id})"/>${CAT_SHAPES[i](c.c2)}</svg>`}

function productImageHTML(p){
  if(p.image) return `<img src="${p.image}" alt="${escapeHtml(p.name)}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block">`;
  return productSVG(p);
}
function categoryImageHTML(c){
  if(c.image) return `<img src="${c.image}" alt="${escapeHtml(c.name)}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block">`;
  return categorySVG(c);
}

function renderBrandHeader(){const s=db.site;$('brandTop').innerHTML=`${escapeHtml(s.brandFirst)}<span class="em">D</span> ${escapeHtml(s.brandLast)}<span class="em">E</span><small>${escapeHtml(s.tagline)}</small>`}
function renderNav(){
  // Header nav links auto-generate from categories. First 2 always visible, rest hidden on tablets.
  $('navLeft').innerHTML = db.categories.map((c,i)=>
    `<a class="nav-link${i>=2?' hide-md':''}" href="#shop">${escapeHtml(c.name)}</a>`
  ).join('');
  const mobNavLinks=document.getElementById('mobNavLinks');
  if(mobNavLinks) mobNavLinks.innerHTML=db.categories.map(c=>
    `<a class="mob-link" href="#shop" onclick="closeMobNav()">${escapeHtml(c.name)}</a>`
  ).join('');
}
function renderPromo(){$('promoBar').innerHTML=db.site.promoBar.map((p,i)=>(i>0?'<span class="hl">★</span>':'')+`<span>${escapeHtml(p)}</span>`).join('')}
function renderHero(){const s=db.site;$('heroEyebrow').textContent=s.heroEyebrow;$('heroTitle').innerHTML=s.heroTitle;$('heroLead').textContent=s.heroLead;$('heroCta').querySelector('span').textContent=s.heroCtaLabel;$('heroTag').textContent=s.heroTag}
function renderEditorial(){const s=db.site;$('edEyebrow').textContent=s.edEyebrow;$('edTitle').innerHTML=s.edTitle;$('edBody').textContent=s.edBody;$('edCta').textContent=s.edCta}
function renderNewsletter(){$('newsTitle').innerHTML=db.site.newsTitle;$('newsBody').textContent=db.site.newsBody}
function renderCategories(){$('catGrid').innerHTML=db.categories.map(c=>`<div class="cat" onclick="document.getElementById('new').scrollIntoView({behavior:'smooth'})">${categoryImageHTML(c)}<div class="cat-label"><small>${escapeHtml(c.num)}</small><h3>${escapeHtml(c.name)}</h3></div></div>`).join('')}
function renderProducts(){$('productGrid').innerHTML=db.products.map(p=>`<div class="card" onclick="openProductDetail('${p.id}')"><div class="card-img">${productImageHTML(p)}${p.badge?`<span class="card-badge ${p.sale?'sale':''}">${escapeHtml(p.badge)}</span>`:''}<button class="card-fav" onclick="event.stopPropagation();toast('Added to wishlist')"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9-9.5C1.5 7 4 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 3 0 5.5 3 4 7.5-2 5-9 9.5-9 9.5z"/></svg></button></div><div class="card-meta">${escapeHtml(p.cat)}</div><div class="card-name">${escapeHtml(p.name)}</div><div class="card-price"><span class="now">${inr(p.price)}</span>${p.was?`<span class="was">${inr(p.was)}</span>`:''}${p.was?`<span class="off">${Math.round((1-p.price/p.was)*100)}% off</span>`:''}</div></div>`).join('')}
function renderBrands(){$('brandStrip').innerHTML=db.brands.map(b=>`<div class="brand-cell">${escapeHtml(b)}</div>`).join('')}
function renderFooter(){
  const s=db.site;
  let h=`<div class="foot-brand"><div class="brand">${escapeHtml(s.brandFirst)}<span class="em" style="color:var(--gold)">D</span> ${escapeHtml(s.brandLast)}<span class="em" style="color:var(--gold)">E</span><small>${escapeHtml(s.tagline)}</small></div><p>${escapeHtml(s.footAbout)}</p></div>`;
  // Shop column auto-generates from categories — rename a category and it updates here automatically
  h+=`<div><h4>Shop</h4><ul>${db.categories.map(c=>`<li><a href="#shop">${escapeHtml(c.name)}</a></li>`).join('')}</ul></div>`;
  // Other footer columns from db.footerCols (skip any column titled "Shop" — it's auto-generated above)
  db.footerCols.filter(c=>c.title.toLowerCase()!=='shop').forEach(c=>{
    h+=`<div><h4>${escapeHtml(c.title)}</h4><ul>${c.links.map(l=>`<li><a href="#">${escapeHtml(l)}</a></li>`).join('')}</ul></div>`;
  });
  h+=`<div><h4>Follow</h4><ul>${db.socials.map(s=>`<li><a href="${escapeHtml(s.url)}" target="_blank" rel="noopener">${escapeHtml(s.name)}</a></li>`).join('')}</ul></div>`;
  $('footMain').innerHTML=h;
  $('footCopy').textContent=s.footCopy;
}
function renderAll(){renderBrandHeader();renderNav();renderPromo();renderHero();renderEditorial();renderNewsletter();renderCategories();renderProducts();renderBrands();renderFooter();renderCartBadge()}

function openModal(id){$(id).classList.add('show');document.body.classList.add('locked')}
function toggleMobNav(){
  const nav=document.getElementById('mobNav');
  const btn=document.getElementById('hamburgerBtn');
  const isOpen=nav.classList.toggle('open');
  btn.classList.toggle('open',isOpen);
  document.body.classList.toggle('locked',isOpen);
}
function closeMobNav(){
  document.getElementById('mobNav').classList.remove('open');
  document.getElementById('hamburgerBtn').classList.remove('open');
  document.body.classList.remove('locked');
}
function closeModal(id){$(id).classList.remove('show');document.body.classList.remove('locked');if(id==='adminLoginModal')$('adminErr').classList.remove('show')}
document.querySelectorAll('.modal-bg').forEach(bg=>bg.addEventListener('click',e=>{if(e.target===bg)closeModal(bg.id)}));
document.addEventListener('keydown',e=>{if(e.key==='Escape')document.querySelectorAll('.modal-bg.show').forEach(m=>closeModal(m.id))});

async function adminLogin(e){
  e.preventDefault();
  const email = $('adminUser').value.trim();
  const password = $('adminPass').value;
  if (!SUPA_OK()) {
    // Demo fallback when Supabase isn't configured
    if (email === 'admin@unifiedhouse.in' && password === 'demo1234') {
      closeModal('adminLoginModal'); showAdmin(); $('adminPass').value=''; return;
    }
    $('adminErr').classList.add('show');
    $('adminPass').value=''; return;
  }
  showLoading();
  try {
    const { data, error } = await supabaseClient.auth.signInWithPassword({ email, password });
    if (error) throw error;
    closeModal('adminLoginModal');
    showAdmin();
    $('adminPass').value='';
  } catch (err) {
    console.error('adminLogin:', err);
    $('adminErr').classList.add('show');
    $('adminPass').value='';
  } finally { hideLoading(); }
}
async function adminLogout(){
  if (SUPA_OK()) {
    try { await supabaseClient.auth.signOut(); } catch(e){}
  }
  hideAdmin();
}
function showAdmin(){$('adminPanel').classList.add('show');document.body.classList.add('locked');renderAdminSidebar();renderAdminMain('dashboard')}
function hideAdmin(){$('adminPanel').classList.remove('show');document.body.classList.remove('locked')}

let currentAdminView=null;
const ADMIN_VIEWS=[
  {group:"Main",items:[
    {id:'dashboard',label:'Dashboard',svg:'<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>'},
    {id:'orders',label:'Orders',svg:'<path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/>'},
    {id:'returns',label:'Returns',svg:'<path d="M3 7h13a4 4 0 0 1 0 8H7m0 0 3 3m-3-3 3-3"/>'},
    {id:'customers',label:'Customers',svg:'<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/>'}
  ]},
  {group:"Catalog",items:[
    {id:'products',label:'Products',svg:'<path d="M20 7L12 3 4 7l8 4 8-4z"/><path d="M4 7v10l8 4 8-4V7"/><path d="M12 11v10"/>'},
    {id:'categories',label:'Categories',svg:'<path d="M3 3h18v6H3zM3 13h18v8H3z"/>'},
    {id:'brands',label:'Brands',svg:'<path d="M21 12c0 5-9 9-9 9s-9-4-9-9 4-9 9-9 9 4 9 9z"/><circle cx="12" cy="12" r="3"/>'}
  ]},
  {group:"Content",items:[
    {id:'identity',label:'Site Identity',svg:'<path d="M4 4h16v16H4z"/><path d="M4 9h16M9 4v16"/>'},
    {id:'hero',label:'Hero Section',svg:'<path d="M3 12 7 8l4 4 6-6 4 4"/><path d="M3 19h18"/>'},
    {id:'editorial',label:'Editorial',svg:'<path d="M4 4h16v16H4z"/><path d="M8 8h8M8 12h8M8 16h5"/>'},
    {id:'newsletter',label:'Newsletter',svg:'<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>'}
  ]},
  {group:"Visuals & Links",items:[
    {id:'socials',label:'Social Links',svg:'<circle cx="6" cy="12" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="m8.5 10.5 7-3M8.5 13.5l7 3"/>'},
    {id:'footer',label:'Footer Links',svg:'<path d="M3 3h18v18H3z"/><path d="M3 16h18"/>'}
  ]},
  {group:"System",items:[
    {id:'policy',label:'Returns Policy',svg:'<path d="M9 12l2 2 4-4"/><path d="M21 12c0 4.5-9 9-9 9s-9-4.5-9-9 4-9 9-9 9 4.5 9 9z"/>'},
    {id:'settings',label:'Settings',svg:'<circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"/>'}
  ]}
];

function renderAdminSidebar(){
  const pending=db.returns.filter(r=>r.status==='pending').length;
  let h='';
  ADMIN_VIEWS.forEach(g=>{
    h+=`<div class="side-label">${g.group}</div>`;
    g.items.forEach(it=>{
      const c=it.id==='returns'&&pending?`<span class="count">${pending}</span>`:'';
      h+=`<div class="side-item ${currentAdminView===it.id?'active':''}" onclick="renderAdminMain('${it.id}')"><svg viewBox="0 0 24 24">${it.svg}</svg>${it.label}${c}</div>`;
    });
  });
  $('adminSide').innerHTML=h;
}

async function refreshOrders() {
  if (!SUPA_OK()) return;
  try {
    const { data } = await supabaseClient.from('orders').select('*').order('created_at', { ascending: false });
    if (data) db.orders = data.map(o => ({...o, name: o.name || 'Customer'}));
  } catch(e){ console.error('refreshOrders:', e); }
}
async function refreshReturns() {
  if (!SUPA_OK()) return;
  try {
    const { data } = await supabaseClient.from('returns').select('*').order('created_at', { ascending: false });
    if (data) db.returns = data.map(r => ({
      ...r,
      orderId: r.order_id,
      itemIds: r.item_ids || [],
      createdAt: r.created_at,
      timeline: r.timeline || [{t:r.created_at, e:'Return request submitted'}]
    }));
  } catch(e){ console.error('refreshReturns:', e); }
}

async function renderAdminMain(view){
  currentAdminView=view;
  const fns={dashboard:viewDashboard,orders:viewOrders,returns:viewReturns,customers:viewCustomers,products:viewProducts,categories:viewCategories,brands:viewBrands,identity:viewIdentity,hero:viewHero,editorial:viewEditorial,newsletter:viewNewsletter,socials:viewSocials,footer:viewFooter,policy:viewPolicy,settings:viewSettings};
  // Refresh data from Supabase for views that pull from it
  if (view === 'orders' || view === 'customers' || view === 'dashboard') await refreshOrders();
  if (view === 'returns') await refreshReturns();
  $('adminMain').innerHTML=fns[view]();
  renderAdminSidebar();
}

function viewDashboard(){
  const today=new Date().toLocaleDateString('en-IN',{weekday:'long',day:'numeric',month:'long',year:'numeric'});
  const totalRev=db.products.reduce((s,p)=>s+p.price*p.sold,0);
  const totalSold=db.products.reduce((s,p)=>s+p.sold,0);
  const lowStock=db.products.filter(p=>p.stock<20).length;
  const pending=db.returns.filter(r=>r.status==='pending').length;
  const top=[...db.products].sort((a,b)=>b.price*b.sold-a.price*a.sold).slice(0,5);
  const recent=db.orders.slice(0,6);
  const acts=[
    {t:db.products[0].name,msg:`stock alert · ${db.products[0].stock} units remaining`,time:"2m ago"},
    {t:"Order "+db.orders[0].id,msg:`shipped via BlueDart to ${db.orders[0].name.split(' ')[0]}`,time:"11m ago"},
    {t:"Customer "+db.orders[3].name,msg:`placed first order · ${inr(db.orders[3].total)}`,time:"24m ago"},
    {t:db.products[3].name,msg:"added to wishlist by 14 users",time:"1h ago"}
  ];
  return `<div class="admin-h"><div><h1>Good evening, Admin.</h1><p class="meta">${today} · Last sync 2 minutes ago</p></div></div>
    <div class="stats">
      <div class="stat"><div class="stat-label">Lifetime Revenue</div><div class="stat-val">${inr(totalRev)}</div><div class="stat-trend up">↑ 12.4% vs last period</div></div>
      <div class="stat"><div class="stat-label">Items Sold</div><div class="stat-val">${totalSold.toLocaleString('en-IN')}</div><div class="stat-trend up">↑ 8.2% this month</div></div>
      <div class="stat"><div class="stat-label">Low Stock Items</div><div class="stat-val">${lowStock}</div><div class="stat-trend ${lowStock>0?'down':'up'}">${lowStock>0?'Needs attention':'All stocked'}</div></div>
      <div class="stat"><div class="stat-label">Pending Returns</div><div class="stat-val">${pending}</div><div class="stat-trend ${pending>0?'down':'up'}">${pending>0?'Awaiting review':'All clear'}</div></div>
    </div>
    <div class="panel-grid">
      <div class="panel"><div class="panel-h"><h3>Recent Orders</h3><span class="more" onclick="renderAdminMain('orders')">View all →</span></div>
        <table><thead><tr><th>Order</th><th>Customer</th><th>Total</th><th>Status</th></tr></thead><tbody>${recent.map(o=>`<tr><td><strong>${o.id}</strong></td><td>${escapeHtml(o.name)}</td><td>${inr(o.total)}</td><td><span class="pill ${o.status}">${o.status}</span></td></tr>`).join('')}</tbody></table></div>
      <div class="panel"><div class="panel-h"><h3>Live Activity</h3></div>${acts.map(a=>`<div class="activity-item"><div class="act-dot"></div><div><p><strong>${escapeHtml(a.t)}</strong> — ${escapeHtml(a.msg)}</p><time>${a.time}</time></div></div>`).join('')}</div>
    </div>
    <div class="panel"><div class="panel-h"><h3>Top Performing Products</h3><span class="more" onclick="renderAdminMain('products')">Manage catalog →</span></div>
      <table><thead><tr><th>Product</th><th>Category</th><th>Stock</th><th>Sold</th><th>Revenue</th></tr></thead><tbody>${top.map(p=>`<tr><td><strong>${escapeHtml(p.name)}</strong></td><td>${escapeHtml(p.cat)}</td><td>${p.stock}</td><td>${p.sold}</td><td>${inr(p.price*p.sold)}</td></tr>`).join('')}</tbody></table></div>`;
}

function viewOrders(){
  return `<div class="admin-h"><div><h1>Orders</h1><p class="meta">${db.orders.length} total</p></div></div>
    <div class="panel"><table><thead><tr><th>Order</th><th>Invoice</th><th>Customer</th><th>Total</th><th>Status</th><th>Actions</th></tr></thead>
    <tbody>${db.orders.map((o,i)=>`<tr>
      <td><strong>${o.id}</strong></td>
      <td><span style="font-family:monospace;font-size:11px;color:rgba(244,237,226,0.7)">${escapeHtml(o.invoice_number||'—')}</span></td>
      <td>${escapeHtml(o.name)}<br><span style="font-size:11px;color:rgba(244,237,226,0.5)">${escapeHtml(o.email||'')}</span></td>
      <td>${inr(o.total)}</td>
      <td><span class="pill ${o.status}">${o.status}</span></td>
      <td>${o.invoice_number?`<button class="ec-btn edit" onclick='downloadInvoice(${JSON.stringify(o).replace(/'/g,"&apos;")})'>Invoice</button>`:'<span style="color:rgba(244,237,226,0.4);font-size:11px">No invoice</span>'}</td>
    </tr>`).join('')}</tbody></table></div>`;
}

function viewReturns(){
  const statuses=['pending','approved','received','refunded','rejected'];
  const counts={};statuses.forEach(s=>counts[s]=db.returns.filter(r=>r.status===s).length);
  return `<div class="admin-h"><div><h1>Returns Center</h1><p class="meta">${db.returns.length} total · ${counts.pending} pending review</p></div></div>
    <div class="stats" style="grid-template-columns:repeat(5,1fr)">${statuses.map(s=>`<div class="stat"><div class="stat-label">${s}</div><div class="stat-val">${counts[s]}</div></div>`).join('')}</div>
    <div class="panel"><div class="panel-h"><h3>All Return Requests</h3></div>
      <table><thead><tr><th>RMA</th><th>Order</th><th>Customer</th><th>Reason</th><th>Resolution</th><th>Status</th></tr></thead>
      <tbody>${db.returns.map(r=>`<tr class="clickable" onclick="openReturnDetail('${r.id}')"><td><strong>${r.id}</strong></td><td>${r.orderId}</td><td>${escapeHtml(r.customer)}</td><td>${escapeHtml(r.reason)}</td><td>${escapeHtml(r.resolution)}</td><td><span class="pill ${r.status}">${r.status}</span></td></tr>`).join('')}</tbody></table></div>
    <div id="returnDetail"></div>`;
}

function openReturnDetail(rmaId){
  const r=db.returns.find(x=>x.id===rmaId);if(!r)return;
  const items=r.itemIds.map(id=>db.products.find(p=>p.id===id)).filter(Boolean);
  const photos=(r.photos&&r.photos.length)?`<div style="display:flex;gap:8px;margin-top:8px">${r.photos.map(p=>`<div style="width:60px;height:60px;background-image:url('${p}');background-size:cover;border-radius:4px"></div>`).join('')}</div>`:'<p style="color:rgba(244,237,226,0.4)">None uploaded</p>';
  $('returnDetail').innerHTML=`<div class="return-detail">
    <h3 style="font-family:var(--serif);font-size:24px;margin-bottom:6px">${r.id}</h3>
    <p style="color:rgba(244,237,226,0.6);font-size:13px;margin-bottom:18px">Submitted ${new Date(r.createdAt).toLocaleString('en-IN')} · <span class="pill ${r.status}">${r.status}</span></p>
    <div class="return-detail-grid">
      <div class="rd-block"><h5>Customer</h5><p><strong>${escapeHtml(r.customer)}</strong><br>${escapeHtml(r.email)}<br>Order ${r.orderId}</p></div>
      <div class="rd-block"><h5>Resolution Requested</h5><p><strong>${escapeHtml(r.resolution)}</strong><br>via ${escapeHtml(r.method)}</p></div>
      <div class="rd-block"><h5>Items Returning</h5><p>${items.map(i=>escapeHtml(i.name)+' · '+inr(i.price)).join('<br>')}</p></div>
      <div class="rd-block"><h5>Reason</h5><p>${escapeHtml(r.reason)}${r.note?'<br><em style="color:rgba(244,237,226,0.6)">"'+escapeHtml(r.note)+'"</em>':''}</p></div>
      <div class="rd-block"><h5>Photos</h5>${photos}</div>
      <div class="rd-block"><h5>Timeline</h5>${r.timeline.map(t=>`<p style="font-size:12px;color:rgba(244,237,226,0.7);margin-bottom:4px"><strong>${new Date(t.t).toLocaleString('en-IN',{day:'numeric',month:'short',hour:'2-digit',minute:'2-digit'})}</strong> — ${escapeHtml(t.e)}</p>`).join('')}</div>
    </div>
    <div class="rd-actions">
      ${r.status==='pending'?`<button class="rd-btn approve" onclick="updateReturn('${r.id}','approved','Approved by admin · Pickup scheduled')">Approve</button><button class="rd-btn reject" onclick="updateReturn('${r.id}','rejected','Rejected by admin')">Reject</button>`:''}
      ${r.status==='approved'?`<button class="rd-btn next" onclick="updateReturn('${r.id}','received','Package received at warehouse')">Mark Received</button>`:''}
      ${r.status==='received'?`<button class="rd-btn refund" onclick="updateReturn('${r.id}','refunded','Refund processed to original payment')">Process Refund</button>`:''}
      <button class="rd-btn" style="background:#2a241d;color:var(--cream)" onclick="$('returnDetail').innerHTML=''">Close</button>
    </div></div>`;
  $('returnDetail').scrollIntoView({behavior:'smooth',block:'center'});
}
async function updateReturn(id,status,note){
  const r=db.returns.find(x=>x.id===id);if(!r)return;
  r.status=status;
  if(!r.timeline) r.timeline=[];
  r.timeline.push({t:new Date().toISOString(),e:note});
  if (SUPA_OK()) {
    showLoading();
    try {
      await supabaseClient.from('returns').update({ status }).eq('id', id);
    } catch(err){ console.error('updateReturn:', err); toast('⚠ Update failed.'); }
    finally { hideLoading(); }
  }
  toast(`Return ${id} marked as ${status}.`);
  renderAdminMain('returns');setTimeout(()=>openReturnDetail(id),50);
}

function viewCustomers(){
  return `<div class="admin-h"><div><h1>Customers</h1><p class="meta">${db.orders.length} unique buyers</p></div></div>
    <div class="panel"><table><thead><tr><th>Name</th><th>Email</th><th>Last Order</th><th>Total</th></tr></thead><tbody>${db.orders.map(o=>`<tr><td><strong>${escapeHtml(o.name)}</strong></td><td>${escapeHtml(o.email)}</td><td>${o.id}</td><td>${inr(o.total)}</td></tr>`).join('')}</tbody></table></div>`;
}

function viewProducts(){
  return `<div class="admin-h"><div><h1>Products & Inventory</h1><p class="meta">${db.products.length} active SKUs</p></div><div class="actions"><button class="btn-add" onclick="editProduct(null)">+ Add Product</button></div></div>
    <div class="panel"><table><thead><tr><th>Product</th><th>Category</th><th>Price</th><th>Stock</th><th>Sold</th><th>Actions</th></tr></thead>
    <tbody>${db.products.map(p=>`<tr><td><div style="display:flex;align-items:center;gap:10px"><div style="width:32px;height:40px;background:linear-gradient(135deg,${p.c1},${p.c2});border-radius:3px"></div><strong>${escapeHtml(p.name)}</strong></div></td><td>${escapeHtml(p.cat)}</td><td>${inr(p.price)}</td><td>${p.stock<20?`<span style="color:var(--terra)">⚠ ${p.stock}</span>`:p.stock}</td><td>${p.sold}</td><td><button class="ec-btn edit" onclick="editProduct('${p.id}')">Edit</button> <button class="ec-btn del" onclick="deleteProduct('${p.id}')">Delete</button></td></tr>`).join('')}</tbody></table></div>`;
}
function editProduct(id){
  const p=id?db.products.find(x=>x.id===id):{name:'',cat:db.categories[0]?.name||'',price:0,was:null,badge:'',sale:false,stock:0,sold:0,c1:'#c79858',c2:'#8c3e2c',shape:0,image:null,description:''};
  $('editModalBody').innerHTML=`<h3 style="font-family:var(--serif);font-size:26px;margin-bottom:18px;color:var(--cream)">${id?'Edit':'New'} Product</h3>
    <div class="field"><label>Product Photo (optional — uses gradient if blank)</label>
      <div class="image-upload">
        <div class="preview" id="ep_preview">${p.image?`<img src="${p.image}">`:`<div class="empty">Gradient placeholder</div>`}</div>
        <div class="controls">
          <p>JPG / PNG · Max 2MB. Auto-resized to 800px for fast loading.</p>
          <input type="hidden" id="ep_image" value="${p.image||''}">
          <input type="file" id="ep_imgfile" accept="image/*" style="display:none" onchange="handleImageUpload(event,'ep')">
          <button class="upload" onclick="document.getElementById('ep_imgfile').click()" type="button">Upload Photo</button>
          <button class="clear" onclick="clearImage('ep')" type="button">Use Gradient</button>
        </div>
      </div>
    </div>
    <div class="field"><label>Name</label><input id="ep_name" value="${escapeHtml(p.name)}"></div>
    <div class="field"><label>Description (shown on product detail page)</label><textarea id="ep_desc" rows="3" placeholder="A short, evocative description…">${escapeHtml(p.description||'')}</textarea></div>
    <div class="field-row"><div class="field"><label>Category</label><select id="ep_cat">${db.categories.map(c=>`<option ${c.name===p.cat?'selected':''}>${escapeHtml(c.name)}</option>`).join('')}</select></div><div class="field"><label>Badge</label><input id="ep_badge" value="${escapeHtml(p.badge||'')}" placeholder="New / -20%"></div></div>
    <div class="field-row"><div class="field"><label>Price (₹)</label><input id="ep_price" type="number" value="${p.price}"></div><div class="field"><label>Was Price (₹)</label><input id="ep_was" type="number" value="${p.was||''}"></div></div>
    <div class="field-row"><div class="field"><label>Stock</label><input id="ep_stock" type="number" value="${p.stock}"></div><div class="field"><label>Sold</label><input id="ep_sold" type="number" value="${p.sold}"></div></div>
    <div class="field"><label>On Sale</label><select id="ep_sale"><option value="false" ${!p.sale?'selected':''}>No</option><option value="true" ${p.sale?'selected':''}>Yes</option></select></div>
    <div class="field"><label>Fallback Visual — Gradient Colors (used if no photo)</label><div class="swatch-row"><div class="swatch"><input type="color" id="ep_c1" value="${p.c1}"></div><div class="swatch"><input type="color" id="ep_c2" value="${p.c2}"></div><span style="font-size:12px;color:rgba(244,237,226,0.5)">Top → bottom gradient</span></div></div>
    <div class="field"><label>Fallback Shape Style</label><select id="ep_shape">${[0,1,2,3,4].map(i=>`<option value="${i}" ${p.shape===i?'selected':''}>Style ${i+1}</option>`).join('')}</select></div>
    <div style="display:flex;gap:10px;margin-top:20px"><button class="btn-back" style="border-color:var(--cream);color:var(--cream);flex:1" onclick="closeModal('editModal')">Cancel</button><button class="btn-next" style="flex:1.5" onclick="saveProduct('${id||''}')">Save Product</button></div>`;
  openModal('editModal');
}
async function saveProduct(id){
  const d={name:$('ep_name').value.trim(),cat:$('ep_cat').value,badge:$('ep_badge').value.trim()||null,price:parseInt($('ep_price').value)||0,was:parseInt($('ep_was').value)||null,stock:parseInt($('ep_stock').value)||0,sold:parseInt($('ep_sold').value)||0,sale:$('ep_sale').value==='true',c1:$('ep_c1').value,c2:$('ep_c2').value,shape:parseInt($('ep_shape').value)||0,image:$('ep_image').value||null,description:$('ep_desc').value.trim()};
  if(!d.name)return toast('Product name is required.');
  let productObj;
  if(id){
    productObj = {id, ...d};
    Object.assign(db.products.find(x=>x.id===id),d);
  } else {
    productObj = {id:uid('p'), ...d};
    db.products.push(productObj);
  }
  showLoading();
  await saveProductDB(productObj);
  hideLoading();
  renderAll();closeModal('editModal');renderAdminMain('products');toast('Product saved.');
}
async function deleteProduct(id){
  if(!confirm('Delete this product?'))return;
  db.products=db.products.filter(p=>p.id!==id);
  showLoading();
  await deleteProductDB(id);
  hideLoading();
  renderAll();renderAdminMain('products');toast('Product deleted.');
}

function viewCategories(){
  return `<div class="admin-h"><div><h1>Categories</h1><p class="meta">${db.categories.length} departments</p></div><div class="actions"><button class="btn-add" onclick="editCategory(null)">+ Add Category</button></div></div>
    <div class="grid-cards">${db.categories.map(c=>`<div class="editor-card"><div class="editor-card-img">${categorySVG(c)}</div><div class="editor-card-body"><div class="ec-meta">${escapeHtml(c.num)}</div><h4>${escapeHtml(c.name)}</h4><div class="editor-card-actions"><button class="ec-btn edit" onclick="editCategory('${c.id}')">Edit</button><button class="ec-btn del" onclick="deleteCategory('${c.id}')">Delete</button></div></div></div>`).join('')}</div>`;
}
function editCategory(id){
  const c=id?db.categories.find(x=>x.id===id):{name:'',num:String(db.categories.length+1).padStart(2,'0'),c1:'#c79858',c2:'#8c3e2c',shape:0,image:null};
  $('editModalBody').innerHTML=`<h3 style="font-family:var(--serif);font-size:26px;margin-bottom:18px;color:var(--cream)">${id?'Edit':'New'} Category</h3>
    <div class="field"><label>Category Image (optional)</label>
      <div class="image-upload">
        <div class="preview" id="ec_preview">${c.image?`<img src="${c.image}">`:`<div class="empty">Gradient placeholder</div>`}</div>
        <div class="controls">
          <p>JPG / PNG · Max 2MB. Auto-resized for fast loading.</p>
          <input type="hidden" id="ec_image" value="${c.image||''}">
          <input type="file" id="ec_imgfile" accept="image/*" style="display:none" onchange="handleImageUpload(event,'ec')">
          <button class="upload" onclick="document.getElementById('ec_imgfile').click()" type="button">Upload Photo</button>
          <button class="clear" onclick="clearImage('ec')" type="button">Use Gradient</button>
        </div>
      </div>
    </div>
    <div class="field-row"><div class="field"><label>Name</label><input id="ec_name" value="${escapeHtml(c.name)}"></div><div class="field"><label>Number Label</label><input id="ec_num" value="${escapeHtml(c.num)}" maxlength="3"></div></div>
    <div class="field"><label>Fallback Visual — Gradient Colors</label><div class="swatch-row"><div class="swatch"><input type="color" id="ec_c1" value="${c.c1}"></div><div class="swatch"><input type="color" id="ec_c2" value="${c.c2}"></div></div></div>
    <div class="field"><label>Fallback Illustration Style</label><select id="ec_shape"><option value="0" ${c.shape===0?'selected':''}>Womenswear silhouette</option><option value="1" ${c.shape===1?'selected':''}>Menswear silhouette</option><option value="2" ${c.shape===2?'selected':''}>Kids silhouette</option><option value="3" ${c.shape===3?'selected':''}>Home interior</option><option value="4" ${c.shape===4?'selected':''}>Beauty / objects</option></select></div>
    <div style="display:flex;gap:10px;margin-top:20px"><button class="btn-back" style="border-color:var(--cream);color:var(--cream);flex:1" onclick="closeModal('editModal')">Cancel</button><button class="btn-next" style="flex:1.5" onclick="saveCategory('${id||''}')">Save Category</button></div>`;
  openModal('editModal');
}
async function saveCategory(id){
  const d={name:$('ec_name').value.trim(),num:$('ec_num').value.trim(),c1:$('ec_c1').value,c2:$('ec_c2').value,shape:parseInt($('ec_shape').value)||0,image:$('ec_image').value||null};
  if(!d.name)return toast('Category name is required.');
  let catObj;
  let oldName = null;
  if(id){
    const existing = db.categories.find(x=>x.id===id);
    oldName = existing.name;
    catObj = {id, ...d};
    Object.assign(existing,d);
  } else {
    catObj = {id:uid('c'), ...d};
    db.categories.push(catObj);
  }
  showLoading();
  await saveCategoryDB(catObj);

  // CASCADE: if the name changed, update every product that referenced the old name
  let renamedCount = 0;
  if (oldName && oldName !== d.name) {
    const affectedProducts = db.products.filter(p => p.cat === oldName);
    affectedProducts.forEach(p => p.cat = d.name);
    renamedCount = affectedProducts.length;
    // Persist each affected product
    for (const p of affectedProducts) {
      await saveProductDB(p);
    }
  }
  hideLoading();
  renderAll();closeModal('editModal');renderAdminMain('categories');
  toast(renamedCount > 0 ? `Category saved · ${renamedCount} products updated.` : 'Category saved.');
}
async function deleteCategory(id){
  if(!confirm('Delete this category?'))return;
  db.categories=db.categories.filter(c=>c.id!==id);
  showLoading();
  await deleteCategoryDB(id);
  hideLoading();
  renderAll();renderAdminMain('categories');toast('Category deleted.');
}

function viewBrands(){
  return `<div class="admin-h"><div><h1>Brand Strip</h1><p class="meta">${db.brands.length} brand names</p></div></div>
    <div class="panel"><div class="admin-form">${db.brands.map((b,i)=>`<div style="display:flex;gap:10px;margin-bottom:10px;align-items:center"><input value="${escapeHtml(b)}" id="br_${i}" style="flex:1;padding:12px 14px;background:#0f0d0a;border:1px solid #2a241d;border-radius:4px;color:var(--cream);font-size:14px"><button class="ec-btn del" style="padding:10px 14px" onclick="deleteBrand(${i})">Remove</button></div>`).join('')}
    <div style="display:flex;gap:10px;margin-top:16px"><button class="btn-add" onclick="addBrand()">+ Add Brand</button><button class="btn-save" onclick="saveBrands()">Save Changes</button></div></div></div>`;
}
function addBrand(){db.brands.push("New Brand");saveSiteConfig();renderAdminMain('brands')}
function deleteBrand(i){db.brands.splice(i,1);saveSiteConfig();renderAll();renderAdminMain('brands');toast('Brand removed.')}
function saveBrands(){db.brands=db.brands.map((_,i)=>$('br_'+i).value.trim()).filter(Boolean);saveSiteConfig();renderAll();renderAdminMain('brands');toast('Brand strip saved.')}

function viewIdentity(){
  const s=db.site;
  return `<div class="admin-h"><div><h1>Site Identity</h1><p class="meta">Brand name, tagline & promo bar</p></div></div>
    <div class="panel"><div class="admin-form">
      <div class="field-row"><div class="field"><label>Brand — First Word</label><input id="si_first" value="${escapeHtml(s.brandFirst)}"></div><div class="field"><label>Brand — Second Word</label><input id="si_last" value="${escapeHtml(s.brandLast)}"></div></div>
      <p style="font-size:12px;color:rgba(244,237,226,0.5);margin-top:-8px;margin-bottom:14px">Each word's last letter is auto-styled in italic terracotta. So "Unifie" + "Hous" displays as <em>UnifieD HousE</em>.</p>
      <div class="field"><label>Tagline</label><input id="si_tag" value="${escapeHtml(s.tagline)}"></div>
      <h4 style="margin:24px 0 10px;font-family:var(--serif);font-size:18px;color:var(--cream)">Promo Bar Messages</h4>
      ${s.promoBar.map((p,i)=>`<div style="display:flex;gap:10px;margin-bottom:10px;align-items:center"><input id="si_promo_${i}" value="${escapeHtml(p)}" style="flex:1;padding:12px 14px;background:#0f0d0a;border:1px solid #2a241d;border-radius:4px;color:var(--cream)"><button class="ec-btn del" style="padding:10px 14px" onclick="db.site.promoBar.splice(${i},1);saveSiteConfig();renderAll();renderAdminMain('identity')">Remove</button></div>`).join('')}
      <button class="btn-add" onclick="db.site.promoBar.push('New message');saveSiteConfig();renderAll();renderAdminMain('identity')">+ Add Message</button>
      <div style="margin-top:24px"><button class="btn-save" onclick="saveIdentity()">Save Identity</button></div></div></div>`;
}
function saveIdentity(){db.site.brandFirst=$('si_first').value.trim();db.site.brandLast=$('si_last').value.trim();db.site.tagline=$('si_tag').value.trim();db.site.promoBar=db.site.promoBar.map((_,i)=>$('si_promo_'+i).value.trim()).filter(Boolean);saveSiteConfig();renderAll();toast('Site identity saved.')}

function viewHero(){
  const s=db.site;
  return `<div class="admin-h"><div><h1>Hero Section</h1></div></div>
    <div class="panel"><div class="admin-form">
      <div class="field"><label>Eyebrow Label</label><input id="hr_eye" value="${escapeHtml(s.heroEyebrow)}"></div>
      <div class="field"><label>Title (HTML — wrap accent words in &lt;em&gt;)</label><textarea id="hr_title">${escapeHtml(s.heroTitle)}</textarea></div>
      <div class="field"><label>Lead Paragraph</label><textarea id="hr_lead">${escapeHtml(s.heroLead)}</textarea></div>
      <div class="field-row"><div class="field"><label>Primary Button Text</label><input id="hr_cta" value="${escapeHtml(s.heroCtaLabel)}"></div><div class="field"><label>Image Tag (top-left)</label><input id="hr_tag" value="${escapeHtml(s.heroTag)}"></div></div>
      <button class="btn-save" onclick="saveHero()">Save Hero</button></div></div>`;
}
function saveHero(){db.site.heroEyebrow=$('hr_eye').value.trim();db.site.heroTitle=$('hr_title').value.trim();db.site.heroLead=$('hr_lead').value.trim();db.site.heroCtaLabel=$('hr_cta').value.trim();db.site.heroTag=$('hr_tag').value.trim();saveSiteConfig();renderAll();toast('Hero saved.')}

function viewEditorial(){
  const s=db.site;
  return `<div class="admin-h"><div><h1>Editorial Banner</h1></div></div>
    <div class="panel"><div class="admin-form">
      <div class="field"><label>Eyebrow</label><input id="ed_eye" value="${escapeHtml(s.edEyebrow)}"></div>
      <div class="field"><label>Title (HTML)</label><textarea id="ed_title">${escapeHtml(s.edTitle)}</textarea></div>
      <div class="field"><label>Body Copy</label><textarea id="ed_body">${escapeHtml(s.edBody)}</textarea></div>
      <div class="field"><label>Button Text</label><input id="ed_cta" value="${escapeHtml(s.edCta)}"></div>
      <button class="btn-save" onclick="saveEditorialEdit()">Save Editorial</button></div></div>`;
}
function saveEditorialEdit(){db.site.edEyebrow=$('ed_eye').value.trim();db.site.edTitle=$('ed_title').value.trim();db.site.edBody=$('ed_body').value.trim();db.site.edCta=$('ed_cta').value.trim();saveSiteConfig();renderAll();toast('Editorial saved.')}

function viewNewsletter(){
  const s=db.site;
  return `<div class="admin-h"><div><h1>Newsletter Section</h1></div></div>
    <div class="panel"><div class="admin-form">
      <div class="field"><label>Title (HTML)</label><textarea id="nw_title">${escapeHtml(s.newsTitle)}</textarea></div>
      <div class="field"><label>Body</label><textarea id="nw_body">${escapeHtml(s.newsBody)}</textarea></div>
      <button class="btn-save" onclick="saveNewsletterEdit()">Save</button></div></div>`;
}
function saveNewsletterEdit(){db.site.newsTitle=$('nw_title').value.trim();db.site.newsBody=$('nw_body').value.trim();saveSiteConfig();renderAll();toast('Newsletter saved.')}

function viewSocials(){
  return `<div class="admin-h"><div><h1>Social Media Links</h1><p class="meta">Shown in footer "Follow" column</p></div><div class="actions"><button class="btn-add" onclick="db.socials.push({name:'New',url:'https://'});saveSiteConfig();renderAdminMain('socials')">+ Add Link</button></div></div>
    <div class="panel"><div class="admin-form">${db.socials.map((s,i)=>`<div style="background:#0f0d0a;border:1px solid #2a241d;border-radius:6px;padding:14px;margin-bottom:10px"><div class="field-row"><div class="field"><label>Platform</label><input id="so_name_${i}" value="${escapeHtml(s.name)}"></div><div class="field"><label>URL</label><input id="so_url_${i}" value="${escapeHtml(s.url)}"></div></div><button class="ec-btn del" style="padding:8px 14px" onclick="db.socials.splice(${i},1);saveSiteConfig();renderAll();renderAdminMain('socials')">Remove</button></div>`).join('')}<button class="btn-save" onclick="saveSocials()">Save Social Links</button></div></div>`;
}
function saveSocials(){db.socials=db.socials.map((_,i)=>({name:$('so_name_'+i).value.trim(),url:$('so_url_'+i).value.trim()})).filter(s=>s.name);saveSiteConfig();renderAll();toast('Socials saved.')}

function viewFooter(){
  return `<div class="admin-h"><div><h1>Footer Columns</h1></div><div class="actions"><button class="btn-add" onclick="db.footerCols.push({title:'New',links:['Link 1']});saveSiteConfig();renderAdminMain('footer')">+ Add Column</button></div></div>
    <div class="panel"><div class="admin-form">
      <div class="field"><label>About Text (next to brand)</label><textarea id="ft_about">${escapeHtml(db.site.footAbout)}</textarea></div>
      <div class="field"><label>Copyright Line</label><input id="ft_copy" value="${escapeHtml(db.site.footCopy)}"></div>
      ${db.footerCols.map((col,ci)=>`<div style="background:#0f0d0a;border:1px solid #2a241d;border-radius:6px;padding:14px;margin-bottom:10px"><div class="field"><label>Column Title</label><input id="fc_title_${ci}" value="${escapeHtml(col.title)}"></div>${col.links.map((l,li)=>`<div style="display:flex;gap:8px;margin-bottom:8px"><input id="fc_link_${ci}_${li}" value="${escapeHtml(l)}" style="flex:1;padding:10px 12px;background:#0f0d0a;border:1px solid #2a241d;border-radius:4px;color:var(--cream)"><button class="ec-btn del" style="padding:8px 12px" onclick="db.footerCols[${ci}].links.splice(${li},1);saveSiteConfig();renderAdminMain('footer')">×</button></div>`).join('')}<button class="ec-btn edit" style="padding:6px 12px" onclick="db.footerCols[${ci}].links.push('New link');saveSiteConfig();renderAdminMain('footer')">+ Add Link</button> <button class="ec-btn del" style="padding:6px 12px" onclick="db.footerCols.splice(${ci},1);saveSiteConfig();renderAll();renderAdminMain('footer')">Delete Column</button></div>`).join('')}
      <button class="btn-save" onclick="saveFooter()">Save Footer</button></div></div>`;
}
function saveFooter(){db.site.footAbout=$('ft_about').value.trim();db.site.footCopy=$('ft_copy').value.trim();db.footerCols.forEach((col,ci)=>{col.title=$('fc_title_'+ci).value.trim();col.links=col.links.map((_,li)=>$(`fc_link_${ci}_${li}`).value.trim()).filter(Boolean)});saveSiteConfig();renderAll();toast('Footer saved.')}

function viewPolicy(){
  const p=db.policy;
  return `<div class="admin-h"><div><h1>Returns Policy</h1></div></div>
    <div class="panel"><div class="admin-form">
      <div class="field-row"><div class="field"><label>Return Window (days)</label><input id="po_window" type="number" value="${p.windowDays}"></div><div class="field"><label>Refund Processing (days)</label><input id="po_refund" type="number" value="${p.refundDays}"></div></div>
      <div class="field-row"><div class="field"><label>Free Return Shipping</label><select id="po_free"><option value="true" ${p.freeReturnShipping?'selected':''}>Yes</option><option value="false" ${!p.freeReturnShipping?'selected':''}>No</option></select></div><div class="field"><label>Store Credit Bonus (%)</label><input id="po_bonus" type="number" value="${p.bonusForStoreCredit}"></div></div>
      <div class="field"><label>Policy Text (shown to customer)</label><textarea id="po_text" rows="4">${escapeHtml(p.text)}</textarea></div>
      <h4 style="margin:24px 0 10px;font-family:var(--serif);font-size:18px;color:var(--cream)">Return Reasons (dropdown options)</h4>
      ${db.returnReasons.map((r,i)=>`<div style="display:flex;gap:8px;margin-bottom:8px"><input id="rr_${i}" value="${escapeHtml(r)}" style="flex:1;padding:10px 12px;background:#0f0d0a;border:1px solid #2a241d;border-radius:4px;color:var(--cream)"><button class="ec-btn del" style="padding:8px 12px" onclick="db.returnReasons.splice(${i},1);saveSiteConfig();renderAdminMain('policy')">×</button></div>`).join('')}
      <button class="btn-add" onclick="db.returnReasons.push('New reason');saveSiteConfig();renderAdminMain('policy')">+ Add Reason</button>
      <div style="margin-top:20px"><button class="btn-save" onclick="savePolicy()">Save Policy</button></div></div></div>`;
}
function savePolicy(){db.policy.windowDays=parseInt($('po_window').value)||30;db.policy.refundDays=parseInt($('po_refund').value)||5;db.policy.freeReturnShipping=$('po_free').value==='true';db.policy.bonusForStoreCredit=parseInt($('po_bonus').value)||0;db.policy.text=$('po_text').value.trim();db.returnReasons=db.returnReasons.map((_,i)=>$('rr_'+i).value.trim()).filter(Boolean);saveSiteConfig();toast('Policy saved.')}

function viewSettings(){
  const s = db.site;
  return `<div class="admin-h"><div><h1>Settings</h1><p class="meta">Contact, legal entity &amp; invoice configuration</p></div></div>
    <div class="panel"><div class="panel-h"><h3>Contact</h3></div>
      <div class="admin-form">
        <div class="field-row"><div class="field"><label>Contact Email</label><input id="st_email" value="${escapeHtml(s.contactEmail||'')}"></div><div class="field"><label>Contact Phone</label><input id="st_phone" value="${escapeHtml(s.contactPhone||'')}"></div></div>
      </div>
    </div>
    <div class="panel"><div class="panel-h"><h3>Legal Entity &amp; Invoice (GST)</h3></div>
      <p style="font-size:12px;color:rgba(244,237,226,0.55);margin-bottom:14px;line-height:1.6">These details appear on every tax invoice generated for customer orders. They must match your actual GST registration.</p>
      <div class="admin-form">
        <div class="field"><label>Registered Legal Name</label><input id="st_legalName" value="${escapeHtml(s.legalName||'')}" placeholder="Acme Retail Pvt. Ltd."></div>
        <div class="field"><label>Registered Address (with state &amp; pincode)</label><textarea id="st_sellerAddress" rows="2">${escapeHtml(s.sellerAddress||'')}</textarea></div>
        <div class="field-row"><div class="field"><label>Registered State</label><input id="st_sellerState" value="${escapeHtml(s.sellerState||'')}" placeholder="Karnataka"></div><div class="field"><label>Invoice Number Prefix</label><input id="st_invoicePrefix" value="${escapeHtml(s.invoicePrefix||'UH/2026/')}" placeholder="UH/2026/"></div></div>
        <div class="field-row"><div class="field"><label>GSTIN (15 chars)</label><input id="st_gstin" value="${escapeHtml(s.gstin||'')}" maxlength="15" placeholder="29AAACU1234A1Z5"></div><div class="field"><label>PAN</label><input id="st_pan" value="${escapeHtml(s.pan||'')}" maxlength="10" placeholder="AAACU1234A"></div></div>
        <button class="btn-save" onclick="saveSettings()">Save Settings</button>
      </div>
    </div>
    <div class="panel"><div class="panel-h"><h3>Danger Zone</h3></div>
      <p style="color:rgba(244,237,226,0.6);font-size:13px;margin-bottom:14px">This wipes all your edits and restores everything to the original demo content. Cannot be undone.</p>
      <button class="ec-btn del" style="padding:10px 18px" onclick="resetDB()">Reset Site to Defaults</button>
    </div>`;
}
function saveSettings(){
  db.site.contactEmail=$('st_email').value.trim();
  db.site.contactPhone=$('st_phone').value.trim();
  db.site.legalName=$('st_legalName').value.trim();
  db.site.sellerAddress=$('st_sellerAddress').value.trim();
  db.site.sellerState=$('st_sellerState').value.trim();
  db.site.invoicePrefix=$('st_invoicePrefix').value.trim();
  db.site.gstin=$('st_gstin').value.trim().toUpperCase();
  db.site.pan=$('st_pan').value.trim().toUpperCase();
  saveSiteConfig();
  toast('Settings saved.');
}

let rt=null;
function openReturns(){rt={step:0,orderId:'',email:'',orderFound:null,selectedItems:[],reason:'',resolution:'',method:'',note:'',photos:[]};renderReturnStep();openModal('returnsModal')}
function renderReturnStep(){
  const total=5;let dots='';
  for(let i=0;i<total;i++)dots+=`<div class="step-dot ${i<rt.step?'done':i===rt.step?'active':''}"></div>`;
  $('returnsStepNav').innerHTML=dots;
  if(rt.step===0)renderReturnFind();
  else if(rt.step===1)renderReturnSelectItems();
  else if(rt.step===2)renderReturnReason();
  else if(rt.step===3)renderReturnResolution();
  else if(rt.step===4)renderReturnConfirm();
  else if(rt.step===5)renderReturnSuccess();
}
function renderReturnFind(){
  $('returnsStepBody').innerHTML=`<p class="step-label"><span class="step-num">01</span>Find your order</p>
    <h3>Returns made <em>simple.</em></h3>
    <p class="sub">${escapeHtml(db.policy.text)}</p>
    <div class="field"><label>Order Number</label><input id="rt_oid" placeholder="#UH-10845" value="${escapeHtml(rt.orderId)}"></div>
    <div class="field"><label>Email Address</label><input id="rt_email" placeholder="your@email.com" value="${escapeHtml(rt.email)}"></div>
    <div style="background:var(--cream-2);padding:14px;border-radius:6px;font-size:13px;color:var(--ink-soft);margin-bottom:8px">💡 <strong>Demo tip:</strong> Try Order <code>#UH-10845</code> with email <code>rohan.k@example.in</code> — or any of the other demo orders.</div>
    <div class="step-actions"><button class="btn-back" onclick="closeModal('returnsModal')">Cancel</button><button class="btn-next" onclick="findOrder()">Find Order →</button></div>`;
}
function findOrder(){
  const oid=$('rt_oid').value.trim();const email=$('rt_email').value.trim().toLowerCase();
  const order=db.orders.find(o=>o.id.toLowerCase()===oid.toLowerCase()&&o.email.toLowerCase()===email);
  if(!order){toast("Couldn't find an order matching those details.");return}
  rt.orderId=order.id;rt.email=email;rt.orderFound=order;rt.step=1;renderReturnStep();
}
function renderReturnSelectItems(){
  const items=rt.orderFound.items.map(id=>db.products.find(p=>p.id===id)).filter(Boolean);
  $('returnsStepBody').innerHTML=`<p class="step-label"><span class="step-num">02</span>Select items to return</p>
    <h3>What's <em>going back?</em></h3>
    <p class="sub">Choose items from order ${rt.orderFound.id}.</p>
    ${items.map(i=>`<div class="item-row ${rt.selectedItems.includes(i.id)?'selected':''}" onclick="toggleItem('${i.id}')"><div class="item-thumb">${productSVG(i,'rt-'+i.id)}</div><div class="item-info"><div class="nm">${escapeHtml(i.name)}</div><div class="meta">${escapeHtml(i.cat)}</div><div class="pr">${inr(i.price)}</div></div><div class="item-check"></div></div>`).join('')}
    <div class="step-actions"><button class="btn-back" onclick="rt.step=0;renderReturnStep()">← Back</button><button class="btn-next" onclick="advanceTo(2)" ${rt.selectedItems.length?'':'disabled'}>Continue →</button></div>`;
}
function toggleItem(id){const i=rt.selectedItems.indexOf(id);if(i>-1)rt.selectedItems.splice(i,1);else rt.selectedItems.push(id);renderReturnStep()}
function advanceTo(s){
  if(s===2&&!rt.selectedItems.length)return toast('Select at least one item.');
  if(s===3&&!rt.reason)return toast('Please select a reason.');
  if(s===4&&(!rt.resolution||!rt.method))return toast('Pick a resolution and return method.');
  rt.step=s;renderReturnStep();
}
function renderReturnReason(){
  $('returnsStepBody').innerHTML=`<p class="step-label"><span class="step-num">03</span>Tell us why</p>
    <h3>What went <em>wrong?</em></h3>
    <p class="sub">This helps us improve. We never penalise honest feedback.</p>
    <div class="field"><label>Reason</label><select id="rt_reason"><option value="">Choose a reason…</option>${db.returnReasons.map(r=>`<option ${rt.reason===r?'selected':''}>${escapeHtml(r)}</option>`).join('')}</select></div>
    <div class="field"><label>Additional Notes (optional)</label><textarea id="rt_note" placeholder="e.g., Sleeve too long, color a bit darker than online…">${escapeHtml(rt.note)}</textarea></div>
    <div class="field"><label>Upload Photos (recommended for damage / defect)</label>
      <label class="photo-up" for="rt_file"><svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg><p>Click to upload · JPG, PNG up to 5MB each</p></label>
      <input type="file" id="rt_file" accept="image/*" multiple style="display:none" onchange="handlePhotoUpload(event)">
      <div class="photo-preview">${rt.photos.map((p,i)=>`<div class="ph" style="background-image:url('${p}')"><button onclick="rt.photos.splice(${i},1);renderReturnStep()">×</button></div>`).join('')}</div>
    </div>
    <div class="step-actions"><button class="btn-back" onclick="rt.step=1;renderReturnStep()">← Back</button><button class="btn-next" onclick="captureReason()">Continue →</button></div>`;
}
function captureReason(){rt.reason=$('rt_reason').value;rt.note=$('rt_note').value.trim();if(!rt.reason)return toast('Select a reason.');advanceTo(3)}
function handlePhotoUpload(e){const files=Array.from(e.target.files).slice(0,4);files.forEach(f=>{const r=new FileReader();r.onload=ev=>{rt.photos.push(ev.target.result);renderReturnStep()};r.readAsDataURL(f)})}
function renderReturnResolution(){
  const bonus=db.policy.bonusForStoreCredit;
  window._rtResolutions=[
    {v:"Refund to original payment",h:`Money back to the same card or wallet within ${db.policy.refundDays} business days.`,icon:'<path d="M3 7h18v10H3zM3 11h18"/>'},
    {v:`Instant store credit${bonus?` (+${bonus}% bonus)`:''}`,h:bonus?`Get ${bonus}% extra to spend now — credited instantly when we receive your return.`:'Store credit issued instantly when we receive the item.',icon:'<path d="M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"/>'},
    {v:"Exchange for different size/colour",h:"Pick something else from our catalog — we'll ship the swap free.",icon:'<path d="m17 1 4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="m7 23-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>'}
  ];
  window._rtMethods=[
    {v:"Free courier pickup",h:"We send a partner to collect from your address — schedule any time slot.",icon:'<path d="M3 8h12v8H3z"/><path d="M15 11h3l3 3v2h-6"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>'},
    {v:"Drop-off at partner location",h:"Drop at any nearby partner store — no printer needed, just show your QR.",icon:'<path d="M3 9h18l-2 11H5z"/><path d="M9 9V5a3 3 0 0 1 6 0v4"/>'},
    {v:"Drop-off at UnifieD HousE store",h:"Visit any of our 12 city stores. Instant inspection, faster refund.",icon:'<path d="M3 21V8l9-5 9 5v13"/><path d="M9 21V12h6v9"/>'}
  ];
  const resolutions=window._rtResolutions;const methods=window._rtMethods;
  $('returnsStepBody').innerHTML=`<p class="step-label"><span class="step-num">04</span>How should we resolve it?</p>
    <h3>Pick what works <em>for you.</em></h3>
    <h4 style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:18px 0 10px">Resolution</h4>
    ${resolutions.map((r,i)=>`<div class="opt-card ${rt.resolution===r.v?'selected':''}" onclick="pickResolution(${i})"><div class="opt-radio"></div><div class="opt-icon"><svg viewBox="0 0 24 24">${r.icon}</svg></div><div><h5>${escapeHtml(r.v)}</h5><p>${escapeHtml(r.h)}</p></div></div>`).join('')}
    <h4 style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:24px 0 10px">Return Method</h4>
    ${methods.map((m,i)=>`<div class="opt-card ${rt.method===m.v?'selected':''}" onclick="pickMethod(${i})"><div class="opt-radio"></div><div class="opt-icon"><svg viewBox="0 0 24 24">${m.icon}</svg></div><div><h5>${escapeHtml(m.v)}</h5><p>${escapeHtml(m.h)}</p></div></div>`).join('')}
    <div class="step-actions"><button class="btn-back" onclick="rt.step=2;renderReturnStep()">← Back</button><button class="btn-next" onclick="advanceTo(4)" ${(rt.resolution&&rt.method)?'':'disabled'}>Review →</button></div>`;
}
function renderReturnConfirm(){
  const items=rt.selectedItems.map(id=>db.products.find(p=>p.id===id)).filter(Boolean);
  const total=items.reduce((s,i)=>s+i.price,0);
  $('returnsStepBody').innerHTML=`<p class="step-label"><span class="step-num">05</span>Review &amp; submit</p>
    <h3>Almost <em>done.</em></h3>
    <p class="sub">Confirm before we generate your RMA.</p>
    <div class="summary-box">
      <div class="summary-row"><span>Order</span><span>${rt.orderFound.id}</span></div>
      <div class="summary-row"><span>Customer</span><span>${escapeHtml(rt.orderFound.name)}</span></div>
      <div class="summary-row"><span>Items returning</span><span>${items.map(i=>escapeHtml(i.name)).join('<br>')}</span></div>
      <div class="summary-row"><span>Item value</span><span>${inr(total)}</span></div>
      <div class="summary-row"><span>Reason</span><span>${escapeHtml(rt.reason)}</span></div>
      <div class="summary-row"><span>Resolution</span><span>${escapeHtml(rt.resolution)}</span></div>
      <div class="summary-row"><span>Return via</span><span>${escapeHtml(rt.method)}</span></div>
      ${rt.note?`<div class="summary-row"><span>Note</span><span>${escapeHtml(rt.note)}</span></div>`:''}
      ${rt.photos.length?`<div class="summary-row"><span>Photos</span><span>${rt.photos.length} attached</span></div>`:''}
    </div>
    <div style="font-size:12px;color:var(--ink-soft);background:var(--cream-2);padding:12px;border-radius:6px;line-height:1.6">By submitting, you agree to our returns policy. We'll email a tracking link and (if applicable) a prepaid label within 1 business day.</div>
    <div class="step-actions"><button class="btn-back" onclick="rt.step=3;renderReturnStep()">← Back</button><button class="btn-next" onclick="submitReturn()">Submit Return Request →</button></div>`;
}
async function submitReturn(){
  const rmaNum="RMA-"+Date.now().toString().slice(-5);
  const localRecord = {id:rmaNum,orderId:rt.orderFound.id,customer:rt.orderFound.name,email:rt.orderFound.email,itemIds:[...rt.selectedItems],reason:rt.reason,resolution:rt.resolution,method:rt.method,note:rt.note,photos:rt.photos.length?[rt.photos[0]]:[],status:"pending",createdAt:new Date().toISOString(),timeline:[{t:new Date().toISOString(),e:"Return request submitted by customer"}]};
  db.returns.unshift(localRecord);
  if (SUPA_OK()) {
    showLoading();
    try {
      await supabaseClient.from('returns').insert({
        id: rmaNum,
        order_id: rt.orderFound.id,
        customer: rt.orderFound.name,
        email: rt.orderFound.email,
        item_ids: rt.selectedItems,
        reason: rt.reason,
        resolution: rt.resolution,
        method: rt.method,
        note: rt.note,
        photos: rt.photos.length?[rt.photos[0]]:[],
        status: 'pending'
      });
    } catch(err){ console.error('submitReturn:', err); toast('⚠ Submit failed. Try again.'); }
    finally { hideLoading(); }
  }
  rt.rmaNum=rmaNum;rt.step=5;renderReturnStep();
}
function renderReturnSuccess(){
  $('returnsStepNav').innerHTML='<div class="step-dot done"></div>'.repeat(5);
  const isCredit=rt.resolution.toLowerCase().includes('credit');
  const isExchange=rt.resolution.toLowerCase().includes('exchange');
  $('returnsStepBody').innerHTML=`<div style="text-align:center;padding:8px 0">
    <div class="lock-icon" style="background:var(--sage);color:white;width:64px;height:64px"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="9"/></svg></div>
    <h3 style="text-align:center">Return <em>received.</em></h3>
    <p class="sub" style="text-align:center;max-width:380px;margin:0 auto 8px">Your return request is in. Save your RMA number — you'll need it for tracking.</p></div>
    <div class="rma-box"><div class="label">Your RMA Number</div><div class="num">${rt.rmaNum}</div><div class="hint">A confirmation email is on its way to ${escapeHtml(rt.email)}</div></div>
    <div style="background:var(--cream-2);padding:18px;border-radius:6px;font-size:13px;line-height:1.7;color:var(--ink-soft)">
      <strong style="color:var(--ink);display:block;margin-bottom:8px">What happens next?</strong>
      • Our team reviews within 24 hours.<br>• You'll get a prepaid label or pickup confirmation by email.<br>• Once received, your ${isCredit?'store credit lands instantly':isExchange?'replacement ships out same day':'refund hits your account within '+db.policy.refundDays+' business days'}.
    </div>
    <button class="btn-next" style="width:100%;margin-top:20px" onclick="closeModal('returnsModal')">Done</button>`;
}

function pickResolution(i){ rt.resolution = window._rtResolutions[i].v; renderReturnStep(); }
function pickMethod(i){ rt.method = window._rtMethods[i].v; renderReturnStep(); }

/* ============== IMAGE UPLOAD (admin) ============== */
function handleImageUpload(e, prefix){
  const file = e.target.files[0]; if(!file) return;
  if(file.size > 5*1024*1024) return toast('Image too large (max 5MB).');
  compressImage(file, 800, 0.85).then(dataUrl=>{
    const sizeKB = Math.round(dataUrl.length / 1024);
    if(dataUrl.length > 1024*1024) toast(`Heads up: this image is ${sizeKB}KB — large images may slow saves.`);
    document.getElementById(prefix+'_image').value = dataUrl;
    document.getElementById(prefix+'_preview').innerHTML = `<img src="${dataUrl}">`;
  }).catch(()=>toast('Could not read that image.'));
  e.target.value = ''; // allow re-uploading the same file
}
function clearImage(prefix){
  document.getElementById(prefix+'_image').value = '';
  document.getElementById(prefix+'_preview').innerHTML = '<div class="empty">Gradient placeholder</div>';
}
function compressImage(file, maxDim, quality){
  return new Promise((resolve, reject)=>{
    const reader = new FileReader();
    reader.onload = e => {
      const img = new Image();
      img.onload = ()=>{
        const ratio = Math.min(maxDim/img.width, maxDim/img.height, 1);
        const w = Math.round(img.width*ratio), h = Math.round(img.height*ratio);
        const canvas = document.createElement('canvas');
        canvas.width = w; canvas.height = h;
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h); // white bg in case of transparent PNG
        ctx.drawImage(img, 0, 0, w, h);
        try { resolve(canvas.toDataURL('image/jpeg', quality)); }
        catch(err){ reject(err); }
      };
      img.onerror = reject;
      img.src = e.target.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

/* ============== PRODUCT DETAIL & CART ============== */
let _pdQty = 1;
function getQty(){ return _pdQty; }
function adjustQty(delta){
  _pdQty = Math.max(1, Math.min(10, _pdQty + delta));
  const el = document.getElementById('qtyVal'); if(el) el.textContent = _pdQty;
}
function openProductDetail(id){
  const p = db.products.find(x=>x.id===id); if(!p) return;
  _pdQty = 1;
  $('productModalBody').innerHTML = `
    <div class="pd-grid">
      <div class="pd-img">${productImageHTML(p)}</div>
      <div>
        <p class="pd-cat">${escapeHtml(p.cat)}</p>
        <h3 class="pd-name">${escapeHtml(p.name)}</h3>
        <div class="pd-price">
          <span class="now">${inr(p.price)}</span>
          ${p.was?`<span class="was">${inr(p.was)}</span>`:''}
          ${p.was?`<span class="off">${Math.round((1-p.price/p.was)*100)}% off</span>`:''}
        </div>
        <p class="pd-desc">${escapeHtml(p.description||'A beautifully crafted piece, made for everyday living.')}</p>
        <p style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:8px">Quantity</p>
        <div class="qty-selector">
          <button onclick="adjustQty(-1)">−</button>
          <span id="qtyVal">1</span>
          <button onclick="adjustQty(1)">+</button>
        </div>
        <p class="pd-stock ${p.stock<10?'low':''}">${p.stock>0 ? (p.stock<10?'⚠ Only '+p.stock+' left in stock':'In stock · '+p.stock+' available') : 'Out of stock'}</p>
        <div class="pd-actions">
          <button class="btn-primary" style="justify-content:center" onclick="addToCart('${p.id}', getQty()); closeModal('productModal')" ${p.stock<=0?'disabled':''}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>
            Add to Cart
          </button>
          <button class="btn-buy" onclick="buyNow('${p.id}', getQty())" ${p.stock<=0?'disabled':''}>Buy Now →</button>
        </div>
        <div style="margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);line-height:1.7">
          ✓ Free shipping over ₹1,499 &nbsp;·&nbsp; ✓ ${db.policy.windowDays}-day returns &nbsp;·&nbsp; ✓ Secure payment
        </div>
      </div>
    </div>`;
  openModal('productModal');
}

function addToCart(productId, qty){
  qty = qty || 1;
  const existing = db.cart.find(c=>c.productId===productId);
  let newQty;
  if(existing){
    existing.qty = Math.min(10, existing.qty + qty);
    newQty = existing.qty;
  } else {
    db.cart.push({productId, qty});
    newQty = qty;
  }
  saveCartItem(productId, newQty);
  renderCartBadge();
  toast('Added to cart');
}
function buyNow(productId, qty){
  addToCart(productId, qty);
  closeModal('productModal');
  setTimeout(openCheckout, 250);
}
function removeFromCart(productId){
  db.cart = db.cart.filter(c=>c.productId!==productId);
  saveCartItem(productId, 0);
  renderCartBadge(); openCart();
}
function updateCartQty(productId, delta){
  const item = db.cart.find(c=>c.productId===productId);
  if(!item) return;
  item.qty = Math.max(1, Math.min(10, item.qty + delta));
  saveCartItem(productId, item.qty);
  renderCartBadge(); openCart();
}
function getCartCount(){ return db.cart.reduce((s,i)=>s+i.qty, 0); }
function getCartItems(){ return db.cart.map(c=>{ const p=db.products.find(x=>x.id===c.productId); return p?{...p,qty:c.qty}:null; }).filter(Boolean); }
function renderCartBadge(){
  const count = getCartCount();
  const badge = $('cartBadge');
  if(!badge) return;
  badge.textContent = count;
  badge.style.display = count > 0 ? 'flex' : 'none';
}

function openCart(){
  const items = getCartItems();
  if(items.length === 0){
    $('cartModalBody').innerHTML = `
      <h3>Your <em>cart</em> is empty.</h3>
      <p class="sub">Add a few favourites and they'll show up here.</p>
      <div class="cart-empty">
        <svg viewBox="0 0 24 24"><path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>
        <p>Nothing here yet.</p>
        <button class="btn-primary" onclick="closeModal('cartModal');document.getElementById('new').scrollIntoView({behavior:'smooth'})">Browse Products</button>
      </div>`;
    openModal('cartModal');
    return;
  }
  const subtotal = items.reduce((s,i)=>s+i.price*i.qty, 0);
  const shipping = subtotal >= 1499 ? 0 : 99;
  const tax = Math.round(subtotal * 0.05);
  const total = subtotal + shipping + tax;
  $('cartModalBody').innerHTML = `
    <h3>Your <em>cart</em>.</h3>
    <p class="sub">${getCartCount()} item${getCartCount()===1?'':'s'} · review and checkout when ready.</p>
    <div>${items.map(i=>`
      <div class="cart-item">
        <div class="cart-item-img">${productImageHTML(i)}</div>
        <div class="cart-item-info">
          <h5>${escapeHtml(i.name)}</h5>
          <div class="meta">${escapeHtml(i.cat)} · ${inr(i.price)} each</div>
          <div class="cart-item-controls">
            <div class="cart-qty">
              <button onclick="updateCartQty('${i.id}', -1)">−</button>
              <span>${i.qty}</span>
              <button onclick="updateCartQty('${i.id}', 1)">+</button>
            </div>
            <span class="cart-item-price">${inr(i.price * i.qty)}</span>
            <button class="cart-item-remove" onclick="removeFromCart('${i.id}')">Remove</button>
          </div>
        </div>
      </div>`).join('')}
    </div>
    <div class="cart-summary">
      <div class="row"><span>Subtotal</span><span>${inr(subtotal)}</span></div>
      <div class="row muted"><span>Shipping</span><span>${shipping?inr(shipping):'Free'}</span></div>
      <div class="row muted"><span>GST (5%)</span><span>${inr(tax)}</span></div>
      <div class="row total"><span>Total</span><span>${inr(total)}</span></div>
    </div>
    <button class="btn-primary" style="width:100%;justify-content:center;margin-top:16px" onclick="closeModal('cartModal');setTimeout(openCheckout,200)">
      Proceed to Checkout · ${inr(total)} →
    </button>
    <button class="btn-ghost" style="width:100%;margin-top:8px;text-align:center;display:block" onclick="closeModal('cartModal')">Continue Shopping</button>`;
  openModal('cartModal');
}

/* ============== INVOICE PDF GENERATION (Indian GST Tax Invoice) ============== */
// Generates a Rule 46 / Section 31 compliant GST tax invoice PDF using jsPDF.
// Mandatory fields: Supplier name/address/GSTIN, Invoice No., Date, Customer details,
// Place of supply, Item description with qty/rate/taxable value, GST split (CGST+SGST or IGST),
// Total invoice value, words. (For B2C under ₹5cr turnover, IRP/IRN not required.)
// Note: For real GST compliance, set your actual GSTIN, legal name, and registered address
// in Admin → Settings → Site Identity.

function numberToWords(num){
  const a = ['','One','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten','Eleven','Twelve','Thirteen','Fourteen','Fifteen','Sixteen','Seventeen','Eighteen','Nineteen'];
  const b = ['','','Twenty','Thirty','Forty','Fifty','Sixty','Seventy','Eighty','Ninety'];
  function below1000(n){
    if(n<20) return a[n];
    if(n<100) return b[Math.floor(n/10)] + (n%10 ? ' ' + a[n%10] : '');
    return a[Math.floor(n/100)] + ' Hundred' + (n%100 ? ' ' + below1000(n%100) : '');
  }
  if(num===0) return 'Zero';
  const crore = Math.floor(num/10000000); num %= 10000000;
  const lakh  = Math.floor(num/100000);   num %= 100000;
  const thousand = Math.floor(num/1000);  num %= 1000;
  let result = '';
  if(crore) result += below1000(crore) + ' Crore ';
  if(lakh) result += below1000(lakh) + ' Lakh ';
  if(thousand) result += below1000(thousand) + ' Thousand ';
  if(num) result += below1000(num);
  return result.trim();
}

function downloadInvoice(order){
  if (typeof window.jspdf === 'undefined') {
    toast('⚠ Invoice library failed to load. Check your internet connection.');
    return;
  }
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF({ unit: 'mm', format: 'a4' });
  const pageW = doc.internal.pageSize.getWidth();
  const margin = 14;
  const s = db.site;
  const isInterstate = (s.sellerState||'').toLowerCase() !== (order.state||'').toLowerCase();
  const cgst = order.cgst || 0, sgst = order.sgst || 0, igst = order.igst || 0;
  const taxableValue = order.subtotal;
  const grandTotal = order.total;

  // Header — terra-cotta accent stripe
  doc.setFillColor(184, 85, 61);
  doc.rect(0, 0, pageW, 4, 'F');

  // Title
  doc.setFont('helvetica', 'bold'); doc.setFontSize(20); doc.setTextColor(26,22,18);
  doc.text('TAX INVOICE', pageW/2, 18, { align: 'center' });
  doc.setFont('helvetica', 'normal'); doc.setFontSize(8); doc.setTextColor(100);
  doc.text('Original for Recipient', pageW/2, 23, { align: 'center' });

  // Seller block
  doc.setFontSize(11); doc.setFont('helvetica', 'bold'); doc.setTextColor(26,22,18);
  doc.text(s.legalName || 'UnifieD HousE Retail Pvt. Ltd.', margin, 34);
  doc.setFont('helvetica', 'normal'); doc.setFontSize(9);
  const sellerLines = doc.splitTextToSize(s.sellerAddress || '4th Floor, Indiranagar 100ft Road, Bangalore — 560038, Karnataka', pageW/2 - margin);
  doc.text(sellerLines, margin, 39);
  let yAfterSeller = 39 + sellerLines.length * 4;
  doc.text(`GSTIN: ${s.gstin || '29AAACU1234A1Z5'}`, margin, yAfterSeller + 2);
  doc.text(`PAN: ${s.pan || 'AAACU1234A'}`, margin, yAfterSeller + 7);
  doc.text(`Email: ${s.contactEmail||''}   Phone: ${s.contactPhone||''}`, margin, yAfterSeller + 12);

  // Invoice meta block (right side)
  const metaX = pageW/2 + 5;
  doc.setFont('helvetica','bold'); doc.setFontSize(9);
  doc.text('Invoice No.:', metaX, 34);
  doc.text('Invoice Date:', metaX, 39);
  doc.text('Order ID:', metaX, 44);
  doc.text('Place of Supply:', metaX, 49);
  doc.text('Payment Mode:', metaX, 54);
  doc.setFont('helvetica','normal');
  doc.text(order.invoice_number || '—', metaX + 32, 34);
  doc.text(new Date(order.invoice_date || Date.now()).toLocaleDateString('en-IN'), metaX + 32, 39);
  doc.text(order.id || '—', metaX + 32, 44);
  doc.text(order.state || '—', metaX + 32, 49);
  doc.text(order.payment_method || '—', metaX + 32, 54);

  // Bill To / Ship To
  let y = Math.max(yAfterSeller + 22, 64);
  doc.setDrawColor(220,210,195); doc.setLineWidth(0.3);
  doc.line(margin, y - 4, pageW - margin, y - 4);

  doc.setFont('helvetica','bold'); doc.setFontSize(9); doc.setTextColor(120);
  doc.text('BILL TO', margin, y);
  doc.text('SHIP TO', metaX, y);

  doc.setFont('helvetica','normal'); doc.setFontSize(10); doc.setTextColor(26,22,18);
  doc.text(order.name || '—', margin, y + 5);
  const billLines = doc.splitTextToSize([order.address, order.city, order.state, order.pincode].filter(Boolean).join(', '), pageW/2 - margin - 5);
  doc.setFontSize(9);
  doc.text(billLines, margin, y + 10);
  doc.text(`Phone: ${order.phone||'—'}`, margin, y + 10 + billLines.length * 4 + 2);
  doc.text(`Email: ${order.email||'—'}`, margin, y + 10 + billLines.length * 4 + 6);
  if (order.gstin) doc.text(`GSTIN: ${order.gstin}`, margin, y + 10 + billLines.length * 4 + 10);

  // Ship-to (same as bill-to)
  doc.setFontSize(10); doc.text(order.name || '—', metaX, y + 5);
  doc.setFontSize(9); doc.text(billLines, metaX, y + 10);

  // Items table — using autoTable plugin
  const itemsStartY = y + 10 + billLines.length * 4 + 16;
  const items = order.items || [];
  const rows = items.map((it, idx) => {
    const taxable = it.price * it.qty;
    const gstRate = '5%';
    const gst = Math.round(taxable * 0.05);
    return [
      idx + 1,
      it.name,
      '6217', // HSN code (placeholder — ideally per-product)
      it.qty,
      'PCS',
      inr(it.price),
      inr(taxable),
      gstRate,
      inr(gst),
      inr(taxable + gst)
    ];
  });

  doc.autoTable({
    startY: itemsStartY,
    head: [['#', 'Description', 'HSN', 'Qty', 'UOM', 'Rate', 'Taxable', 'GST%', 'Tax', 'Total']],
    body: rows,
    theme: 'grid',
    headStyles: { fillColor: [26,22,18], textColor: [244,237,226], fontSize: 8, fontStyle: 'bold' },
    bodyStyles: { fontSize: 8, textColor: [26,22,18] },
    columnStyles: {
      0: { cellWidth: 8, halign: 'center' },
      1: { cellWidth: 50 },
      2: { cellWidth: 14, halign: 'center' },
      3: { cellWidth: 10, halign: 'center' },
      4: { cellWidth: 12, halign: 'center' },
      5: { cellWidth: 18, halign: 'right' },
      6: { cellWidth: 20, halign: 'right' },
      7: { cellWidth: 12, halign: 'center' },
      8: { cellWidth: 16, halign: 'right' },
      9: { cellWidth: 22, halign: 'right' }
    },
    margin: { left: margin, right: margin }
  });

  // Totals block
  let totalsY = doc.lastAutoTable.finalY + 6;
  const labelX = pageW - margin - 70;
  const valX = pageW - margin;
  doc.setFontSize(9); doc.setTextColor(26,22,18);

  function addTotal(label, value, bold){
    if (bold) doc.setFont('helvetica','bold'); else doc.setFont('helvetica','normal');
    doc.text(label, labelX, totalsY);
    doc.text(value, valX, totalsY, { align: 'right' });
    totalsY += 5;
  }
  addTotal('Taxable Amount:', inr(taxableValue));
  if (isInterstate) {
    addTotal('IGST (5%):', inr(igst));
  } else {
    addTotal('CGST (2.5%):', inr(cgst));
    addTotal('SGST (2.5%):', inr(sgst));
  }
  addTotal('Shipping:', order.shipping ? inr(order.shipping) : 'Free');
  doc.setDrawColor(26,22,18); doc.setLineWidth(0.5);
  doc.line(labelX, totalsY - 2, valX, totalsY - 2);
  totalsY += 1;
  addTotal('Grand Total:', inr(grandTotal), true);

  // Amount in words
  totalsY += 4;
  doc.setFont('helvetica','italic'); doc.setFontSize(9);
  const words = `Amount in words: Rupees ${numberToWords(Math.floor(grandTotal))} Only`;
  const wordsLines = doc.splitTextToSize(words, pageW - 2*margin);
  doc.text(wordsLines, margin, totalsY);
  totalsY += wordsLines.length * 5 + 5;

  // Footer notes
  doc.setFont('helvetica','normal'); doc.setFontSize(8); doc.setTextColor(100);
  doc.text('Declaration: We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.', margin, totalsY, { maxWidth: pageW - 2*margin });
  totalsY += 8;
  doc.text(`This is a computer-generated invoice and does not require a physical signature. For queries, contact ${s.contactEmail||''}.`, margin, totalsY, { maxWidth: pageW - 2*margin });

  // Signature block bottom-right
  doc.setFont('helvetica','normal'); doc.setFontSize(9); doc.setTextColor(26,22,18);
  doc.text(`For ${s.legalName || 'UnifieD HousE Retail Pvt. Ltd.'}`, pageW - margin, 275, { align: 'right' });
  doc.setFont('helvetica','italic'); doc.setFontSize(8); doc.setTextColor(120);
  doc.text('Authorised Signatory', pageW - margin, 285, { align: 'right' });

  // Bottom stripe
  doc.setFillColor(184, 85, 61);
  doc.rect(0, 293, pageW, 4, 'F');

  // Save with invoice-friendly filename
  const filename = (order.invoice_number || 'invoice').replace(/[^a-zA-Z0-9]/g,'_') + '.pdf';
  doc.save(filename);
  toast('Invoice downloaded.');
}
function openCheckout(){
  if(getCartCount() === 0){ openCart(); return; }
  renderCheckout();
  openModal('checkoutModal');
}
function renderCheckout(){
  const cart = getCartItems();
  const subtotal = cart.reduce((s,i)=>s+i.price*i.qty, 0);
  const shipping = subtotal >= 1499 ? 0 : 99;
  const tax = Math.round(subtotal * 0.05);
  const total = subtotal + shipping + tax;
  window._cartTotal = total;
  $('checkoutBody').innerHTML = `
    <h3>Secure <em>checkout.</em></h3>
    <p class="sub">A GST tax invoice will be emailed and available for download after payment.</p>
    <div class="checkout-grid">
      <div>
        <h4 style="font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;margin-bottom:14px;color:var(--ink-soft)">Shipping &amp; Invoice Details</h4>
        <div class="field-row"><div class="field"><label>Full Name *</label><input id="sh_name" required placeholder="Your name as on invoice"></div><div class="field"><label>Phone *</label><input id="sh_phone" required placeholder="+91 98765 43210"></div></div>
        <div class="field"><label>Email *</label><input id="sh_email" type="email" required placeholder="for order confirmation &amp; invoice"></div>
        <div class="field"><label>Shipping Address *</label><textarea id="sh_addr" required rows="2" placeholder="House / Flat, Street, Area"></textarea></div>
        <div class="field-row"><div class="field"><label>City *</label><input id="sh_city" required></div><div class="field"><label>PIN Code *</label><input id="sh_pin" required maxlength="6" pattern="[0-9]{6}"></div></div>
        <div class="field-row"><div class="field"><label>State *</label><select id="sh_state" required>
          <option value="">Select state…</option>
          ${['Andhra Pradesh','Arunachal Pradesh','Assam','Bihar','Chhattisgarh','Delhi','Goa','Gujarat','Haryana','Himachal Pradesh','Jharkhand','Karnataka','Kerala','Madhya Pradesh','Maharashtra','Manipur','Meghalaya','Mizoram','Nagaland','Odisha','Punjab','Rajasthan','Sikkim','Tamil Nadu','Telangana','Tripura','Uttar Pradesh','Uttarakhand','West Bengal','Andaman &amp; Nicobar','Chandigarh','Dadra &amp; Nagar Haveli','Daman &amp; Diu','Jammu &amp; Kashmir','Ladakh','Lakshadweep','Puducherry'].map(s=>`<option>${s}</option>`).join('')}
        </select></div><div class="field"><label>GSTIN (optional)</label><input id="sh_gstin" placeholder="22AAAAA0000A1Z5" maxlength="15"></div></div>

        <div class="razorpay-banner" style="margin-top:24px">
          <div class="razorpay-logo">R</div>
          <div><h5>Pay securely with Razorpay</h5><p>UPI · Cards · Net Banking · Wallets — all in one secure window. PCI-DSS Level 1 vault.</p></div>
        </div>
        <button class="btn-primary" style="width:100%;justify-content:center" onclick="proceedToPay(${total})">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
          Pay ${inr(total)} Securely
        </button>
        <p style="font-size:11px;color:var(--ink-soft);text-align:center;margin-top:10px">256-bit SSL &nbsp;·&nbsp; PCI-DSS Compliant &nbsp;·&nbsp; 3D Secure</p>
      </div>
      <div class="pay-summary">
        <h4>Order Summary</h4>
        ${cart.map(i=>`<div class="pay-line"><span>${escapeHtml(i.name)} × ${i.qty}</span><span>${inr(i.price*i.qty)}</span></div>`).join('')}
        <div class="pay-line"><span>Subtotal</span><span>${inr(subtotal)}</span></div>
        <div class="pay-line"><span>Shipping</span><span>${shipping?inr(shipping):'Free'}</span></div>
        <div class="pay-line"><span>GST (5%)</span><span>${inr(tax)}</span></div>
        <div class="pay-total"><span>Total</span><span>${inr(total)}</span></div>
        <p style="font-size:11px;color:var(--ink-soft);margin-top:14px;line-height:1.5">By placing this order, you agree to our Terms and ${db.policy.windowDays}-day Returns Policy.</p>
      </div>
    </div>`;
}

function validateShipping(){
  const required = ['sh_name','sh_phone','sh_email','sh_addr','sh_city','sh_pin','sh_state'];
  for(const id of required){ if(!$(id).value.trim()){ toast('Please fill all required fields.'); $(id).focus(); return false; } }
  if(!/^[0-9]{6}$/.test($('sh_pin').value.trim())) { toast('PIN code must be 6 digits.'); return false; }
  if(!/^[^@]+@[^@]+\.[^@]+$/.test($('sh_email').value.trim())) { toast('Enter a valid email.'); return false; }
  return true;
}
function proceedToPay(amount){ if(!validateShipping()) return; payWithRazorpay(amount); }
function payWithRazorpay(amount){
  if(typeof Razorpay === 'undefined'){ paymentSuccess('Razorpay (Demo)', amount); return; }
  const options = {
    key: 'rzp_test_DEMOKEYREPLACEME',
    amount: amount * 100, currency: 'INR',
    name: 'UnifieD HousE', description: 'Order Payment',
    handler: r => paymentSuccess('Razorpay', amount, r.razorpay_payment_id),
    prefill: {
      name: $('sh_name')?.value || '',
      email: $('sh_email')?.value || db.site.contactEmail,
      contact: $('sh_phone')?.value || ''
    },
    notes: { merchant_order_id: 'UH-' + Date.now() },
    theme: { color: '#b8553d' },
    modal: { ondismiss: ()=>toast('Payment cancelled.') }
  };
  try {
    const rzp = new Razorpay(options);
    rzp.on('payment.failed', e => toast('Payment failed: ' + (e.error?.description||'Try again')));
    rzp.open();
  } catch(e){ paymentSuccess('Razorpay (Demo)', amount); }
}
async function paymentSuccess(method, amount, txnId){
  const orderId = '#UH-' + Date.now().toString().slice(-6);
  const cartItems = getCartItems();
  const subtotal = cartItems.reduce((s,i)=>s+i.price*i.qty, 0);
  const shipping = subtotal >= 1499 ? 0 : 99;
  const tax = Math.round(subtotal * 0.05);

  // Capture customer + shipping info from form
  const customer = {
    name: $('sh_name')?.value.trim() || 'Customer',
    email: $('sh_email')?.value.trim() || db.site.contactEmail || '',
    phone: $('sh_phone')?.value.trim() || '',
    address: $('sh_addr')?.value.trim() || '',
    city: $('sh_city')?.value.trim() || '',
    state: $('sh_state')?.value || '',
    pincode: $('sh_pin')?.value.trim() || '',
    gstin: $('sh_gstin')?.value.trim() || ''
  };

  // GST split: intra-state → CGST + SGST (each half of tax); inter-state → IGST (full tax)
  const sellerState = (db.site.sellerState || 'Karnataka').toLowerCase();
  const buyerState = customer.state.toLowerCase();
  const isInterstate = buyerState && buyerState !== sellerState;
  const cgst = isInterstate ? 0 : Math.round(tax / 2);
  const sgst = isInterstate ? 0 : tax - cgst; // ensures cgst+sgst==tax exactly
  const igst = isInterstate ? tax : 0;

  // Invoice number: prefix + zero-padded sequence (counter from existing orders)
  const invoiceNumber = (db.site.invoicePrefix || 'UH/2026/') + String(1000 + db.orders.length + 1).padStart(5, '0');
  const invoiceDate = new Date().toISOString();

  const orderRecord = {
    id: orderId,
    name: customer.name, email: customer.email, phone: customer.phone,
    address: customer.address, city: customer.city, state: customer.state,
    pincode: customer.pincode, gstin: customer.gstin,
    items: cartItems.map(i=>({id:i.id, name:i.name, qty:i.qty, price:i.price})),
    subtotal, shipping, tax, cgst, sgst, igst, total: amount,
    payment_method: method, payment_id: txnId || null,
    invoice_number: invoiceNumber, invoice_date: invoiceDate,
    status: 'confirmed'
  };

  // Local update for instant UI
  db.orders.unshift({ ...orderRecord });

  // Persist to Supabase: order + invoice + clear cart
  if (SUPA_OK()) {
    showLoading();
    try {
      await supabaseClient.from('orders').insert(orderRecord);
      await supabaseClient.from('invoices').insert({
        invoice_number: invoiceNumber,
        order_id: orderId,
        customer_name: customer.name,
        customer_email: customer.email,
        customer_address: [customer.address, customer.city, customer.state, customer.pincode].filter(Boolean).join(', '),
        customer_gstin: customer.gstin || null,
        place_of_supply: customer.state,
        items: orderRecord.items,
        subtotal, cgst, sgst, igst, total: amount,
        is_interstate: isInterstate
      });
      await supabaseClient.from('carts').delete().eq('session_id', getSessionId());
    } catch(err){
      console.error('paymentSuccess persist:', err);
      toast('⚠ Order recorded locally — please check connection.');
    } finally { hideLoading(); }
  }

  db.cart = [];
  renderCartBadge();

  // Show success screen with invoice download + return tracking
  $('checkoutBody').innerHTML = `
    <div class="pay-success">
      <div class="check-anim"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></div>
      <h3>Payment <em>received.</em></h3>
      <p class="sub">Thank you, ${escapeHtml(customer.name)}. Save your order and invoice details below.</p>
      <div style="background:var(--cream-2);padding:20px;border-radius:8px;text-align:left">
        <div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="color:var(--ink-soft);font-size:12px">Order Number</span><strong>${orderId}</strong></div>
        <div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="color:var(--ink-soft);font-size:12px">Invoice Number</span><strong style="font-family:monospace">${invoiceNumber}</strong></div>
        <div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="color:var(--ink-soft);font-size:12px">Paid via</span><strong>${escapeHtml(method)}</strong></div>
        ${txnId?`<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="color:var(--ink-soft);font-size:12px">Transaction ID</span><span style="font-family:monospace;font-size:12px">${escapeHtml(txnId)}</span></div>`:''}
        <div style="display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line);margin-top:8px"><span style="color:var(--ink-soft);font-size:12px">Amount</span><strong style="font-family:var(--serif);font-size:20px">${inr(amount)}</strong></div>
      </div>
      <p style="font-size:13px;color:var(--ink-soft);margin:14px 0;text-align:center">Your GST tax invoice has been generated and emailed to <strong>${escapeHtml(customer.email)}</strong>. Estimated delivery: 3-5 business days.</p>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px">
        <button class="btn-buy" onclick='downloadInvoice(${JSON.stringify(orderRecord).replace(/'/g,"&apos;")})'>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px;vertical-align:-2px;display:inline-block"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg>
          Download Invoice
        </button>
        <button class="btn-back" style="border-color:var(--ink)" onclick="closeModal('checkoutModal');setTimeout(()=>{openReturns(); $('rt_oid')&&($('rt_oid').value='${orderId}'); $('rt_email')&&($('rt_email').value='${customer.email}');},300)">Track / Return Order</button>
      </div>
      <button class="btn-primary" style="width:100%;justify-content:center" onclick="closeModal('checkoutModal')">Continue Shopping</button>
    </div>`;
}

// ===== INIT =====
// 1. Render with defaults immediately (instant paint)
renderAll();

// 2. Async load real data from Supabase, then re-render
loadDB();

// 3. Listen to auth state changes — sign out kicks the admin panel
if (SUPA_OK()) {
  supabaseClient.auth.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_OUT') hideAdmin();
  });
}
</script>
</body>
</html>

<!--
=== UNIFIED HOUSE — SUPABASE SETUP CHECKLIST ===

STEP 1: Create Supabase project
  → Go to supabase.com → New Project
  → Choose region: ap-south-1 (Mumbai) for India
  → Copy your Project URL and anon/public key

STEP 2: Create database tables
  → SQL Editor → New Query → paste the SQL at the top of this file → Run

STEP 3: Add your Supabase credentials to this file
  → Find SUPABASE_URL and SUPABASE_ANON_KEY near the top of the script
  → Replace the placeholder values

STEP 4: Create your admin user
  → Supabase Dashboard → Authentication → Users → Invite User
  → Enter your email → You will get a magic link to set your password
  → Use that email + password in the Staff Portal login

STEP 5: Seed your initial data (optional)
  → Go to Supabase Table Editor → products → Insert rows
  → OR: Open the site, log into Staff Portal, add products via the admin UI

STEP 6: Deploy the HTML file
  → Rename to index.html
  → Drag and drop onto app.netlify.com/drop
  → OR push to GitHub and import to vercel.com
  → Your site is now live with a real shared database

STEP 7: Test end to end
  → Add a product as admin on your laptop
  → Open the site on your phone → the product should appear
  → Add to cart on phone → it persists in Supabase
  → Place a test order → check Supabase orders table

DEMO MODE (without Supabase setup):
  If you don't fill in your Supabase credentials, the site still works using
  in-memory demo data. Login with admin@unifiedhouse.in / demo1234 to test.
  No data persists across reloads in demo mode — set up Supabase for that.
-->