{"id":5,"date":"2026-10-05T18:38:13","date_gmt":"2026-10-05T18:38:13","guid":{"rendered":"https:\/\/dashyselections.com\/?page_id=5"},"modified":"2026-10-05T18:50:40","modified_gmt":"2026-10-05T18:50:40","slug":"demo","status":"publish","type":"page","link":"https:\/\/dashyselections.com\/","title":{"rendered":"DEMO"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>Dashy Selections | Jewelry, Watches &amp; Accessories<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Playfair+Display:ital,wght@0,500;0,600;1,500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n\n:root{\n    --black:#171513;\n    --cream:#f8f5ef;\n    --soft:#f0ebe3;\n    --white:#fff;\n    --gold:#a37b45;\n    --muted:#77716a;\n    --line:#e3ddd4;\n}\n\n*{\n    box-sizing:border-box;\n    margin:0;\n    padding:0;\n}\n\nhtml{\n    scroll-behavior:smooth;\n}\n\nbody{\n    font-family:\"DM Sans\",sans-serif;\n    background:var(--cream);\n    color:var(--black);\n    overflow-x:hidden;\n    padding-bottom:0;\n}\n\nimg{\n    display:block;\n    width:100%;\n}\n\nbutton,\ninput,\nselect{\n    font:inherit;\n}\n\nbutton{\n    cursor:pointer;\n}\n\na{\n    color:inherit;\n    text-decoration:none;\n}\n\n.container{\n    width:min(1400px,94%);\n    margin:auto;\n}\n\n\n\/* =========================\n   TOP BAR\n========================= *\/\n\n.topbar{\n    height:32px;\n    background:var(--black);\n    color:#fff;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:30px;\n    font-size:8px;\n    text-transform:uppercase;\n    letter-spacing:.14em;\n}\n\n\n\/* =========================\n   HEADER\n========================= *\/\n\nheader{\n    height:78px;\n    position:sticky;\n    top:0;\n    z-index:1000;\n    background:rgba(255,255,255,.96);\n    border-bottom:1px solid var(--line);\n    backdrop-filter:blur(14px);\n}\n\n.nav{\n    height:100%;\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n}\n\n.logo{\n    display:flex;\n    align-items:center;\n    gap:9px;\n}\n\n.logo-mark{\n    width:36px;\n    height:36px;\n    border:1px solid var(--black);\n    display:grid;\n    place-items:center;\n    font-family:\"Playfair Display\",serif;\n    font-size:18px;\n}\n\n.logo-name{\n    font-family:\"Playfair Display\",serif;\n    font-size:21px;\n}\n\n.logo-sub{\n    font-size:6px;\n    letter-spacing:.2em;\n    color:var(--muted);\n    text-align:center;\n}\n\n.nav-links{\n    display:flex;\n    gap:30px;\n    font-size:10px;\n    font-weight:600;\n}\n\n.nav-links a:hover{\n    color:var(--gold);\n}\n\n.nav-actions{\n    display:flex;\n    align-items:center;\n    gap:7px;\n}\n\n.icon{\n    width:38px;\n    height:38px;\n    border:1px solid var(--line);\n    background:#fff;\n    border-radius:50%;\n    display:grid;\n    place-items:center;\n    font-size:15px;\n}\n\n.icon:hover{\n    background:var(--black);\n    color:#fff;\n}\n\n.cart-box{\n    position:relative;\n}\n\n.cart-number{\n    position:absolute;\n    right:-2px;\n    top:-3px;\n    width:16px;\n    height:16px;\n    border-radius:50%;\n    background:var(--gold);\n    color:#fff;\n    display:grid;\n    place-items:center;\n    font-size:7px;\n}\n\n\n\/* =========================\n   HERO\n========================= *\/\n\n.hero{\n    height:calc(100vh - 110px);\n    min-height:580px;\n    position:relative;\n    overflow:hidden;\n    background:#222;\n}\n\n.slide{\n    position:absolute;\n    inset:0;\n    opacity:0;\n    visibility:hidden;\n    transition:opacity .8s ease;\n}\n\n.slide.active{\n    opacity:1;\n    visibility:visible;\n}\n\n.slide img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n}\n\n.slide:after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    background:\n        linear-gradient(\n            90deg,\n            rgba(0,0,0,.68),\n            rgba(0,0,0,.22) 55%,\n            rgba(0,0,0,.03)\n        );\n}\n\n.hero-content{\n    position:absolute;\n    z-index:3;\n    left:7%;\n    top:50%;\n    transform:translateY(-50%);\n    color:#fff;\n}\n\n.hero-content small{\n    text-transform:uppercase;\n    letter-spacing:.22em;\n    font-size:9px;\n}\n\n.hero h1{\n    font-family:\"Playfair Display\",serif;\n    font-size:clamp(55px,7vw,105px);\n    line-height:.86;\n    font-weight:500;\n    letter-spacing:-.055em;\n    margin:16px 0 22px;\n}\n\n.hero h1 em{\n    font-style:italic;\n}\n\n.hero-content p{\n    max-width:390px;\n    color:#eee;\n    font-size:13px;\n    line-height:1.7;\n    margin-bottom:25px;\n}\n\n.btn{\n    min-height:46px;\n    padding:0 23px;\n    border-radius:100px;\n    border:1px solid var(--black);\n    background:var(--black);\n    color:#fff;\n    font-size:8px;\n    font-weight:700;\n    text-transform:uppercase;\n    letter-spacing:.12em;\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n}\n\n.btn.white{\n    background:#fff;\n    color:var(--black);\n    border-color:#fff;\n}\n\n.hero-controls{\n    position:absolute;\n    z-index:5;\n    bottom:25px;\n    left:7%;\n    display:flex;\n    align-items:center;\n    gap:10px;\n}\n\n.dots{\n    display:flex;\n    gap:6px;\n}\n\n.dot{\n    width:25px;\n    height:3px;\n    border:0;\n    background:#ffffff77;\n}\n\n.dot.active{\n    width:48px;\n    background:#fff;\n}\n\n\n\/* =========================\n   CATEGORIES\n========================= *\/\n\n.categories{\n    padding:75px 0 95px;\n    background:#fff;\n}\n\n.heading{\n    display:flex;\n    align-items:end;\n    justify-content:space-between;\n    margin-bottom:30px;\n}\n\n.heading h2{\n    font-family:\"Playfair Display\",serif;\n    font-size:clamp(40px,5vw,65px);\n    font-weight:500;\n    line-height:.92;\n}\n\n.heading p{\n    color:var(--muted);\n    font-size:11px;\n    max-width:350px;\n    line-height:1.7;\n}\n\n.category-grid{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:12px;\n}\n\n.category{\n    position:relative;\n    height:500px;\n    overflow:hidden;\n    background:#ddd;\n}\n\n.category img{\n    height:100%;\n    object-fit:cover;\n    transition:.6s;\n}\n\n.category:hover img{\n    transform:scale(1.04);\n}\n\n.category:after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    background:linear-gradient(\n        transparent 40%,\n        rgba(0,0,0,.72)\n    );\n}\n\n.category-info{\n    position:absolute;\n    z-index:2;\n    left:22px;\n    bottom:24px;\n    color:#fff;\n}\n\n.category-info span{\n    font-size:8px;\n    letter-spacing:.18em;\n    text-transform:uppercase;\n}\n\n.category-info h3{\n    font-family:\"Playfair Display\",serif;\n    font-size:34px;\n    font-weight:500;\n    margin:5px 0 9px;\n}\n\n.category-info a{\n    font-size:8px;\n    text-transform:uppercase;\n    letter-spacing:.12em;\n    border-bottom:1px solid #fff;\n    padding-bottom:3px;\n}\n\n\n\/* =========================\n   SHOP\n========================= *\/\n\n.shop{\n    padding:90px 0;\n    background:var(--cream);\n}\n\n.shop-head{\n    display:flex;\n    justify-content:space-between;\n    align-items:end;\n    margin-bottom:30px;\n}\n\n.shop-head h2{\n    font-family:\"Playfair Display\",serif;\n    font-size:55px;\n    font-weight:500;\n}\n\n.filters{\n    display:flex;\n    gap:6px;\n    overflow:auto;\n    padding-bottom:5px;\n}\n\n.filter{\n    white-space:nowrap;\n    border:1px solid var(--line);\n    background:#fff;\n    border-radius:100px;\n    padding:9px 16px;\n    font-size:8px;\n    text-transform:uppercase;\n    letter-spacing:.1em;\n}\n\n.filter.active{\n    background:var(--black);\n    color:#fff;\n    border-color:var(--black);\n}\n\n\n\/* =========================\n   PRODUCTS\n========================= *\/\n\n.products{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:28px 12px;\n}\n\n.product-image{\n    position:relative;\n    aspect-ratio:1\/1.13;\n    background:#eeeae3;\n    overflow:hidden;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n}\n\n.product-image img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n    padding:10px;\n    transition:.4s;\n}\n\n.product:hover img{\n    transform:scale(1.035);\n}\n\n.heart{\n    position:absolute;\n    z-index:2;\n    right:9px;\n    top:9px;\n    width:34px;\n    height:34px;\n    border:0;\n    border-radius:50%;\n    background:#fff;\n    font-size:16px;\n}\n\n.heart.active{\n    color:#a37b45;\n}\n\n.badge{\n    position:absolute;\n    z-index:2;\n    left:9px;\n    top:9px;\n    background:#fff;\n    padding:7px 9px;\n    font-size:7px;\n    text-transform:uppercase;\n    letter-spacing:.1em;\n}\n\n.product-info{\n    padding-top:12px;\n}\n\n.product-info small{\n    color:var(--muted);\n    font-size:7px;\n    text-transform:uppercase;\n    letter-spacing:.12em;\n}\n\n.product-info h3{\n    font-family:\"Playfair Display\",serif;\n    font-size:18px;\n    font-weight:500;\n    margin:5px 0;\n}\n\n.product-price{\n    font-size:10px;\n    font-weight:700;\n}\n\n.add-btn{\n    width:100%;\n    margin-top:10px;\n    height:38px;\n    border:1px solid var(--black);\n    background:var(--black);\n    color:#fff;\n    font-size:8px;\n    text-transform:uppercase;\n    letter-spacing:.1em;\n}\n\n.add-btn:hover{\n    background:var(--gold);\n    border-color:var(--gold);\n}\n\n\n\/* =========================\n   PROMO\n========================= *\/\n\n.promo{\n    position:relative;\n    height:520px;\n    overflow:hidden;\n}\n\n.promo img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n}\n\n.promo:after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    background:rgba(0,0,0,.38);\n}\n\n.promo-content{\n    position:absolute;\n    z-index:2;\n    left:7%;\n    top:50%;\n    transform:translateY(-50%);\n    color:#fff;\n}\n\n.promo-content small{\n    font-size:9px;\n    letter-spacing:.18em;\n    text-transform:uppercase;\n}\n\n.promo-content h2{\n    font-family:\"Playfair Display\",serif;\n    font-size:65px;\n    line-height:.9;\n    font-weight:500;\n    margin:15px 0 25px;\n}\n\n.promo-content em{\n    font-style:italic;\n}\n\n\n\/* =========================\n   NEW ARRIVALS\n========================= *\/\n\n.more{\n    padding:90px 0;\n    background:#fff;\n}\n\n\n\/* =========================\n   STORE\n========================= *\/\n\n.store{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    min-height:600px;\n    background:var(--black);\n    color:#fff;\n}\n\n.store-image{\n    min-height:600px;\n}\n\n.store-image img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n}\n\n.store-copy{\n    display:flex;\n    align-items:center;\n    padding:80px;\n}\n\n.store-copy .eyebrow{\n    text-transform:uppercase;\n    letter-spacing:.2em;\n    font-size:8px;\n    color:#bfa783;\n}\n\n.store-copy h2{\n    font-family:\"Playfair Display\",serif;\n    font-size:75px;\n    line-height:.85;\n    font-weight:500;\n    margin:18px 0 25px;\n}\n\n.store-copy h2 em{\n    font-style:italic;\n}\n\n.store-copy p{\n    max-width:350px;\n    color:#bbb;\n    line-height:1.7;\n    font-size:11px;\n    margin-bottom:25px;\n}\n\n.location{\n    border-left:1px solid #665b4e;\n    padding-left:18px;\n    margin-bottom:30px;\n}\n\n.location strong{\n    display:block;\n    font-family:\"Playfair Display\",serif;\n    font-size:22px;\n    font-weight:500;\n    margin-bottom:6px;\n}\n\n.location span{\n    font-size:10px;\n    color:#aaa;\n    line-height:1.7;\n}\n\n\n\/* =========================\n   FOOTER\n========================= *\/\n\nfooter{\n    background:#111;\n    color:#fff;\n    padding:65px 0 35px;\n}\n\n.footer{\n    display:grid;\n    grid-template-columns:2fr 1fr 1fr 1fr;\n    gap:40px;\n}\n\n.footer-logo{\n    font-family:\"Playfair Display\",serif;\n    font-size:28px;\n    margin-bottom:10px;\n}\n\n.footer p{\n    color:#888;\n    font-size:9px;\n    line-height:1.7;\n}\n\n.footer h4{\n    font-size:8px;\n    text-transform:uppercase;\n    letter-spacing:.15em;\n    margin-bottom:15px;\n}\n\n.footer a{\n    display:block;\n    color:#999;\n    font-size:9px;\n    margin-bottom:10px;\n}\n\n.footer a:hover{\n    color:#fff;\n}\n\n.footer-bottom{\n    border-top:1px solid #292929;\n    margin-top:50px;\n    padding-top:20px;\n    color:#666;\n    font-size:8px;\n    display:flex;\n    justify-content:space-between;\n}\n\n\n\/* =========================\n   CART\n========================= *\/\n\n.overlay{\n    position:fixed;\n    inset:0;\n    background:rgba(0,0,0,.5);\n    z-index:1998;\n    opacity:0;\n    visibility:hidden;\n    transition:.3s;\n}\n\n.overlay.show{\n    opacity:1;\n    visibility:visible;\n}\n\n.cart{\n    position:fixed;\n    z-index:2000;\n    right:0;\n    top:0;\n    height:100vh;\n    width:min(440px,92vw);\n    background:#fff;\n    transform:translateX(100%);\n    transition:.35s;\n    display:flex;\n    flex-direction:column;\n}\n\n.cart.show{\n    transform:translateX(0);\n}\n\n.cart-head{\n    padding:25px;\n    border-bottom:1px solid var(--line);\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n}\n\n.cart-head h3{\n    font-family:\"Playfair Display\",serif;\n    font-size:27px;\n}\n\n.close{\n    width:35px;\n    height:35px;\n    border:1px solid var(--line);\n    background:#fff;\n    border-radius:50%;\n}\n\n.cart-items{\n    flex:1;\n    overflow:auto;\n    padding:20px;\n}\n\n.cart-item{\n    display:grid;\n    grid-template-columns:70px 1fr auto;\n    gap:12px;\n    align-items:center;\n    padding:12px 0;\n    border-bottom:1px solid var(--line);\n}\n\n.cart-item img{\n    width:70px;\n    height:80px;\n    object-fit:contain;\n    background:var(--soft);\n}\n\n.cart-item h4{\n    font-family:\"Playfair Display\",serif;\n    font-size:14px;\n}\n\n.cart-item p{\n    font-size:9px;\n    color:var(--muted);\n    margin-top:4px;\n}\n\n.remove{\n    border:0;\n    background:none;\n    color:#999;\n    font-size:8px;\n}\n\n.cart-footer{\n    border-top:1px solid var(--line);\n    padding:20px;\n}\n\n.cart-total{\n    display:flex;\n    justify-content:space-between;\n    font-size:12px;\n    font-weight:700;\n    margin-bottom:15px;\n}\n\n.checkout{\n    width:100%;\n    height:48px;\n    border:0;\n    background:var(--black);\n    color:#fff;\n    font-size:9px;\n    text-transform:uppercase;\n    letter-spacing:.12em;\n}\n\n\n\/* =========================\n   QUICK VIEW\n========================= *\/\n\n.quick{\n    position:fixed;\n    z-index:2500;\n    inset:0;\n    display:none;\n    align-items:center;\n    justify-content:center;\n    padding:20px;\n}\n\n.quick.show{\n    display:flex;\n}\n\n.quick-card{\n    width:min(850px,100%);\n    max-height:90vh;\n    overflow:auto;\n    background:#fff;\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    position:relative;\n}\n\n.quick-image{\n    background:var(--soft);\n    min-height:520px;\n}\n\n.quick-image img{\n    width:100%;\n    height:100%;\n    object-fit:contain;\n}\n\n.quick-info{\n    padding:45px;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n}\n\n.quick-info small{\n    color:var(--muted);\n    text-transform:uppercase;\n    letter-spacing:.15em;\n    font-size:8px;\n}\n\n.quick-info h2{\n    font-family:\"Playfair Display\",serif;\n    font-size:42px;\n    line-height:1;\n    font-weight:500;\n    margin:12px 0;\n}\n\n.quick-price{\n    font-size:14px;\n    font-weight:700;\n    margin-bottom:20px;\n}\n\n.quick-close{\n    position:absolute;\n    right:15px;\n    top:15px;\n    width:38px;\n    height:38px;\n    border:0;\n    border-radius:50%;\n    background:#fff;\n    z-index:2;\n}\n\n\n\/* =========================\n   SEARCH\n========================= *\/\n\n.search-panel{\n    position:fixed;\n    z-index:1800;\n    top:110px;\n    left:0;\n    right:0;\n    background:#fff;\n    border-bottom:1px solid var(--line);\n    padding:25px;\n    transform:translateY(-150%);\n    transition:.3s;\n}\n\n.search-panel.show{\n    transform:translateY(0);\n}\n\n.search-inner{\n    width:min(900px,94%);\n    margin:auto;\n}\n\n.search-input{\n    width:100%;\n    border:0;\n    border-bottom:1px solid var(--black);\n    padding:15px 0;\n    outline:0;\n    font-size:25px;\n    font-family:\"Playfair Display\",serif;\n}\n\n\n\/* =========================\n   MOBILE NAV\n========================= *\/\n\n.mobile-nav{\n    display:none;\n}\n\n\n\/* =========================\n   TABLET\n========================= *\/\n\n@media(max-width:900px){\n\n    .nav-links{\n        display:none;\n    }\n\n    .products{\n        grid-template-columns:repeat(3,1fr);\n    }\n\n    .category-grid{\n        grid-template-columns:repeat(2,1fr);\n    }\n\n    .store-copy{\n        padding:50px;\n    }\n\n    .footer{\n        grid-template-columns:1fr 1fr;\n    }\n\n}\n\n\n\/* =========================\n   PHONE\n========================= *\/\n\n@media(max-width:600px){\n\n    body{\n        padding-bottom:68px;\n    }\n\n    .topbar{\n        height:27px;\n        gap:14px;\n        font-size:6px;\n        overflow:hidden;\n        white-space:nowrap;\n    }\n\n    .topbar span:nth-child(3),\n    .topbar span:nth-child(4),\n    .topbar span:nth-child(5){\n        display:none;\n    }\n\n    header{\n        height:64px;\n    }\n\n    .container{\n        width:92%;\n    }\n\n    .logo-mark{\n        width:32px;\n        height:32px;\n    }\n\n    .logo-name{\n        font-size:18px;\n    }\n\n    .logo-sub{\n        font-size:5px;\n    }\n\n    .nav-actions{\n        gap:4px;\n    }\n\n    .nav-actions .icon{\n        width:34px;\n        height:34px;\n        font-size:13px;\n    }\n\n    \/* HERO *\/\n\n    .hero{\n        height:calc(100svh - 91px);\n        min-height:540px;\n    }\n\n    .slide img{\n        object-position:center;\n    }\n\n    .slide:after{\n        background:\n            linear-gradient(\n                180deg,\n                rgba(0,0,0,.12),\n                rgba(0,0,0,.72)\n            );\n    }\n\n    .hero-content{\n        left:6%;\n        right:6%;\n        top:auto;\n        bottom:90px;\n        transform:none;\n    }\n\n    .hero-content small{\n        font-size:8px;\n    }\n\n    .hero h1{\n        font-size:52px;\n        line-height:.87;\n        margin:12px 0 16px;\n    }\n\n    .hero-content p{\n        font-size:10px;\n        max-width:280px;\n        line-height:1.5;\n        margin-bottom:17px;\n    }\n\n    .btn{\n        min-height:43px;\n        padding:0 18px;\n        font-size:7px;\n    }\n\n    .hero-controls{\n        left:6%;\n        bottom:28px;\n    }\n\n    \/* CATEGORIES *\/\n\n    .categories{\n        padding:50px 0 60px;\n    }\n\n    .heading{\n        display:block;\n        margin-bottom:22px;\n    }\n\n    .heading h2{\n        font-size:43px;\n        margin-bottom:12px;\n    }\n\n    .heading p{\n        display:none;\n    }\n\n    \/*\n       IMPORTANT:\n       ONE COLUMN ON PHONES\n    *\/\n\n    .category-grid{\n        display:grid;\n        grid-template-columns:1fr;\n        gap:12px;\n    }\n\n    .category{\n        width:100%;\n        height:auto;\n        aspect-ratio:3\/4;\n    }\n\n    .category img{\n        object-position:center;\n    }\n\n    .category-info{\n        left:18px;\n        bottom:20px;\n    }\n\n    .category-info h3{\n        font-size:29px;\n        margin:4px 0 7px;\n    }\n\n    .category-info span{\n        font-size:7px;\n    }\n\n    .category-info a{\n        font-size:7px;\n    }\n\n    \/* SHOP *\/\n\n    .shop{\n        padding:55px 0 65px;\n    }\n\n    .shop-head{\n        display:block;\n        margin-bottom:20px;\n    }\n\n    .shop-head h2{\n        font-size:42px;\n        margin-bottom:18px;\n    }\n\n    .filters{\n        width:100vw;\n        margin-left:-4vw;\n        padding-left:4vw;\n        padding-right:4vw;\n    }\n\n    .filter{\n        padding:9px 14px;\n        font-size:7px;\n    }\n\n    \/* PRODUCTS *\/\n\n    .products{\n        grid-template-columns:repeat(2,minmax(0,1fr));\n        gap:22px 9px;\n    }\n\n    .product-image{\n        aspect-ratio:1\/1.15;\n    }\n\n    .product-image img{\n        padding:7px;\n    }\n\n    .heart{\n        width:31px;\n        height:31px;\n        font-size:14px;\n        right:7px;\n        top:7px;\n    }\n\n    .badge{\n        left:7px;\n        top:7px;\n        padding:6px 7px;\n        font-size:6px;\n    }\n\n    .product-info{\n        padding-top:9px;\n    }\n\n    .product-info small{\n        font-size:6px;\n    }\n\n    .product-info h3{\n        font-size:15px;\n        line-height:1.15;\n        margin:4px 0;\n    }\n\n    .product-price{\n        font-size:9px;\n    }\n\n    .add-btn{\n        height:36px;\n        margin-top:8px;\n        font-size:7px;\n    }\n\n    \/* PROMO *\/\n\n    .promo{\n        height:420px;\n    }\n\n    .promo-content{\n        left:7%;\n        right:7%;\n    }\n\n    .promo-content h2{\n        font-size:49px;\n    }\n\n    \/* STORE *\/\n\n    .store{\n        display:block;\n    }\n\n    .store-image{\n        height:430px;\n        min-height:0;\n    }\n\n    .store-copy{\n        padding:55px 7%;\n    }\n\n    .store-copy h2{\n        font-size:55px;\n    }\n\n    .store-copy p{\n        font-size:10px;\n    }\n\n    \/* FOOTER *\/\n\n    footer{\n        padding:50px 0 30px;\n    }\n\n    .footer{\n        grid-template-columns:1fr 1fr;\n        gap:30px 20px;\n    }\n\n    .footer-brand{\n        grid-column:1\/-1;\n    }\n\n    .footer-bottom{\n        display:block;\n        line-height:1.8;\n    }\n\n    \/* QUICK VIEW *\/\n\n    .quick{\n        padding:0;\n        align-items:flex-end;\n    }\n\n    .quick-card{\n        width:100%;\n        max-height:92svh;\n        grid-template-columns:1fr;\n        border-radius:18px 18px 0 0;\n        overflow:auto;\n    }\n\n    .quick-image{\n        min-height:330px;\n        height:330px;\n    }\n\n    .quick-info{\n        padding:28px 22px 35px;\n    }\n\n    .quick-info h2{\n        font-size:32px;\n    }\n\n    \/* CART *\/\n\n    .cart{\n        width:100%;\n    }\n\n    \/* MOBILE NAV *\/\n\n    .mobile-nav{\n        position:fixed;\n        z-index:3000;\n        display:flex;\n        align-items:center;\n        justify-content:space-around;\n        bottom:0;\n        left:0;\n        right:0;\n        height:68px;\n        background:rgba(255,255,255,.97);\n        border-top:1px solid var(--line);\n        backdrop-filter:blur(15px);\n    }\n\n    .mobile-nav a,\n    .mobile-nav button{\n        border:0;\n        background:none;\n        text-align:center;\n        font-size:7px;\n        color:var(--black);\n        min-width:55px;\n    }\n\n    .mobile-nav span{\n        display:block;\n        font-size:18px;\n        margin-bottom:3px;\n    }\n\n}\n\n\n\/* =========================\n   SMALL PHONE\n========================= *\/\n\n@media(max-width:380px){\n\n    .hero h1{\n        font-size:46px;\n    }\n\n    .category{\n        aspect-ratio:3\/4.3;\n    }\n\n    .category-info h3{\n        font-size:26px;\n    }\n\n    .products{\n        gap:20px 7px;\n    }\n\n    .product-info h3{\n        font-size:14px;\n    }\n\n    .add-btn{\n        font-size:6px;\n    }\n\n}\n\n<\/style>\n\n\n\n\n\n<!--\n========================================================\nDASHY SELECTIONS\n\nWebsite concept by TechLink Global\n\nBusiness:\nDashy Selections\n\nJewelry | Watches | Sunglasses | Fashion Accessories\n\nPhysical Shop:\nDubois Beauty Bldng Shop G7\nDubois Road, Nairobi\n\nProduct names and prices below are SAMPLE DEMO DATA.\nReplace with the client's actual catalogue before launch.\n\nThe DS1-DS15 images are the supplied Dashy product images.\nCategory images are editorial\/category visuals.\n========================================================\n-->\n\n\n<!-- TOP BAR -->\n\n<div class=\"topbar\">\n    <span>Jewelry<\/span>\n    <span>Watches<\/span>\n    <span>Sunglasses<\/span>\n    <span>Accessories<\/span>\n    <span>Dubois Road \u00b7 Nairobi<\/span>\n<\/div>\n\n\n<!-- HEADER -->\n\n<header>\n\n    <div class=\"container nav\">\n\n        <a href=\"#\" class=\"logo\">\n\n            <span class=\"logo-mark\">D<\/span>\n\n            <span>\n                <div class=\"logo-name\">Dashy<\/div>\n                <div class=\"logo-sub\">SELECTIONS<\/div>\n            <\/span>\n\n        <\/a>\n\n\n        <nav class=\"nav-links\">\n            <a href=\"#shop\">Shop<\/a>\n            <a href=\"#categories\">Categories<\/a>\n            <a href=\"#new\">New In<\/a>\n            <a href=\"#store\">Visit Us<\/a>\n        <\/nav>\n\n\n        <div class=\"nav-actions\">\n\n            <button class=\"icon\" onclick=\"openSearch()\" aria-label=\"Search\">\n                \u2315\n            <\/button>\n\n            <button class=\"icon\" onclick=\"scrollToShop()\" aria-label=\"Wishlist\">\n                \u2661\n            <\/button>\n\n            <div class=\"cart-box\">\n\n                <button class=\"icon\" onclick=\"openCart()\" aria-label=\"Cart\">\n                    \ud83d\udecd\n                <\/button>\n\n                <span class=\"cart-number\" id=\"cartCount\">0<\/span>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/header>\n\n\n<!-- SEARCH -->\n\n<div class=\"search-panel\" id=\"searchPanel\">\n\n    <div class=\"search-inner\">\n\n        <input class=\"search-input\" id=\"searchInput\" type=\"search\" placeholder=\"Search jewelry, watches, sunglasses...\" oninput=\"searchProducts()\">\n\n    <\/div>\n\n<\/div>\n\n\n<!-- HERO -->\n\n<section class=\"hero\">\n\n    <div class=\"slide active\">\n\n        <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS1.jpg\" alt=\"Dashy Selections jewelry\">\n\n        <div class=\"hero-content\">\n\n            <small>Dashy Selections<\/small>\n\n            <h1>\n                Timeless<br>\n                <em>details.<\/em>\n            <\/h1>\n\n            <p>\n                Jewelry, watches, sunglasses and fashion accessories.\n            <\/p>\n\n            <a href=\"#shop\" class=\"btn white\">\n                Shop now \u2192\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n\n    <div class=\"slide\">\n\n        <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS2.jpg\" alt=\"Dashy Selections accessories\">\n\n        <div class=\"hero-content\">\n\n            <small>New collection<\/small>\n\n            <h1>\n                Made<br>\n                <em>to shine.<\/em>\n            <\/h1>\n\n            <p>\n                Find your next favourite detail.\n            <\/p>\n\n            <a href=\"#shop\" class=\"btn white\">\n                Explore \u2192\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n\n    <div class=\"slide\">\n\n        <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS3.jpg\" alt=\"Dashy Selections fashion accessories\">\n\n        <div class=\"hero-content\">\n\n            <small>Dashy edit<\/small>\n\n            <h1>\n                Your<br>\n                <em>style.<\/em>\n            <\/h1>\n\n            <p>\n                Complete the look with pieces selected for every mood.\n            <\/p>\n\n            <a href=\"#categories\" class=\"btn white\">\n                Shop categories \u2192\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n\n    <div class=\"slide\">\n\n        <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS4.jpg\" alt=\"Dashy Selections\">\n\n        <div class=\"hero-content\">\n\n            <small>Dashy Selections<\/small>\n\n            <h1>\n                The<br>\n                <em>finishing touch.<\/em>\n            <\/h1>\n\n            <p>\n                Jewelry. Watches. Sunglasses. Accessories.\n            <\/p>\n\n            <a href=\"#shop\" class=\"btn white\">\n                Shop collection \u2192\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n\n    <div class=\"hero-controls\">\n\n        <div class=\"dots\">\n\n            <button class=\"dot active\" onclick=\"goSlide(0)\"><\/button>\n            <button class=\"dot\" onclick=\"goSlide(1)\"><\/button>\n            <button class=\"dot\" onclick=\"goSlide(2)\"><\/button>\n            <button class=\"dot\" onclick=\"goSlide(3)\"><\/button>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- CATEGORIES -->\n\n<section class=\"categories\" id=\"categories\">\n\n    <div class=\"container\">\n\n        <div class=\"heading\">\n\n            <h2>\n                Shop<br>\n                <em>by category.<\/em>\n            <\/h2>\n\n            <p>\n                Find the pieces that complete your look.\n            <\/p>\n\n        <\/div>\n\n\n        <div class=\"category-grid\">\n\n\n            <div class=\"category\">\n\n                <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS1.jpg\" alt=\"Jewelry\">\n\n                <div class=\"category-info\">\n\n                    <span>01<\/span>\n\n                    <h3>Jewelry<\/h3>\n\n                    <a href=\"#shop\" onclick=\"setCategory('Jewelry')\">\n                        Shop jewelry \u2192\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"category\">\n\n                <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS15.jpg\" alt=\"Watches\" https:=\"\" dashyselections.com=\"\" wp-content=\"\" uploads=\"\" 2026=\"\" 10=\"\" ds15.jpg=\"\">\n\n                <div class=\"category-info\">\n\n                    <span>02<\/span>\n\n                    <h3>Watches<\/h3>\n\n                    <a href=\"#shop\" onclick=\"setCategory('Watches')\">\n                        Shop watches \u2192\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"category\">\n\n                <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS12.jpg\" alt=\"Sunglasses\">\n\n                <div class=\"category-info\">\n\n                    <span>03<\/span>\n\n                    <h3>Sunglasses<\/h3>\n\n                    <a href=\"#shop\" onclick=\"setCategory('Sunglasses')\">\n                        Shop sunglasses \u2192\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"category\">\n\n                <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS8.jpg\" alt=\"Fashion Accessories\">\n\n                <div class=\"category-info\">\n\n                    <span>04<\/span>\n\n                    <h3>Accessories<\/h3>\n\n                    <a href=\"#shop\" onclick=\"setCategory('Accessories')\">\n                        Shop accessories \u2192\n                    <\/a>\n\n                <\/div>\n\n            <\/div>\n\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- SHOP -->\n\n<section class=\"shop\" id=\"shop\">\n\n    <div class=\"container\">\n\n        <div class=\"shop-head\">\n\n            <h2>\n                Best sellers.\n            <\/h2>\n\n            <div class=\"filters\">\n\n                <button class=\"filter active\" onclick=\"filterProducts('All',this)\">\n                    All\n                <\/button>\n\n                <button class=\"filter\" onclick=\"filterProducts('Jewelry',this)\">\n                    Jewelry\n                <\/button>\n\n                <button class=\"filter\" onclick=\"filterProducts('Watches',this)\">\n                    Watches\n                <\/button>\n\n                <button class=\"filter\" onclick=\"filterProducts('Sunglasses',this)\">\n                    Sunglasses\n                <\/button>\n\n                <button class=\"filter\" onclick=\"filterProducts('Accessories',this)\">\n                    Accessories\n                <\/button>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"products\" id=\"products\"><\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- PROMO -->\n\n<section class=\"promo\">\n\n    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1511499767150-a48a237f0083?auto=format&amp;fit=crop&amp;w=1800&amp;q=88\" alt=\"Sunglasses\">\n\n    <div class=\"promo-content\">\n\n        <small>Sunglasses<\/small>\n\n        <h2>\n            Shades for<br>\n            <em>every mood.<\/em>\n        <\/h2>\n\n        <a href=\"#shop\" class=\"btn white\" onclick=\"setCategory('Sunglasses')\">\n            Shop sunglasses \u2192\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- NEW ARRIVALS -->\n\n<section class=\"more\" id=\"new\">\n\n    <div class=\"container\">\n\n        <div class=\"shop-head\">\n\n            <h2>\n                New arrivals.\n            <\/h2>\n\n        <\/div>\n\n        <div class=\"products\" id=\"newProducts\"><\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- PROMO 2 -->\n\n<section class=\"promo\">\n\n    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584917865442-de89df76afd3?auto=format&amp;fit=crop&amp;w=1800&amp;q=88\" alt=\"Fashion accessories\">\n\n    <div class=\"promo-content\">\n\n        <small>Accessories<\/small>\n\n        <h2>\n            Style in<br>\n            <em>every detail.<\/em>\n        <\/h2>\n\n        <a href=\"#shop\" class=\"btn white\" onclick=\"setCategory('Accessories')\">\n            Shop accessories \u2192\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- STORE -->\n\n<section class=\"store\" id=\"store\">\n\n    <div class=\"store-image\">\n\n        <img decoding=\"async\" src=\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS15.jpg\" alt=\"Dashy Selections\">\n\n    <\/div>\n\n\n    <div class=\"store-copy\">\n\n        <div>\n\n            <small class=\"eyebrow\">\n                Visit us\n            <\/small>\n\n            <h2>\n                Come<br>\n                <em>see us.<\/em>\n            <\/h2>\n\n            <p>\n                Shop Dashy Selections in person at our physical store.\n            <\/p>\n\n            <div class=\"location\">\n\n                <strong>\n                    Dubois Road\n                <\/strong>\n\n                <span>\n                    Dubois Beauty Bldng \u00b7 Shop G7<br>\n                    Nairobi, Kenya\n                <\/span>\n\n            <\/div>\n\n            <a href=\"https:\/\/www.instagram.com\/dashy.selections\/\" target=\"_blank\" class=\"btn white\">\n                Instagram \u2192\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<!-- FOOTER -->\n\n<footer>\n\n    <div class=\"container\">\n\n        <div class=\"footer\">\n\n            <div class=\"footer-brand\">\n\n                <div class=\"footer-logo\">\n                    Dashy\n                <\/div>\n\n                <p>\n                    Jewelry \u00b7 Watches \u00b7 Sunglasses \u00b7 Fashion Accessories\n                <\/p>\n\n            <\/div>\n\n\n            <div>\n\n                <h4>Shop<\/h4>\n\n                <a href=\"#shop\">Shop All<\/a>\n                <a href=\"#categories\">Jewelry<\/a>\n                <a href=\"#categories\">Watches<\/a>\n                <a href=\"#categories\">Sunglasses<\/a>\n\n            <\/div>\n\n\n            <div>\n\n                <h4>Explore<\/h4>\n\n                <a href=\"#new\">New Arrivals<\/a>\n                <a href=\"#store\">Store<\/a>\n                <a href=\"#categories\">Categories<\/a>\n\n            <\/div>\n\n\n            <div>\n\n                <h4>Follow<\/h4>\n\n                <a href=\"https:\/\/www.instagram.com\/dashy.selections\/\" target=\"_blank\">\n                    Instagram\n                <\/a>\n\n                <a href=\"#store\">\n                    Dubois Road\n                <\/a>\n\n                <a href=\"#store\">\n                    Shop G7\n                <\/a>\n\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"footer-bottom\">\n\n            <span>\n                \u00a9 2026 Dashy Selections\n            <\/span>\n\n            <span>\n                Website concept &amp; development by TechLink Global\n            <\/span>\n\n        <\/div>\n\n    <\/div>\n\n<\/footer>\n\n\n<!-- CART -->\n\n<div class=\"overlay\" id=\"overlay\" onclick=\"closeAll()\"><\/div>\n\n\n<div class=\"cart\" id=\"cart\">\n\n    <div class=\"cart-head\">\n\n        <h3>Your bag<\/h3>\n\n        <button class=\"close\" onclick=\"closeCart()\">\n            \u00d7\n        <\/button>\n\n    <\/div>\n\n\n    <div class=\"cart-items\" id=\"cartItems\"><\/div>\n\n\n    <div class=\"cart-footer\">\n\n        <div class=\"cart-total\">\n\n            <span>Total<\/span>\n\n            <span id=\"total\">\n                KSh 0\n            <\/span>\n\n        <\/div>\n\n        <button class=\"checkout\" onclick=\"checkout()\">\n            Order via WhatsApp\n        <\/button>\n\n    <\/div>\n\n<\/div>\n\n\n<!-- QUICK VIEW -->\n\n<div class=\"quick\" id=\"quick\">\n\n    <div class=\"quick-card\">\n\n        <button class=\"quick-close\" onclick=\"closeQuick()\">\n            \u00d7\n        <\/button>\n\n        <div class=\"quick-image\">\n\n            <img decoding=\"async\" id=\"quickImage\" src=\"\" alt=\"\">\n\n        <\/div>\n\n\n        <div class=\"quick-info\">\n\n            <small id=\"quickCategory\"><\/small>\n\n            <h2 id=\"quickName\"><\/h2>\n\n            <div class=\"quick-price\" id=\"quickPrice\"><\/div>\n\n            <button class=\"checkout\" id=\"quickAdd\">\n                Add to bag\n            <\/button>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<!-- MOBILE NAV -->\n\n<nav class=\"mobile-nav\">\n\n    <a href=\"#\">\n        <span>\u2302<\/span>\n        Home\n    <\/a>\n\n    <a href=\"#categories\">\n        <span>\u25eb<\/span>\n        Categories\n    <\/a>\n\n    <a href=\"#shop\">\n        <span>\u2315<\/span>\n        Shop\n    <\/a>\n\n    <button onclick=\"openCart()\">\n        <span>\ud83d\udecd<\/span>\n        Bag\n    <\/button>\n\n    <a href=\"#store\">\n        <span>\u2316<\/span>\n        Store\n    <\/a>\n\n<\/nav>\n\n\n<script>\n\n\n\/* =========================================================\n   PRODUCT DATA\n   SAMPLE DEMO DATA \u2014 REPLACE WITH REAL PRODUCT DATA\n========================================================= *\/\n\nconst PRODUCTS = [\n\n    {\n        id:1,\n        name:\"Classic Gold Chain\",\n        category:\"Jewelry\",\n        price:1800,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS1.jpg\",\n        badge:\"New\"\n    },\n\n    {\n        id:2,\n        name:\"Signature Watch\",\n        category:\"Watches\",\n        price:4200,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS2.jpg\",\n        badge:\"Bestseller\"\n    },\n\n    {\n        id:3,\n        name:\"Everyday Shades\",\n        category:\"Sunglasses\",\n        price:2500,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS3.jpg\",\n        badge:\"New\"\n    },\n\n    {\n        id:4,\n        name:\"Statement Accessory\",\n        category:\"Accessories\",\n        price:2200,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS4.jpg\",\n        badge:\"\"\n    },\n\n    {\n        id:5,\n        name:\"Minimal Gold Necklace\",\n        category:\"Jewelry\",\n        price:1900,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS5.jpg\",\n        badge:\"\"\n    },\n\n    {\n        id:6,\n        name:\"Classic Timepiece\",\n        category:\"Watches\",\n        price:4500,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS6.jpg\",\n        badge:\"Bestseller\"\n    },\n\n    {\n        id:7,\n        name:\"Modern Sunglasses\",\n        category:\"Sunglasses\",\n        price:2800,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS7.jpg\",\n        badge:\"New\"\n    },\n\n    {\n        id:8,\n        name:\"Gold Fashion Piece\",\n        category:\"Accessories\",\n        price:1600,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS8.jpg\",\n        badge:\"\"\n    },\n\n    {\n        id:9,\n        name:\"Elegant Earrings\",\n        category:\"Jewelry\",\n        price:1500,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS9.jpg\",\n        badge:\"\"\n    },\n\n    {\n        id:10,\n        name:\"Premium Watch\",\n        category:\"Watches\",\n        price:4800,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS10.jpg\",\n        badge:\"Bestseller\"\n    },\n\n    {\n        id:11,\n        name:\"Classic Black Shades\",\n        category:\"Sunglasses\",\n        price:2600,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS11.jpg\",\n        badge:\"\"\n    },\n\n    {\n        id:12,\n        name:\"Fashion Accessory\",\n        category:\"Accessories\",\n        price:1700,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS12.jpg\",\n        badge:\"New\"\n    },\n\n    {\n        id:13,\n        name:\"Delicate Necklace\",\n        category:\"Jewelry\",\n        price:2100,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS13.jpg\",\n        badge:\"\"\n    },\n\n    {\n        id:14,\n        name:\"Everyday Watch\",\n        category:\"Watches\",\n        price:3900,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS14.jpg\",\n        badge:\"\"\n    },\n\n    {\n        id:15,\n        name:\"Signature Accessory\",\n        category:\"Accessories\",\n        price:2300,\n        image:\"https:\/\/dashyselections.com\/wp-content\/uploads\/2026\/10\/DS15.jpg\",\n        badge:\"New\"\n    }\n\n];\n\n\nlet currentCategory = \"All\";\n\nlet cart =\n    JSON.parse(\n        localStorage.getItem(\"dashyCart\") || \"[]\"\n    );\n\n\nlet wishlist =\n    JSON.parse(\n        localStorage.getItem(\"dashyWishlist\") || \"[]\"\n    );\n\n\n\/* =========================================================\n   MONEY\n========================================================= *\/\n\nfunction money(value){\n\n    return \"KSh \" +\n        Number(value).toLocaleString(\"en-KE\");\n\n}\n\n\n\/* =========================================================\n   PRODUCT CARD\n========================================================= *\/\n\nfunction productCard(product){\n\n    const liked =\n        wishlist.includes(product.id);\n\n    return `\n\n        <article class=\"product\">\n\n            <div\n                class=\"product-image\"\n                onclick=\"openQuick(${product.id})\"\n            >\n\n                ${\n                    product.badge\n                    ?\n                    `<span class=\"badge\">\n                        ${product.badge}\n                    <\/span>`\n                    :\n                    \"\"\n                }\n\n                <button\n                    class=\"heart ${liked ? \"active\" : \"\"}\"\n                    onclick=\"event.stopPropagation();toggleWishlist(${product.id})\"\n                >\n                    ${liked ? \"\u2665\" : \"\u2661\"}\n                <\/button>\n\n                <img decoding=\"async\"\n                    src=\"${product.image}\"\n                    alt=\"${product.name}\"\n                    loading=\"lazy\"\n                >\n\n            <\/div>\n\n\n            <div class=\"product-info\">\n\n                <small>\n                    ${product.category}\n                <\/small>\n\n                <h3>\n                    ${product.name}\n                <\/h3>\n\n                <div class=\"product-price\">\n                    ${money(product.price)}\n                <\/div>\n\n                <button\n                    class=\"add-btn\"\n                    onclick=\"addToCart(${product.id})\"\n                >\n                    Add to bag\n                <\/button>\n\n            <\/div>\n\n        <\/article>\n\n    `;\n\n}\n\n\n\/* =========================================================\n   RENDER PRODUCTS\n========================================================= *\/\n\nfunction renderProducts(){\n\n    let filtered =\n        PRODUCTS.filter(product => {\n\n            if(currentCategory === \"All\"){\n                return true;\n            }\n\n            return product.category === currentCategory;\n\n        });\n\n\n    const search =\n        document\n            .getElementById(\"searchInput\")\n            ?.value\n            .toLowerCase()\n            .trim();\n\n\n    if(search){\n\n        filtered =\n            filtered.filter(product =>\n                product.name\n                    .toLowerCase()\n                    .includes(search)\n                ||\n                product.category\n                    .toLowerCase()\n                    .includes(search)\n            );\n\n    }\n\n\n    document.getElementById(\"products\").innerHTML =\n        filtered\n            .map(productCard)\n            .join(\"\");\n\n\n    document.getElementById(\"newProducts\").innerHTML =\n        PRODUCTS\n            .slice(0,8)\n            .map(productCard)\n            .join(\"\");\n\n}\n\n\n\/* =========================================================\n   FILTER\n========================================================= *\/\n\nfunction filterProducts(category,button){\n\n    currentCategory = category;\n\n    document\n        .querySelectorAll(\".filter\")\n        .forEach(btn =>\n            btn.classList.remove(\"active\")\n        );\n\n    if(button){\n        button.classList.add(\"active\");\n    }\n\n    renderProducts();\n\n    document\n        .getElementById(\"shop\")\n        .scrollIntoView({\n            behavior:\"smooth\"\n        });\n\n}\n\n\nfunction setCategory(category){\n\n    currentCategory = category;\n\n    document\n        .querySelectorAll(\".filter\")\n        .forEach(btn => {\n\n            btn.classList.toggle(\n                \"active\",\n                btn.textContent.trim() === category\n            );\n\n        });\n\n    renderProducts();\n\n}\n\n\n\/* =========================================================\n   SEARCH\n========================================================= *\/\n\nfunction openSearch(){\n\n    document\n        .getElementById(\"searchPanel\")\n        .classList.add(\"show\");\n\n    setTimeout(() => {\n\n        document\n            .getElementById(\"searchInput\")\n            .focus();\n\n    },100);\n\n}\n\n\nfunction closeSearch(){\n\n    document\n        .getElementById(\"searchPanel\")\n        .classList.remove(\"show\");\n\n}\n\n\nfunction searchProducts(){\n\n    renderProducts();\n\n}\n\n\n\/* =========================================================\n   WISHLIST\n========================================================= *\/\n\nfunction toggleWishlist(id){\n\n    if(wishlist.includes(id)){\n\n        wishlist =\n            wishlist.filter(\n                item => item !== id\n            );\n\n    }else{\n\n        wishlist.push(id);\n\n    }\n\n    localStorage.setItem(\n        \"dashyWishlist\",\n        JSON.stringify(wishlist)\n    );\n\n    renderProducts();\n\n}\n\n\n\/* =========================================================\n   CART\n========================================================= *\/\n\nfunction addToCart(id){\n\n    const product =\n        PRODUCTS.find(\n            p => p.id === id\n        );\n\n    const existing =\n        cart.find(\n            p => p.id === id\n        );\n\n\n    if(existing){\n\n        existing.qty++;\n\n    }else{\n\n        cart.push({\n            ...product,\n            qty:1\n        });\n\n    }\n\n\n    saveCart();\n\n    updateCart();\n\n    openCart();\n\n}\n\n\nfunction removeCart(id){\n\n    cart =\n        cart.filter(\n            p => p.id !== id\n        );\n\n    saveCart();\n\n    updateCart();\n\n}\n\n\nfunction saveCart(){\n\n    localStorage.setItem(\n        \"dashyCart\",\n        JSON.stringify(cart)\n    );\n\n}\n\n\nfunction updateCart(){\n\n    const count =\n        cart.reduce(\n            (sum,p) =>\n                sum + p.qty,\n            0\n        );\n\n\n    document\n        .getElementById(\"cartCount\")\n        .textContent = count;\n\n\n    const box =\n        document.getElementById(\"cartItems\");\n\n\n    if(!cart.length){\n\n        box.innerHTML = `\n\n            <div style=\"\n                text-align:center;\n                padding:80px 20px;\n                color:#777;\n                font-size:10px;\n            \">\n                Your bag is empty.\n            <\/div>\n\n        `;\n\n        document\n            .getElementById(\"total\")\n            .textContent =\n            \"KSh 0\";\n\n        return;\n\n    }\n\n\n    box.innerHTML =\n        cart.map(p => `\n\n            <div class=\"cart-item\">\n\n                <img decoding=\"async\"\n                    src=\"${p.image}\"\n                    alt=\"${p.name}\"\n                >\n\n                <div>\n\n                    <h4>\n                        ${p.name}\n                    <\/h4>\n\n                    <p>\n                        ${p.qty} \u00d7 ${money(p.price)}\n                    <\/p>\n\n                <\/div>\n\n                <button\n                    class=\"remove\"\n                    onclick=\"removeCart(${p.id})\"\n                >\n                    Remove\n                <\/button>\n\n            <\/div>\n\n        `).join(\"\");\n\n\n    const total =\n        cart.reduce(\n            (sum,p) =>\n                sum + p.price * p.qty,\n            0\n        );\n\n\n    document\n        .getElementById(\"total\")\n        .textContent =\n        money(total);\n\n}\n\n\nfunction openCart(){\n\n    document\n        .getElementById(\"cart\")\n        .classList.add(\"show\");\n\n    document\n        .getElementById(\"overlay\")\n        .classList.add(\"show\");\n\n}\n\n\nfunction closeCart(){\n\n    document\n        .getElementById(\"cart\")\n        .classList.remove(\"show\");\n\n    document\n        .getElementById(\"overlay\")\n        .classList.remove(\"show\");\n\n}\n\n\n\/* =========================================================\n   CHECKOUT\n========================================================= *\/\n\nfunction checkout(){\n\n    if(!cart.length){\n\n        alert(\"Your bag is empty.\");\n\n        return;\n\n    }\n\n\n    \/*\n       Replace with the client's real WhatsApp\n       number before launch.\n    *\/\n\n    const phone =\n        \"254700000000\";\n\n\n    let message =\n        \"Hello Dashy Selections \ud83d\udc4b%0A%0A\" +\n        \"I'd like to order:%0A%0A\";\n\n\n    cart.forEach(product => {\n\n        message +=\n            encodeURIComponent(\n                product.name +\n                \" \u00d7 \" +\n                product.qty +\n                \" \u2014 \" +\n                money(\n                    product.price *\n                    product.qty\n                )\n            )\n            +\n            \"%0A\";\n\n    });\n\n\n    const total =\n        cart.reduce(\n            (sum,p) =>\n                sum +\n                p.price *\n                p.qty,\n            0\n        );\n\n\n    message +=\n        \"%0ATotal: \" +\n        encodeURIComponent(\n            money(total)\n        ) +\n        \"%0A%0A\" +\n        \"Please confirm availability.\";\n\n\n    window.open(\n        `https:\/\/wa.me\/${phone}?text=${message}`,\n        \"_blank\"\n    );\n\n}\n\n\n\/* =========================================================\n   QUICK VIEW\n========================================================= *\/\n\nfunction openQuick(id){\n\n    const product =\n        PRODUCTS.find(\n            p => p.id === id\n        );\n\n    if(!product) return;\n\n\n    document\n        .getElementById(\"quickImage\")\n        .src = product.image;\n\n\n    document\n        .getElementById(\"quickImage\")\n        .alt = product.name;\n\n\n    document\n        .getElementById(\"quickCategory\")\n        .textContent =\n        product.category;\n\n\n    document\n        .getElementById(\"quickName\")\n        .textContent =\n        product.name;\n\n\n    document\n        .getElementById(\"quickPrice\")\n        .textContent =\n        money(product.price);\n\n\n    document\n        .getElementById(\"quickAdd\")\n        .onclick = function(){\n\n            addToCart(product.id);\n\n            closeQuick();\n\n        };\n\n\n    document\n        .getElementById(\"quick\")\n        .classList.add(\"show\");\n\n\n    document\n        .getElementById(\"overlay\")\n        .classList.add(\"show\");\n\n}\n\n\nfunction closeQuick(){\n\n    document\n        .getElementById(\"quick\")\n        .classList.remove(\"show\");\n\n    if(\n        !document\n            .getElementById(\"cart\")\n            .classList.contains(\"show\")\n    ){\n\n        document\n            .getElementById(\"overlay\")\n            .classList.remove(\"show\");\n\n    }\n\n}\n\n\n\/* =========================================================\n   CLOSE EVERYTHING\n========================================================= *\/\n\nfunction closeAll(){\n\n    closeCart();\n\n    closeQuick();\n\n    closeSearch();\n\n}\n\n\n\/* =========================================================\n   HERO SLIDER\n========================================================= *\/\n\nlet currentSlide = 0;\n\n\nfunction goSlide(index){\n\n    const slides =\n        document.querySelectorAll(\".slide\");\n\n    const dots =\n        document.querySelectorAll(\".dot\");\n\n\n    slides.forEach(\n        slide =>\n            slide.classList.remove(\"active\")\n    );\n\n\n    dots.forEach(\n        dot =>\n            dot.classList.remove(\"active\")\n    );\n\n\n    currentSlide = index;\n\n\n    slides[index]\n        .classList.add(\"active\");\n\n\n    dots[index]\n        .classList.add(\"active\");\n\n}\n\n\nsetInterval(() => {\n\n    currentSlide =\n        (currentSlide + 1) % 4;\n\n    goSlide(currentSlide);\n\n},5000);\n\n\n\/* =========================================================\n   SCROLL TO SHOP\n========================================================= *\/\n\nfunction scrollToShop(){\n\n    document\n        .getElementById(\"shop\")\n        .scrollIntoView({\n            behavior:\"smooth\"\n        });\n\n}\n\n\n\/* =========================================================\n   ESCAPE\n========================================================= *\/\n\ndocument.addEventListener(\n    \"keydown\",\n    event => {\n\n        if(event.key === \"Escape\"){\n\n            closeAll();\n\n        }\n\n    }\n);\n\n\n\/* =========================================================\n   INITIALISE\n========================================================= *\/\n\nrenderProducts();\n\nupdateCart();\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Dashy Selections | Jewelry, Watches &amp; Accessories Jewelry Watches Sunglasses Accessories Dubois Road \u00b7 Nairobi D Dashy SELECTIONS Shop Categories New In Visit Us \u2315 \u2661 \ud83d\udecd 0 Dashy Selections Timeless details. Jewelry, watches, sunglasses and fashion accessories. Shop now \u2192 New collection Made to shine. Find your next favourite detail. Explore \u2192 Dashy edit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank-slate","meta":{"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dashyselections.com\/index.php?rest_route=\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dashyselections.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dashyselections.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dashyselections.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dashyselections.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5"}],"version-history":[{"count":4,"href":"https:\/\/dashyselections.com\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/dashyselections.com\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/dashyselections.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}