{"id":55,"date":"2026-09-29T08:49:26","date_gmt":"2026-09-29T08:49:26","guid":{"rendered":"https:\/\/mounisaicrafty.com\/?page_id=55"},"modified":"2026-10-02T08:25:04","modified_gmt":"2026-10-02T08:25:04","slug":"home","status":"publish","type":"page","link":"https:\/\/mounisaicrafty.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>mounisaicrafty | Bangles, Jewellery &amp; Accessories<\/title>\n  <meta name=\"description\" content=\"mounisaicrafty - handcrafted bangles, glass bangles, hair accessories, jewellery, saree pins and gift sets. Made to order with love.\">\n  <meta property=\"og:title\" content=\"mounisaicrafty | Bangles, Jewellery &amp; Accessories\">\n  <meta property=\"og:description\" content=\"Beautiful little details for everyday moments and special occasions.\">\n  <meta property=\"og:image\" content=\"https:\/\/mounisaicrafty.com\/wp-content\/uploads\/2026\/09\/my-logo-png.png\">\n  <meta property=\"og:type\" content=\"website\">\n  <link rel=\"icon\" href=\"https:\/\/mounisaicrafty.com\/wp-content\/uploads\/2026\/09\/my-logo-png.png\">\n\n  <style>\n    :root {\n      --purple: #765080;\n      --purple-dark: #50365b;\n      --purple-light: #a97fb5;\n      --rose: #c2557f;\n      --rose-light: #f7dce8;\n      --gold: #cda44e;\n      --gold-light: #fbeed3;\n      --teal: #4f9d90;\n      --blue: #5f86bf;\n      --green: #66a86b;\n      --amber: #d79a3e;\n      --violet: #8a6fc4;\n      --pink: #f7eaf1;\n      --cream: #fffbf8;\n      --text: #302634;\n      --muted: #766d79;\n      --border: #eadfe8;\n      --grad: linear-gradient(120deg, var(--purple), var(--rose));\n    }\n\n    * { box-sizing: border-box; }\n    html { scroll-behavior: smooth; }\n    body {\n      margin: 0;\n      background: var(--cream);\n      color: var(--text);\n      font-family: Arial, Helvetica, sans-serif;\n    }\n    button, input, select, textarea { font: inherit; }\n    button { cursor: pointer; }\n    a { color: inherit; text-decoration: none; }\n    img { display: block; max-width: 100%; }\n    [hidden] { display: none !important; }\n    :focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }\n\n    .container { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }\n\n    \/* ---------- Header ---------- *\/\n    .announcement {\n      padding: 10px;\n      background: linear-gradient(90deg, var(--purple-dark), var(--purple) 35%, var(--rose) 70%, var(--gold));\n      color: #fff;\n      text-align: center;\n      font-size: 12px;\n      letter-spacing: .08em;\n    }\n    .header {\n      position: sticky; top: 0; z-index: 10;\n      background: #fff;\n      box-shadow: 0 2px 15px #3026340c;\n    }\n    .header-main {\n      display: flex; align-items: center; justify-content: space-between;\n      gap: 16px; padding-block: 12px;\n    }\n    .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }\n    .brand img { width: 55px; height: 55px; object-fit: contain; }\n    .brand span {\n      font-family: Georgia, serif;\n      font-size: clamp(19px, 2.5vw, 26px);\n      white-space: nowrap;\n      background: linear-gradient(90deg, var(--purple), var(--rose) 60%, var(--gold));\n      -webkit-background-clip: text; background-clip: text;\n      -webkit-text-fill-color: transparent;\n    }\n    .header-actions { display: flex; gap: 8px; }\n    .header-actions button {\n      padding: 10px 13px; border: 1px solid var(--border); border-radius: 24px;\n      background: #fff; white-space: nowrap; transition: .2s;\n    }\n    .header-actions button:hover { color: var(--purple); border-color: var(--purple); background: var(--pink); }\n    #favoritesButton[aria-pressed=\"true\"] { background: var(--rose-light); border-color: var(--rose); color: var(--rose); }\n\n    .search-form {\n      display: flex; align-items: center; gap: 8px;\n      margin-bottom: 12px; padding: 5px 5px 5px 17px;\n      border: 1px solid var(--border); border-radius: 35px;\n      background: linear-gradient(90deg, #f7f0f8, #fdf1f6 55%, #fffaf2);\n      transition: box-shadow .2s, border-color .2s;\n    }\n    .search-form:focus-within { border-color: var(--purple); box-shadow: 0 0 0 4px #7650801f; }\n    .search-icon { color: var(--purple); font-size: 23px; line-height: 1; }\n    .search-form input {\n      flex: 1; min-width: 0; padding: 11px 5px;\n      border: 0; outline: 0; background: transparent; color: var(--text);\n    }\n    .clear-search { border: 0; background: transparent; color: var(--muted); font-size: 13px; }\n    .search-button, .primary-button {\n      padding: 12px 22px; border: 0; border-radius: 25px;\n      background: var(--grad); color: #fff; font-weight: 700;\n      box-shadow: 0 6px 14px #76508033; transition: .2s;\n    }\n    .search-button:hover, .primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }\n\n    .nav { border-top: 1px solid var(--border); background: linear-gradient(90deg, #fdf7fb, #fff8f3); }\n    .nav-inner {\n      display: flex; gap: 28px; overflow-x: auto; padding-block: 13px;\n      white-space: nowrap; font-size: 13px; font-weight: 600;\n    }\n    .nav a { padding-bottom: 3px; border-bottom: 2px solid transparent; transition: .2s; }\n    .nav a:hover { color: var(--purple); border-bottom-color: var(--rose); }\n\n    \/* ---------- Hero ---------- *\/\n    .hero {\n      display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;\n      min-height: 380px; margin-top: 24px; border-radius: 20px;\n      background: linear-gradient(120deg, #f4e7f6, #fbe8f0 45%, #fff5e6);\n    }\n    .hero-copy {\n      display: flex; flex-direction: column; align-items: flex-start;\n      justify-content: center; padding: clamp(30px, 6vw, 75px);\n    }\n    .eyebrow {\n      margin: 0 0 13px; color: var(--rose); font-size: 11px; font-weight: 700;\n      letter-spacing: .18em; text-transform: uppercase;\n    }\n    h1, h2 { font-family: Georgia, \"Times New Roman\", serif; font-weight: normal; }\n    h1 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: 1.08; }\n    h1 em {\n      font-style: italic;\n      background: linear-gradient(90deg, var(--purple), var(--rose) 55%, var(--gold));\n      -webkit-background-clip: text; background-clip: text;\n      -webkit-text-fill-color: transparent;\n    }\n    .hero-copy > p:not(.eyebrow) { max-width: 430px; margin: 20px 0 25px; color: var(--muted); line-height: 1.7; }\n    .hero-art {\n      position: relative; display: grid; place-items: center; min-height: 380px;\n      overflow: hidden; background: radial-gradient(circle at 50% 45%, #fffdf9, #f0d9ea 70%, #e3cbe9);\n    }\n    .hero-art::before, .hero-art::after, .hero-ring {\n      position: absolute; width: 210px; height: 260px;\n      border: 24px solid var(--rose); border-radius: 50%;\n      box-shadow: 12px 15px 20px #76508023, inset 5px 5px 9px #ffffffa0; content: \"\";\n    }\n    .hero-art::before { transform: translate(-70px, -20px) rotate(-25deg); }\n    .hero-art::after { border-color: var(--gold); transform: translate(70px, 15px) rotate(25deg); }\n    .hero-ring { z-index: 1; width: 190px; height: 245px; border-color: var(--purple); transform: rotate(5deg); }\n    .sparkle { position: absolute; z-index: 2; top: 19%; right: 18%; color: var(--gold); font-size: 60px; }\n    .sparkle-2 { position: absolute; z-index: 2; bottom: 16%; left: 15%; color: var(--purple-light); font-size: 38px; }\n\n    \/* ---------- Sections ---------- *\/\n    section { scroll-margin-top: 200px; }\n    .section { padding-block: 65px; }\n    .section-title { text-align: center; }\n    .section-title h2 { margin: 0 0 10px; font-size: clamp(32px, 4vw, 43px); }\n    .section-title h2::after {\n      content: \"\"; display: block; width: 90px; height: 4px; margin: 14px auto 0;\n      border-radius: 4px; background: linear-gradient(90deg, var(--purple), var(--rose), var(--gold));\n    }\n    .section-title > p:last-child { margin: 14px 0 0; color: var(--muted); }\n\n    \/* Categories *\/\n    .category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-top: 32px; }\n    .category-card {\n      min-height: 150px; padding: 20px 10px; border: 1px solid var(--border);\n      border-top: 4px solid var(--accent, var(--purple)); border-radius: 15px;\n      background: var(--tint, #fff); text-align: center; color: var(--text);\n      transition: transform .2s, box-shadow .2s;\n    }\n    .category-card:hover, .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #50365b1f; }\n    .category-card .symbol { display: block; margin-bottom: 13px; font-size: 43px; }\n    .category-card strong { font-family: Georgia, serif; font-size: 16px; color: var(--accent, var(--purple)); }\n\n    \/* Shop *\/\n    .shop { background: linear-gradient(180deg, #fcf6fb, #fff8f4); }\n    .toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin: 31px 0 15px; }\n    .filters { display: flex; flex-wrap: wrap; gap: 7px; }\n    .filter { padding: 9px 13px; border: 1px solid var(--border); border-radius: 23px; background: #fff; color: var(--text); font-size: 12px; transition: .2s; }\n    .filter:hover { border-color: var(--rose); color: var(--rose); }\n    .filter.active { border-color: transparent; background: var(--grad); color: #fff; box-shadow: 0 5px 12px #76508033; }\n    .sort { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }\n    .product-count, .demo-note { color: var(--muted); font-size: 13px; }\n    .demo-note { margin: 8px 0 0; }\n\n    .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 23px; }\n    .product-card {\n      display: flex; flex-direction: column; overflow: hidden;\n      border: 1px solid var(--border); border-radius: 14px; background: #fff;\n      transition: transform .2s, box-shadow .2s;\n    }\n    .product-image-wrap { position: relative; }\n    .product-image { width: 100%; aspect-ratio: 1 \/ 1; object-fit: cover; }\n    .heart {\n      position: absolute; top: 10px; right: 10px; width: 37px; height: 37px;\n      border: 0; border-radius: 50%; background: #fff; color: var(--rose);\n      font-size: 23px; box-shadow: 0 3px 8px #0000001a;\n    }\n    .cat-tag {\n      position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 20px;\n      background: #ffffffe6; color: var(--accent, var(--purple));\n      font-size: 11px; font-weight: 700; letter-spacing: .04em;\n    }\n    .product-info { display: flex; flex-direction: column; flex: 1; padding: 15px; }\n    .product-info small { color: var(--accent, var(--muted)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }\n    .product-info h3 { margin: 9px 0; font-size: 16px; line-height: 1.35; }\n    .price { margin: auto 0 14px; color: var(--purple-dark); font-weight: 700; font-size: 17px; }\n    .add-button {\n      width: 100%; padding: 11px; border: 1px solid var(--purple); border-radius: 7px;\n      background: #fff; color: var(--purple); font-weight: 700; transition: .2s;\n    }\n    .add-button:hover { background: var(--grad); border-color: transparent; color: #fff; }\n    .empty-results { padding: 50px 15px; text-align: center; color: var(--muted); }\n    .empty-results button { margin-top: 10px; padding: 10px 18px; border: 0; border-radius: 20px; background: var(--grad); color: #fff; }\n\n    \/* Info strip *\/\n    .info-strip { padding-block: 55px; background: linear-gradient(120deg, var(--purple-dark), var(--purple) 50%, var(--rose)); color: #fff; }\n    .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }\n    .info-item .icon { font-size: 36px; }\n    .info-item h3 { margin: 10px 0 6px; font-family: Georgia, serif; font-weight: normal; font-size: 19px; color: var(--gold-light); }\n    .info-item p { margin: 0; font-size: 13px; line-height: 1.6; color: #f1e4f0; }\n\n    \/* Account *\/\n    .account-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }\n    .card-panel { padding: 30px; border: 1px solid var(--border); border-top: 4px solid var(--accent, var(--purple)); border-radius: 16px; background: #fff; }\n    .card-panel h3 { margin: 0 0 6px; font-family: Georgia, serif; font-weight: normal; font-size: 24px; color: var(--accent, var(--purple)); }\n    .card-panel .hint { margin: 0 0 18px; color: var(--muted); font-size: 13px; }\n    .field { margin-bottom: 14px; }\n    .field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }\n    .field input {\n      width: 100%; padding: 12px 14px; border: 1px solid var(--border);\n      border-radius: 9px; background: #fdfafc; outline: 0;\n    }\n    .field input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #7650801f; }\n    .full-button { width: 100%; padding: 13px; border: 0; border-radius: 9px; background: var(--grad); color: #fff; font-weight: 700; }\n    .full-button:hover { filter: brightness(1.08); }\n    .link-row { margin: 12px 0 0; font-size: 13px; color: var(--muted); }\n    .link-row a { color: var(--rose); font-weight: 700; }\n\n    \/* Policies *\/\n    .policy-section { background: linear-gradient(180deg, #fff8fb, #fdf6ef); }\n    .policy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }\n    .policy {\n      padding: 24px; border: 1px solid var(--border); border-top: 4px solid var(--accent, var(--purple));\n      border-radius: 14px; background: #fff;\n    }\n    .policy h3 { margin: 0 0 10px; font-family: Georgia, serif; font-weight: normal; font-size: 19px; color: var(--accent, var(--purple)); }\n    .policy p, .policy li { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }\n    .policy ul { margin: 0; padding-left: 18px; }\n\n    \/* Contact *\/\n    .contact-section { padding-block: 65px; background: linear-gradient(120deg, var(--gold-light), var(--rose-light) 55%, #ece2f5); text-align: center; }\n    .contact-section > .container > p { max-width: 620px; margin: 18px auto 26px; color: var(--muted); line-height: 1.7; }\n    .contact-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n    .contact-buttons a { padding: 13px 26px; border-radius: 30px; color: #fff; font-weight: 700; box-shadow: 0 6px 14px #0000001f; transition: .2s; }\n    .contact-buttons a:hover { transform: translateY(-2px); filter: brightness(1.06); }\n    .wa { background: linear-gradient(120deg, #2fbf62, #25d366); }\n    .ig { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }\n    .mail { background: var(--grad); }\n\n    \/* Footer *\/\n    footer { padding: 46px 0 26px; background: linear-gradient(120deg, #3f2a49, var(--purple-dark) 60%, #5d3a65); color: #fff; text-align: center; }\n    footer h2 { margin: 0 0 10px; }\n    footer p { color: #e7dce9; font-size: 13px; line-height: 1.6; }\n    .footer-nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 20px 0 22px; font-size: 13px; font-weight: 600; }\n    .footer-nav a { padding-bottom: 3px; border-bottom: 2px solid transparent; }\n    .footer-nav a:hover { color: var(--gold-light); border-bottom-color: var(--gold); }\n    .footer-line { height: 3px; margin: 0 auto 20px; max-width: 220px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--rose), var(--purple-light)); }\n\n    \/* Floating WhatsApp *\/\n    .float-wa {\n      position: fixed; right: 20px; bottom: 20px; z-index: 9;\n      display: grid; place-items: center; width: 56px; height: 56px;\n      border-radius: 50%; background: linear-gradient(120deg, #2fbf62, #25d366);\n      color: #fff; font-size: 27px; box-shadow: 0 8px 20px #00000033;\n    }\n\n    \/* Bag drawer *\/\n    .backdrop { position: fixed; inset: 0; z-index: 20; background: #25162c88; }\n    .drawer {\n      position: fixed; top: 0; right: 0; z-index: 21;\n      display: flex; flex-direction: column; width: min(420px, 100%);\n      height: 100vh; height: 100dvh; background: #fff;\n      box-shadow: -10px 0 35px #0002; visibility: hidden;\n      transform: translateX(100%); transition: transform .25s, visibility .25s;\n    }\n    .drawer.open { visibility: visible; transform: translateX(0); }\n    .drawer-head, .drawer-foot { padding: 20px; }\n    .drawer-head {\n      display: flex; justify-content: space-between; align-items: center;\n      background: var(--grad); color: #fff;\n    }\n    .drawer-head h2 { margin: 0; font-size: 27px; }\n    .drawer-head button { border: 0; background: none; color: #fff; font-size: 30px; }\n    .bag-items { flex: 1; overflow: auto; padding: 15px 20px; }\n    .bag-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }\n    .bag-item img { width: 70px; height: 70px; border-radius: 8px; }\n    .bag-item-details { flex: 1; }\n    .bag-item-details strong { display: block; margin-bottom: 5px; }\n    .quantity { display: flex; align-items: center; gap: 10px; margin-top: 8px; }\n    .quantity button { min-width: 25px; height: 25px; border: 1px solid var(--border); border-radius: 5px; background: #fff; }\n    .quantity .remove { margin-left: auto; border: 0; color: var(--rose); font-size: 12px; }\n    .drawer-foot { border-top: 1px solid var(--border); background: #fdf8fb; }\n    .subtotal { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 17px; }\n    .subtotal strong:last-child { color: var(--purple-dark); }\n    .wa-order {\n      width: 100%; padding: 13px; border: 0; border-radius: 9px;\n      background: linear-gradient(120deg, #2fbf62, #25d366); color: #fff; font-weight: 700;\n    }\n    .drawer-foot small { display: block; margin-top: 9px; color: var(--muted); }\n\n    @media (max-width: 1000px) {\n      .category-grid { grid-template-columns: repeat(3, 1fr); }\n      .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n      .policy-grid, .info-grid { grid-template-columns: repeat(2, 1fr); }\n    }\n    @media (max-width: 650px) {\n      section { scroll-margin-top: 165px; }\n      .brand img { width: 43px; height: 43px; }\n      .brand span { font-size: 18px; }\n      .header-actions button { padding: 9px; font-size: 12px; }\n      .nav-inner { gap: 18px; }\n      .hero { grid-template-columns: 1fr; }\n      .hero-copy { padding: 40px 26px; }\n      .hero-art { min-height: 250px; }\n      .hero-art::before, .hero-art::after { width: 145px; height: 185px; border-width: 17px; }\n      .hero-ring { width: 135px; height: 175px; border-width: 17px; }\n      .category-grid { grid-template-columns: repeat(2, 1fr); }\n      .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n      .product-info { padding: 11px; }\n      .product-info h3 { font-size: 14px; }\n      .search-button { padding-inline: 14px; }\n      .policy-grid, .info-grid, .account-grid { grid-template-columns: 1fr; }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      html { scroll-behavior: auto; }\n      *, *::before, *::after { transition-duration: 0.01ms !important; }\n    }\n  <\/style>\n\n\n\n  <div class=\"announcement\">BEAUTIFUL LITTLE FINDS FOR EVERY OCCASION<\/div>\n\n  <header class=\"header\">\n    <div class=\"container\">\n      <div class=\"header-main\">\n        <a class=\"brand\" href=\"#home\" aria-label=\"mounisaicrafty home\">\n          <img decoding=\"async\" src=\"https:\/\/mounisaicrafty.com\/wp-content\/uploads\/2026\/09\/my-logo-png.png\" alt=\"\" onerror=\"this.style.display='none'\">\n          <span>mounisaicrafty<\/span>\n        <\/a>\n\n        <div class=\"header-actions\">\n          <button id=\"favoritesButton\" type=\"button\" aria-pressed=\"false\">\n            \u2665 Favourites (<span id=\"favoritesCount\">0<\/span>)\n          <\/button>\n          <button id=\"openBag\" type=\"button\">Bag (<span id=\"bagCount\">0<\/span>)<\/button>\n        <\/div>\n      <\/div>\n\n      <form class=\"search-form\" id=\"searchForm\" role=\"search\">\n        <span class=\"search-icon\" aria-hidden=\"true\">\u2315<\/span>\n        <input id=\"searchInput\" type=\"text\" maxlength=\"60\" placeholder=\"Search bangles, earrings, hair clips, gifts...\" aria-label=\"Search products\" autocomplete=\"off\">\n        <button class=\"clear-search\" id=\"clearSearch\" type=\"button\" hidden=\"\">Clear<\/button>\n        <button class=\"search-button\" type=\"submit\">Search<\/button>\n      <\/form>\n    <\/div>\n\n    <nav class=\"nav\" aria-label=\"Main navigation\">\n      <div class=\"container nav-inner\">\n        <a href=\"#home\">Home<\/a>\n        <a href=\"#contact\">Contact Us<\/a>\n        <a href=\"#account\">My account<\/a>\n        <a href=\"#shipping-policy\">Shipping Policy<\/a>\n        <a href=\"#refund-policy\">Refund and Returns Policy<\/a>\n      <\/div>\n    <\/nav>\n  <\/header>\n\n  <main>\n    <div class=\"container\">\n      <section class=\"hero\" aria-label=\"Welcome to mounisaicrafty\">\n        <div class=\"hero-copy\">\n          <p class=\"eyebrow\">EXPLORE MOUNISAICRAFTY<\/p>\n          <h1>Little details.<br><em>Lovely moments.<\/em><\/h1>\n          <p>Browse colourful bangles, jewellery, hair accessories and gift ideas in our preview collection.<\/p>\n          <a class=\"primary-button\" href=\"#shop\">Shop the collection \u2192<\/a>\n        <\/div>\n        <div class=\"hero-art\" aria-hidden=\"true\">\n          <span class=\"hero-ring\"><\/span>\n          <span class=\"sparkle\">\u2726<\/span>\n          <span class=\"sparkle-2\">\u2726<\/span>\n        <\/div>\n      <\/section>\n    <\/div>\n\n    <!-- Categories -->\n    <section class=\"section container\" id=\"categories\">\n      <div class=\"section-title\">\n        <p class=\"eyebrow\">FIND YOUR FAVOURITE<\/p>\n        <h2>Shop by category<\/h2>\n        <p>Choose a category to explore the products below.<\/p>\n      <\/div>\n\n      <div class=\"category-grid\">\n        <button class=\"category-card\" type=\"button\" data-category=\"Bangles\" style=\"--accent:#c2557f;--tint:#fdf2f6\">\n          <span class=\"symbol\">\ud83d\udc8d<\/span><strong>Bangles<\/strong>\n        <\/button>\n        <button class=\"category-card\" type=\"button\" data-category=\"Glass Bangles\" style=\"--accent:#5f86bf;--tint:#f1f5fc\">\n          <span class=\"symbol\">\ud83c\udf08<\/span><strong>Glass Bangles<\/strong>\n        <\/button>\n        <button class=\"category-card\" type=\"button\" data-category=\"Hair Accessories\" style=\"--accent:#d79a3e;--tint:#fdf6e9\">\n          <span class=\"symbol\">\ud83c\udf80<\/span><strong>Hair Accessories<\/strong>\n        <\/button>\n        <button class=\"category-card\" type=\"button\" data-category=\"Jewellery\" style=\"--accent:#8a6fc4;--tint:#f4f1fc\">\n          <span class=\"symbol\">\ud83d\udc8e<\/span><strong>Jewellery<\/strong>\n        <\/button>\n        <button class=\"category-card\" type=\"button\" data-category=\"Saree Pins\" style=\"--accent:#4f9d90;--tint:#eef8f6\">\n          <span class=\"symbol\">\u2728<\/span><strong>Saree Pins<\/strong>\n        <\/button>\n        <button class=\"category-card\" type=\"button\" data-category=\"Gifts\" style=\"--accent:#66a86b;--tint:#f0f8f1\">\n          <span class=\"symbol\">\ud83c\udf81<\/span><strong>Gifts<\/strong>\n        <\/button>\n      <\/div>\n    <\/section>\n\n    <!-- Shop -->\n    <section class=\"section shop\" id=\"shop\">\n      <div class=\"container\">\n        <div class=\"section-title\">\n          <p class=\"eyebrow\">THE COLLECTION<\/p>\n          <h2>Explore our pieces<\/h2>\n          <p>Search by product name or category, or use the filters below.<\/p>\n        <\/div>\n\n        <div class=\"toolbar\">\n          <div class=\"filters\" aria-label=\"Filter by category\">\n            <button class=\"filter active\" type=\"button\" data-category=\"All\">All<\/button>\n            <button class=\"filter\" type=\"button\" data-category=\"Bangles\">Bangles<\/button>\n            <button class=\"filter\" type=\"button\" data-category=\"Glass Bangles\">Glass Bangles<\/button>\n            <button class=\"filter\" type=\"button\" data-category=\"Hair Accessories\">Hair<\/button>\n            <button class=\"filter\" type=\"button\" data-category=\"Jewellery\">Jewellery<\/button>\n            <button class=\"filter\" type=\"button\" data-category=\"Saree Pins\">Saree Pins<\/button>\n            <button class=\"filter\" type=\"button\" data-category=\"Gifts\">Gifts<\/button>\n          <\/div>\n\n          <select class=\"sort\" id=\"sortSelect\" aria-label=\"Sort products\">\n            <option value=\"featured\">Sort: Featured<\/option>\n            <option value=\"low\">Price: Low to High<\/option>\n            <option value=\"high\">Price: High to Low<\/option>\n            <option value=\"name\">Name: A to Z<\/option>\n          <\/select>\n        <\/div>\n\n        <p class=\"product-count\" id=\"productCount\" aria-live=\"polite\"><\/p>\n        <p class=\"demo-note\">These 24 products, prices and illustrations are examples. Replace them with your real catalogue before publishing.<\/p>\n\n        <div class=\"product-grid\" id=\"productGrid\"><\/div>\n\n        <div class=\"empty-results\" id=\"emptyResults\" hidden=\"\">\n          <p>No products found. Try a different search or category.<\/p>\n          <button id=\"resetFilters\" type=\"button\">Show all products<\/button>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Info strip -->\n    <section class=\"info-strip\" aria-label=\"Why shop with us\">\n      <div class=\"container info-grid\">\n        <div class=\"info-item\"><div class=\"icon\">\u270b<\/div><h3>100% Handmade<\/h3><p>Every piece is crafted by hand with attention to detail.<\/p><\/div>\n        <div class=\"info-item\"><div class=\"icon\">\ud83e\uddf5<\/div><h3>Made to Order<\/h3><p>We start crafting your piece once your order is placed.<\/p><\/div>\n        <div class=\"info-item\"><div class=\"icon\">\ud83d\ude9a<\/div><h3>Dispatch 10\u201315 Days<\/h3><p>Working days (Mon\u2013Fri). Selected items ship in 5\u20137 days.<\/p><\/div>\n        <div class=\"info-item\"><div class=\"icon\">\ud83c\udfa8<\/div><h3>Customisation<\/h3><p>Colour &amp; size customisation on WhatsApp or Instagram.<\/p><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- My account -->\n    <section class=\"section container\" id=\"account\">\n      <div class=\"section-title\">\n        <p class=\"eyebrow\">MY ACCOUNT<\/p>\n        <h2>Login or register<\/h2>\n        <p>Save your favourites and track your orders in one place.<\/p>\n      <\/div>\n\n      <div class=\"account-grid\">\n        <form class=\"card-panel\" id=\"loginForm\" style=\"--accent:#765080\">\n          <h3>Login<\/h3>\n          <p class=\"hint\">Welcome back! Please enter your details.<\/p>\n          <div class=\"field\">\n            <label for=\"loginEmail\">Email address<\/label>\n            <input id=\"loginEmail\" type=\"email\" autocomplete=\"username\" required=\"\" placeholder=\"you@example.com\">\n          <\/div>\n          <div class=\"field\">\n            <label for=\"loginPassword\">Password<\/label>\n            <input id=\"loginPassword\" type=\"password\" autocomplete=\"current-password\" required=\"\" placeholder=\"Your password\">\n          <\/div>\n          <button class=\"full-button\" type=\"submit\">Login<\/button>\n          <p class=\"link-row\">Forgot your password? <a href=\"#contact\">Contact us<\/a><\/p>\n        <\/form>\n\n        <form class=\"card-panel\" id=\"registerForm\" style=\"--accent:#c2557f\">\n          <h3>Register<\/h3>\n          <p class=\"hint\">Create an account to check out faster next time.<\/p>\n          <div class=\"field\">\n            <label for=\"regName\">Full name<\/label>\n            <input id=\"regName\" type=\"text\" autocomplete=\"name\" required=\"\" placeholder=\"Your name\">\n          <\/div>\n          <div class=\"field\">\n            <label for=\"regEmail\">Email address<\/label>\n            <input id=\"regEmail\" type=\"email\" autocomplete=\"email\" required=\"\" placeholder=\"you@example.com\">\n          <\/div>\n          <div class=\"field\">\n            <label for=\"regPassword\">Create password<\/label>\n            <input id=\"regPassword\" type=\"password\" autocomplete=\"new-password\" minlength=\"6\" required=\"\" placeholder=\"At least 6 characters\">\n          <\/div>\n          <button class=\"full-button\" type=\"submit\">Register<\/button>\n          <p class=\"link-row\">Your data is only used to process your orders.<\/p>\n        <\/form>\n      <\/div>\n    <\/section>\n\n    <!-- Shipping Policy -->\n    <section class=\"section policy-section\" id=\"shipping-policy\">\n      <div class=\"container\">\n        <div class=\"section-title\">\n          <p class=\"eyebrow\">DELIVERY INFORMATION<\/p>\n          <h2>Shipping Policy<\/h2>\n          <p>Everything you need to know about how your order reaches you.<\/p>\n        <\/div>\n\n        <div class=\"policy-grid\">\n          <div class=\"policy\" style=\"--accent:#5f86bf\">\n            <h3>\ud83d\udce6 Dispatch timeline<\/h3>\n            <p>All items are made to order. Dispatch takes <strong>10\u201315 working days<\/strong> (Monday to Friday, excluding public holidays).<\/p>\n            <p>Selected ready-stock items are dispatched in 5\u20137 working days.<\/p>\n          <\/div>\n          <div class=\"policy\" style=\"--accent:#d79a3e\">\n            <h3>\ud83d\ude9a Delivery &amp; tracking<\/h3>\n            <p>After dispatch, delivery usually takes 3\u20137 days depending on your location.<\/p>\n            <p>A tracking link is shared on WhatsApp or email as soon as your parcel ships.<\/p>\n          <\/div>\n          <div class=\"policy\" style=\"--accent:#4f9d90\">\n            <h3>\ud83d\udcb0 Shipping charges<\/h3>\n            <ul>\n              <li>Standard shipping: \u20b970 flat<\/li>\n              <li>Free shipping on orders above \u20b91,500<\/li>\n              <li>Cash on delivery: \u20b950 extra (selected pincodes)<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"policy\" style=\"--accent:#8a6fc4\">\n            <h3>\u23f3 Delays<\/h3>\n            <p>Festive seasons, bulk orders and courier issues can cause small delays. We will always keep you updated.<\/p>\n            <p>Please ensure your address and phone number are correct to avoid failed deliveries.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Refund and Returns Policy -->\n    <section class=\"section container\" id=\"refund-policy\">\n      <div class=\"section-title\">\n        <p class=\"eyebrow\">AFTER YOUR ORDER<\/p>\n        <h2>Refund and Returns Policy<\/h2>\n        <p>We want you to love your order. Here is how we handle issues.<\/p>\n      <\/div>\n\n      <div class=\"policy-grid\">\n        <div class=\"policy\" style=\"--accent:#c2557f\">\n          <h3>\u21a9 Damaged or wrong item<\/h3>\n          <p>If your item arrives damaged or incorrect, we will replace it or refund you.<\/p>\n          <p>Please share a <strong>clear unboxing video<\/strong> within 24 hours of delivery \u2013 it is required for all claims.<\/p>\n        <\/div>\n        <div class=\"policy\" style=\"--accent:#5f86bf\">\n          <h3>\ud83d\udcdd How to raise a request<\/h3>\n          <ul>\n            <li>Message us on WhatsApp within 24 hours<\/li>\n            <li>Share your order number and the unboxing video<\/li>\n            <li>We respond within 1\u20132 working days<\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"policy\" style=\"--accent:#66a86b\">\n          <h3>\u274c Not returnable<\/h3>\n          <p>Customised and made-to-order pieces cannot be returned or exchanged.<\/p>\n          <p>Bangle size exchanges are not possible \u2013 please check the size chart carefully before ordering.<\/p>\n        <\/div>\n        <div class=\"policy\" style=\"--accent:#8a6fc4\">\n          <h3>\ud83d\udcb3 Refund timeline<\/h3>\n          <p>Approved refunds are processed within 5\u20137 working days to your original payment method.<\/p>\n          <p>Shipping charges are non-refundable unless the error was ours.<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Contact -->\n    <section class=\"contact-section\" id=\"contact\">\n      <div class=\"container\">\n        <div class=\"section-title\">\n          <p class=\"eyebrow\">LET\u2019S TALK<\/p>\n          <h2>Contact Us<\/h2>\n        <\/div>\n        <p>For orders, customisation and any questions, message us on WhatsApp or Instagram. We usually reply within a few hours.<\/p>\n        <div class=\"contact-buttons\">\n          <a class=\"wa\" id=\"contactWa\" href=\"#\" target=\"_blank\" rel=\"noopener\">\ud83d\udcac WhatsApp Us<\/a>\n          <a class=\"ig\" href=\"https:\/\/instagram.com\/mounisaicrafty\" target=\"_blank\" rel=\"noopener\">\ud83d\udcf7 Instagram DM<\/a>\n          <a class=\"mail\" href=\"mailto:hello@mounisaicrafty.com\">\u2709 Email Us<\/a>\n        <\/div>\n      <\/div>\n    <\/section>\n  <\/main>\n\n  <footer>\n    <div class=\"container\">\n      <h2>mounisaicrafty<\/h2>\n      <div class=\"footer-line\"><\/div>\n      <p>Beautiful little details for everyday moments and special occasions.<\/p>\n      <nav class=\"footer-nav\" aria-label=\"Footer navigation\">\n        <a href=\"#home\">Home<\/a>\n        <a href=\"#contact\">Contact Us<\/a>\n        <a href=\"#account\">My account<\/a>\n        <a href=\"#shipping-policy\">Shipping Policy<\/a>\n        <a href=\"#refund-policy\">Refund and Returns Policy<\/a>\n      <\/nav>\n      <p>\u00a9 <span id=\"year\"><\/span> mounisaicrafty<\/p>\n    <\/div>\n  <\/footer>\n\n  <a class=\"float-wa\" id=\"floatWa\" href=\"#\" target=\"_blank\" rel=\"noopener\" aria-label=\"Chat on WhatsApp\">\ud83d\udcac<\/a>\n\n  <!-- Bag drawer -->\n  <div class=\"backdrop\" id=\"backdrop\" hidden=\"\"><\/div>\n  <aside class=\"drawer\" id=\"bagDrawer\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Shopping bag\" aria-hidden=\"true\" inert=\"\">\n    <div class=\"drawer-head\">\n      <h2>Your bag<\/h2>\n      <button type=\"button\" id=\"closeBag\" aria-label=\"Close shopping bag\">\u00d7<\/button>\n    <\/div>\n    <div class=\"bag-items\" id=\"bagItems\"><\/div>\n    <div class=\"drawer-foot\">\n      <div class=\"subtotal\">\n        <strong>Subtotal<\/strong>\n        <strong id=\"bagTotal\">\u20b90<\/strong>\n      <\/div>\n      <button class=\"wa-order\" type=\"button\" id=\"waOrder\">Order on WhatsApp<\/button>\n      <small>Your bag is sent to us as a WhatsApp message. We confirm stock and payment there.<\/small>\n    <\/div>\n  <\/aside>\n\n  <script>\n    \/* ============================================================\n       1) PUT YOUR WHATSAPP NUMBER HERE (country code, no + or spaces)\n       ============================================================ *\/\n    const WHATSAPP = \"91XXXXXXXXXX\";\n\n    \/* ============================================================\n       2) SAMPLE PRODUCTS - replace with your real catalogue\n       ============================================================ *\/\n    const products = [\n      { id: 1,  name: \"Rose Gold Bangle\",          category: \"Bangles\",          price: 899 },\n      { id: 2,  name: \"Pearl Detail Bangle Set\",   category: \"Bangles\",          price: 849 },\n      { id: 3,  name: \"Gold-Tone Cuff Bangle\",     category: \"Bangles\",          price: 749 },\n      { id: 4,  name: \"Festive Bangle Stack\",      category: \"Bangles\",          price: 1099 },\n\n      { id: 5,  name: \"Rose Glass Bangles\",        category: \"Glass Bangles\",    price: 599 },\n      { id: 6,  name: \"Emerald Glass Bangles\",     category: \"Glass Bangles\",    price: 649 },\n      { id: 7,  name: \"Lavender Glass Bangles\",    category: \"Glass Bangles\",    price: 599 },\n      { id: 8,  name: \"Rainbow Glass Bangle Set\",  category: \"Glass Bangles\",    price: 799 },\n\n      { id: 9,  name: \"Floral Hair Clip\",          category: \"Hair Accessories\", price: 329 },\n      { id: 10, name: \"Pearl Hair Pins\",           category: \"Hair Accessories\", price: 449 },\n      { id: 11, name: \"Satin Bow Hair Clip\",       category: \"Hair Accessories\", price: 299 },\n      { id: 12, name: \"Crystal Hair Band\",         category: \"Hair Accessories\", price: 699 },\n\n      { id: 13, name: \"Classic Jhumka Earrings\",   category: \"Jewellery\",        price: 899 },\n      { id: 14, name: \"Pearl Drop Earrings\",       category: \"Jewellery\",        price: 649 },\n      { id: 15, name: \"Layered Pendant Necklace\",  category: \"Jewellery\",        price: 1099 },\n      { id: 16, name: \"Adjustable Statement Ring\", category: \"Jewellery\",        price: 499 },\n\n      { id: 17, name: \"Floral Saree Pin\",          category: \"Saree Pins\",       price: 349 },\n      { id: 18, name: \"Pearl Saree Brooch\",        category: \"Saree Pins\",       price: 429 },\n      { id: 19, name: \"Minimal Saree Pin\",         category: \"Saree Pins\",       price: 299 },\n      { id: 20, name: \"Crystal Saree Pin\",         category: \"Saree Pins\",       price: 549 },\n\n      { id: 21, name: \"Mini Accessory Gift Box\",   category: \"Gifts\",            price: 999 },\n      { id: 22, name: \"Celebration Gift Set\",      category: \"Gifts\",            price: 1599 },\n      { id: 23, name: \"Everyday Essentials Set\",   category: \"Gifts\",            price: 899 },\n      { id: 24, name: \"Festive Jewellery Gift Set\",category: \"Gifts\",            price: 1899 }\n    ];\n\n    const categoryAccent = {\n      \"Bangles\": \"#c2557f\",\n      \"Glass Bangles\": \"#5f86bf\",\n      \"Hair Accessories\": \"#d79a3e\",\n      \"Jewellery\": \"#8a6fc4\",\n      \"Saree Pins\": \"#4f9d90\",\n      \"Gifts\": \"#66a86b\"\n    };\n\n    const colours = [\n      [\"#fae9ef\", \"#efd0de\", \"#c2557f\", \"#82375a\"],\n      [\"#fbefdf\", \"#edd7b6\", \"#cda44e\", \"#94702f\"],\n      [\"#eeeafa\", \"#d9cff0\", \"#8a6fc4\", \"#5c4790\"],\n      [\"#e4f2ec\", \"#c6e4d6\", \"#4f9d90\", \"#2f6d63\"],\n      [\"#e7eff9\", \"#cbddef\", \"#5f86bf\", \"#3c5c8c\"],\n      [\"#edf7ee\", \"#cfe8d2\", \"#66a86b\", \"#3f7a45\"]\n    ];\n\n    function artwork(product) {\n      const set = colours[(product.id - 1) % colours.length];\n      const background = set[0], light = set[1], main = set[2], dark = set[3];\n      let shape = \"\";\n\n      switch (product.category) {\n        case \"Bangles\":\n        case \"Glass Bangles\":\n          shape = `\n            <g fill=\"none\" stroke-width=\"19\" transform=\"rotate(-18 250 250)\">\n              <ellipse cx=\"183\" cy=\"248\" rx=\"75\" ry=\"110\" stroke=\"${main}\"\/>\n              <ellipse cx=\"250\" cy=\"244\" rx=\"75\" ry=\"110\" stroke=\"${dark}\"\/>\n              <ellipse cx=\"317\" cy=\"248\" rx=\"75\" ry=\"110\" stroke=\"${main}\"\/>\n            <\/g>\n            <circle cx=\"270\" cy=\"136\" r=\"8\" fill=\"#fff\" opacity=\".85\"\/>`;\n          break;\n        case \"Hair Accessories\":\n          shape = `\n            <path d=\"M250 242C176 145 122 165 137 226c16 68 70 75 113 16Z\" fill=\"${main}\" stroke=\"${dark}\" stroke-width=\"8\"\/>\n            <path d=\"M250 242c74-97 128-77 113-16-16 68-70 75-113 16Z\" fill=\"${main}\" stroke=\"${dark}\" stroke-width=\"8\"\/>\n            <path d=\"M202 270l-21 95 69-50 69 50-21-95\" fill=\"${light}\" stroke=\"${dark}\" stroke-width=\"7\"\/>\n            <circle cx=\"250\" cy=\"242\" r=\"28\" fill=\"#fff9f3\" stroke=\"${dark}\" stroke-width=\"7\"\/>`;\n          break;\n        case \"Jewellery\":\n          shape = `\n            <path d=\"M115 138c15 210 255 210 270 0\" fill=\"none\" stroke=\"${dark}\" stroke-width=\"12\" stroke-linecap=\"round\"\/>\n            <path d=\"M221 278l29-39 29 39-29 54Z\" fill=\"${main}\" stroke=\"${dark}\" stroke-width=\"7\"\/>\n            <circle cx=\"250\" cy=\"281\" r=\"10\" fill=\"#fff\"\/>\n            <circle cx=\"153\" cy=\"201\" r=\"11\" fill=\"${main}\"\/>\n            <circle cx=\"347\" cy=\"201\" r=\"11\" fill=\"${main}\"\/>`;\n          break;\n        case \"Saree Pins\":\n          shape = `\n            <path d=\"M92 260h316\" stroke=\"${dark}\" stroke-width=\"12\" stroke-linecap=\"round\"\/>\n            <circle cx=\"250\" cy=\"260\" r=\"70\" fill=\"${light}\" stroke=\"${dark}\" stroke-width=\"8\"\/>\n            <ellipse cx=\"250\" cy=\"215\" rx=\"21\" ry=\"36\" fill=\"${main}\"\/>\n            <ellipse cx=\"250\" cy=\"305\" rx=\"21\" ry=\"36\" fill=\"${main}\"\/>\n            <ellipse cx=\"205\" cy=\"260\" rx=\"36\" ry=\"21\" fill=\"${main}\"\/>\n            <ellipse cx=\"295\" cy=\"260\" rx=\"36\" ry=\"21\" fill=\"${main}\"\/>\n            <circle cx=\"250\" cy=\"260\" r=\"23\" fill=\"#fff\"\/>`;\n          break;\n        case \"Gifts\":\n          shape = `\n            <rect x=\"125\" y=\"218\" width=\"250\" height=\"164\" rx=\"14\" fill=\"${main}\"\/>\n            <rect x=\"112\" y=\"185\" width=\"276\" height=\"59\" rx=\"10\" fill=\"${dark}\"\/>\n            <rect x=\"231\" y=\"185\" width=\"38\" height=\"197\" fill=\"#fff3ea\"\/>\n            <path d=\"M250 184c-73-7-100-56-63-75 35-17 64 25 63 75Zm0 0c73-7 100-56 63-75-35-17-64 25-63 75Z\" fill=\"${light}\" stroke=\"${dark}\" stroke-width=\"7\"\/>`;\n          break;\n      }\n\n      const svg = `\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 500 500\">\n          <defs>\n            <linearGradient id=\"bg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n              <stop stop-color=\"${background}\"\/><stop offset=\"1\" stop-color=\"${light}\"\/>\n            <\/linearGradient>\n          <\/defs>\n          <rect width=\"500\" height=\"500\" fill=\"url(#bg)\"\/>\n          <circle cx=\"425\" cy=\"100\" r=\"110\" fill=\"#fff\" opacity=\".28\"\/>\n          <circle cx=\"65\" cy=\"420\" r=\"115\" fill=\"#fff\" opacity=\".18\"\/>\n          <ellipse cx=\"250\" cy=\"409\" rx=\"143\" ry=\"15\" fill=\"${dark}\" opacity=\".12\"\/>\n          ${shape}\n        <\/svg>`;\n\n      return \"data:image\/svg+xml;charset=utf-8,\" + encodeURIComponent(svg);\n    }\n\n    products.forEach(p => { p.image = artwork(p); });\n\n    const price = amount => new Intl.NumberFormat(\"en-IN\", {\n      style: \"currency\", currency: \"INR\", maximumFractionDigits: 0\n    }).format(amount);\n\n    function readSaved(key) {\n      try {\n        const result = JSON.parse(localStorage.getItem(key));\n        return Array.isArray(result) ? result : [];\n      } catch { return []; }\n    }\n    function save(key, value) {\n      try { localStorage.setItem(key, JSON.stringify(value)); } catch {}\n    }\n\n    let category = \"All\";\n    let favoritesOnly = false;\n    let bagOpenedOnce = false;\n    let favorites = new Set(\n      readSaved(\"mounisaicrafty-favorites\").filter(id => products.some(p => p.id === id))\n    );\n    let bag = readSaved(\"mounisaicrafty-bag\").filter(item =>\n      products.some(p => p.id === item.id) && Number.isInteger(item.qty) && item.qty > 0\n    );\n\n    const grid = document.getElementById(\"productGrid\");\n    const searchInput = document.getElementById(\"searchInput\");\n    const sortSelect = document.getElementById(\"sortSelect\");\n    const drawer = document.getElementById(\"bagDrawer\");\n    const backdrop = document.getElementById(\"backdrop\");\n    let previousFocus;\n\n    const waLink = text =>\n      \"https:\/\/wa.me\/\" + WHATSAPP + (text ? \"?text=\" + encodeURIComponent(text) : \"\");\n\n    document.getElementById(\"contactWa\").href =\n      waLink(\"Hi mounisaicrafty, I have a question about your products.\");\n    document.getElementById(\"floatWa\").href =\n      waLink(\"Hi mounisaicrafty!\");\n\n    function renderProducts() {\n      const query = searchInput.value.trim().toLowerCase();\n\n      const visible = products.filter(p => {\n        const matchesSearch = (p.name + \" \" + p.category).toLowerCase().includes(query);\n        return matchesSearch &&\n          (category === \"All\" || p.category === category) &&\n          (!favoritesOnly || favorites.has(p.id));\n      });\n\n      if (sortSelect.value === \"low\") visible.sort((a, b) => a.price - b.price);\n      if (sortSelect.value === \"high\") visible.sort((a, b) => b.price - a.price);\n      if (sortSelect.value === \"name\") visible.sort((a, b) => a.name.localeCompare(b.name));\n\n      grid.innerHTML = visible.map(p => {\n        const fav = favorites.has(p.id);\n        const accent = categoryAccent[p.category] || \"#765080\";\n        return `\n        <article class=\"product-card\" style=\"--accent:${accent}\">\n          <div class=\"product-image-wrap\">\n            <img decoding=\"async\" class=\"product-image\" src=\"${p.image}\" alt=\"Illustration for ${p.name}\" loading=\"lazy\">\n            <span class=\"cat-tag\">${p.category}<\/span>\n            <button class=\"heart\" type=\"button\" data-favorite=\"${p.id}\"\n              aria-label=\"${fav ? \"Remove\" : \"Add\"} ${p.name} ${fav ? \"from\" : \"to\"} favourites\"\n              aria-pressed=\"${fav}\">${fav ? \"&hearts;\" : \"&#9825;\"}<\/button>\n          <\/div>\n          <div class=\"product-info\">\n            <small>${p.category}<\/small>\n            <h3>${p.name}<\/h3>\n            <p class=\"price\">${price(p.price)}<\/p>\n            <button class=\"add-button\" type=\"button\" data-add=\"${p.id}\">Add to bag &rarr;<\/button>\n          <\/div>\n        <\/article>`;\n      }).join(\"\");\n\n      document.getElementById(\"productCount\").textContent =\n        \"Showing \" + visible.length + \" of \" + products.length + \" sample products\";\n      document.getElementById(\"emptyResults\").hidden = visible.length !== 0;\n      document.getElementById(\"favoritesCount\").textContent = favorites.size;\n      document.getElementById(\"favoritesButton\").setAttribute(\"aria-pressed\", String(favoritesOnly));\n      document.getElementById(\"clearSearch\").hidden = searchInput.value.length === 0;\n\n      document.querySelectorAll(\".filter\").forEach(button => {\n        const active = button.dataset.category === category;\n        button.classList.toggle(\"active\", active);\n        button.setAttribute(\"aria-pressed\", String(active));\n      });\n    }\n\n    function bagTotal() {\n      return bag.reduce((sum, item) =>\n        sum + products.find(p => p.id === item.id).price * item.qty, 0);\n    }\n\n    function renderBag() {\n      bag = bag.filter(item => item.qty > 0);\n      const count = bag.reduce((sum, item) => sum + item.qty, 0);\n\n      document.getElementById(\"bagCount\").textContent = count;\n      document.getElementById(\"bagTotal\").textContent = price(bagTotal());\n\n      document.getElementById(\"bagItems\").innerHTML = bag.length\n        ? bag.map(item => {\n            const p = products.find(pr => pr.id === item.id);\n            return `\n              <div class=\"bag-item\">\n                <img decoding=\"async\" src=\"${p.image}\" alt=\"\">\n                <div class=\"bag-item-details\">\n                  <strong>${p.name}<\/strong>\n                  <span>${price(p.price)}<\/span>\n                  <div class=\"quantity\">\n                    <button type=\"button\" data-change=\"-1\" data-id=\"${item.id}\" aria-label=\"Remove one ${p.name}\">&minus;<\/button>\n                    <span>${item.qty}<\/span>\n                    <button type=\"button\" data-change=\"1\" data-id=\"${item.id}\" aria-label=\"Add one ${p.name}\">+<\/button>\n                    <button class=\"remove\" type=\"button\" data-remove=\"${item.id}\">Remove<\/button>\n                  <\/div>\n                <\/div>\n              <\/div>`;\n          }).join(\"\")\n        : \"<p>Your bag is empty.<\/p>\";\n    }\n\n    function openBag() {\n      previousFocus = document.activeElement;\n      backdrop.hidden = false;\n      drawer.inert = false;\n      drawer.classList.add(\"open\");\n      drawer.setAttribute(\"aria-hidden\", \"false\");\n      document.body.style.overflow = \"hidden\";\n      document.getElementById(\"closeBag\").focus();\n    }\n\n    function closeBag() {\n      drawer.classList.remove(\"open\");\n      drawer.setAttribute(\"aria-hidden\", \"true\");\n      drawer.inert = true;\n      backdrop.hidden = true;\n      document.body.style.overflow = \"\";\n      if (previousFocus) previousFocus.focus();\n    }\n\n    searchInput.addEventListener(\"input\", renderProducts);\n\n    document.getElementById(\"searchForm\").addEventListener(\"submit\", event => {\n      event.preventDefault();\n      document.getElementById(\"shop\").scrollIntoView({ behavior: \"smooth\" });\n    });\n\n    document.getElementById(\"clearSearch\").addEventListener(\"click\", () => {\n      searchInput.value = \"\";\n      renderProducts();\n      searchInput.focus();\n    });\n\n    document.querySelectorAll(\"[data-category]\").forEach(element => {\n      element.addEventListener(\"click\", () => {\n        category = element.dataset.category;\n        favoritesOnly = false;\n        renderProducts();\n        if (element.classList.contains(\"category-card\")) {\n          document.getElementById(\"shop\").scrollIntoView({ behavior: \"smooth\" });\n        }\n      });\n    });\n\n    sortSelect.addEventListener(\"change\", renderProducts);\n\n    document.getElementById(\"resetFilters\").addEventListener(\"click\", () => {\n      category = \"All\";\n      favoritesOnly = false;\n      searchInput.value = \"\";\n      sortSelect.value = \"featured\";\n      renderProducts();\n    });\n\n    document.getElementById(\"favoritesButton\").addEventListener(\"click\", () => {\n      favoritesOnly = !favoritesOnly;\n      category = \"All\";\n      searchInput.value = \"\";\n      renderProducts();\n      document.getElementById(\"shop\").scrollIntoView({ behavior: \"smooth\" });\n    });\n\n    grid.addEventListener(\"click\", event => {\n      const addButton = event.target.closest(\"[data-add]\");\n      const favoriteButton = event.target.closest(\"[data-favorite]\");\n\n      if (addButton) {\n        const id = Number(addButton.dataset.add);\n        const item = bag.find(i => i.id === id);\n        if (item) item.qty = Math.min(item.qty + 1, 99);\n        else bag.push({ id: id, qty: 1 });\n\n        save(\"mounisaicrafty-bag\", bag);\n        renderBag();\n\n        if (!bagOpenedOnce) {\n          bagOpenedOnce = true;\n          openBag();\n        } else {\n          const label = addButton.innerHTML;\n          addButton.innerHTML = \"Added &#10003;\";\n          setTimeout(() => { addButton.innerHTML = label; }, 900);\n        }\n      }\n\n      if (favoriteButton) {\n        const id = Number(favoriteButton.dataset.favorite);\n        if (favorites.has(id)) favorites.delete(id);\n        else favorites.add(id);\n        save(\"mounisaicrafty-favorites\", [...favorites]);\n        renderProducts();\n      }\n    });\n\n    document.getElementById(\"bagItems\").addEventListener(\"click\", event => {\n      const changeButton = event.target.closest(\"[data-change]\");\n      const removeButton = event.target.closest(\"[data-remove]\");\n\n      if (changeButton) {\n        const item = bag.find(i => i.id === Number(changeButton.dataset.id));\n        if (item) item.qty = Math.min(99, item.qty + Number(changeButton.dataset.change));\n      } else if (removeButton) {\n        bag = bag.filter(i => i.id !== Number(removeButton.dataset.remove));\n      } else {\n        return;\n      }\n\n      save(\"mounisaicrafty-bag\", bag);\n      renderBag();\n    });\n\n    document.getElementById(\"waOrder\").addEventListener(\"click\", () => {\n      if (!bag.length) { alert(\"Your bag is empty.\"); return; }\n      const lines = bag.map(item => {\n        const p = products.find(pr => pr.id === item.id);\n        return \"- \" + p.name + \" x \" + item.qty + \" = \" + price(p.price * item.qty);\n      });\n      const message = \"Hi mounisaicrafty, I would like to order:\\n\" +\n        lines.join(\"\\n\") + \"\\n\\nTotal: \" + price(bagTotal());\n      window.open(waLink(message), \"_blank\");\n    });\n\n    document.getElementById(\"openBag\").addEventListener(\"click\", openBag);\n    document.getElementById(\"closeBag\").addEventListener(\"click\", closeBag);\n    backdrop.addEventListener(\"click\", closeBag);\n\n    document.getElementById(\"loginForm\").addEventListener(\"submit\", e => {\n      e.preventDefault();\n      alert(\"Demo only. Connect WooCommerce or a real login system to enable accounts.\");\n    });\n    document.getElementById(\"registerForm\").addEventListener(\"submit\", e => {\n      e.preventDefault();\n      alert(\"Demo only. Connect WooCommerce or a real login system to enable accounts.\");\n    });\n\n    document.addEventListener(\"keydown\", event => {\n      if (!drawer.classList.contains(\"open\")) return;\n      if (event.key === \"Escape\") closeBag();\n\n      if (event.key === \"Tab\") {\n        const buttons = [...drawer.querySelectorAll(\"button:not([disabled])\")];\n        const first = buttons[0];\n        const last = buttons[buttons.length - 1];\n        if (event.shiftKey && document.activeElement === first) {\n          event.preventDefault(); last.focus();\n        } else if (!event.shiftKey && document.activeElement === last) {\n          event.preventDefault(); first.focus();\n        }\n      }\n    });\n\n    document.getElementById(\"year\").textContent = new Date().getFullYear();\n    renderProducts();\n    renderBag();\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>mounisaicrafty | Bangles, Jewellery &amp; Accessories BEAUTIFUL LITTLE FINDS FOR EVERY OCCASION mounisaicrafty \u2665 Favourites (0) Bag (0) \u2315 Clear [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"right-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=55"}],"version-history":[{"count":8,"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=\/wp\/v2\/pages\/55\/revisions\/161"}],"wp:attachment":[{"href":"https:\/\/mounisaicrafty.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}