{"id":17415,"date":"2026-09-27T15:20:41","date_gmt":"2026-09-27T15:20:41","guid":{"rendered":"https:\/\/driptechsolutions.com\/?page_id=17415"},"modified":"2026-10-05T09:38:29","modified_gmt":"2026-10-05T09:38:29","slug":"shop-2","status":"publish","type":"page","link":"https:\/\/driptechsolutions.com\/index.php\/shop-2\/","title":{"rendered":"Shop Custom"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"17415\" class=\"elementor elementor-17415\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b7ddd73 e-flex e-con-boxed e-con e-parent\" data-id=\"b7ddd73\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-02b036e elementor-widget elementor-widget-html\" data-id=\"02b036e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\nFINAL CUSTOM WOOCOMMERCE PRODUCT ARCHIVE\nFor Elementor HTML Widget\n\nRequires:\nCustom WooCommerce Archive Backend PHP snippet\n========================================================= -->\n\n<div id=\"cwa-shop\" class=\"cwa-shop\">\n\n    <!-- =============================\n         HEADER\n    ============================== -->\n\n    <div class=\"cwa-header\">\n\n        <h1 id=\"cwa-title\">\n            Our Products\n        <\/h1>\n\n        <p>\n            Browse our selection of quality laptops, desktops, and components\n        <\/p>\n\n    <\/div>\n\n\n    <!-- =============================\n         SEARCH\n    ============================== -->\n\n    <div class=\"cwa-search-wrap\">\n\n        <span class=\"cwa-search-icon\">\n            &#128269;\n        <\/span>\n\n        <input\n            type=\"search\"\n            id=\"cwa-search\"\n            placeholder=\"Search products...\"\n            autocomplete=\"off\"\n        >\n\n    <\/div>\n\n\n    <!-- =============================\n         CATEGORY CAROUSEL\n    ============================== -->\n\n    <div class=\"cwa-category-wrapper\">\n\n        <button\n            type=\"button\"\n            class=\"cwa-arrow cwa-arrow-left\"\n            id=\"cwa-category-prev\"\n            aria-label=\"Previous categories\"\n        >\n            &#8249;\n        <\/button>\n\n\n        <div\n            class=\"cwa-categories\"\n            id=\"cwa-categories\"\n        >\n            <!-- WooCommerce parent categories load here -->\n        <\/div>\n\n\n        <button\n            type=\"button\"\n            class=\"cwa-arrow cwa-arrow-right\"\n            id=\"cwa-category-next\"\n            aria-label=\"Next categories\"\n        >\n            &#8250;\n        <\/button>\n\n    <\/div>\n\n\n    <!-- =============================\n         FILTERS\n    ============================== -->\n\n    <div class=\"cwa-filters\">\n\n        <select id=\"cwa-category-filter\">\n\n            <option value=\"\">\n                All categories\n            <\/option>\n\n        <\/select>\n\n\n        <select id=\"cwa-condition-filter\">\n\n            <option value=\"\">\n                All conditions\n            <\/option>\n\n        <\/select>\n\n\n        <select id=\"cwa-tag-filter\">\n\n            <option value=\"\">\n                All tags\n            <\/option>\n\n        <\/select>\n\n\n        <select id=\"cwa-sort-filter\">\n\n            <option value=\"newest\">\n                Newest\n            <\/option>\n\n            <option value=\"oldest\">\n                Oldest\n            <\/option>\n\n            <option value=\"price_low\">\n                Price Low to High\n            <\/option>\n\n            <option value=\"price_high\">\n                Price High to Low\n            <\/option>\n\n            <option value=\"popular\">\n                Popularity\n            <\/option>\n\n            <option value=\"rating\">\n                Average Rating\n            <\/option>\n\n            <option value=\"name\">\n                Name A to Z\n            <\/option>\n\n        <\/select>\n\n    <\/div>\n\n\n    <!-- =============================\n         PRODUCTS\n    ============================== -->\n\n    <div\n        id=\"cwa-results-wrapper\"\n        class=\"cwa-results-wrapper\"\n    >\n\n        <div class=\"cwa-loader\"><\/div>\n\n        <div id=\"cwa-results\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\nBASE\n========================================================= *\/\n\n#cwa-shop,\n#cwa-shop * {\n    box-sizing: border-box;\n}\n\n#cwa-shop {\n\n    --cwa-blue: #08A4B8;\n    --cwa-blue-dark: #078C9D;\n\n    --cwa-orange: #F97316;\n    --cwa-orange-dark: #EA580C;\n\n    --cwa-text: ##000000;\n    --cwa-muted: #667085;\n    --cwa-border: #D9E2E8;\n\n    width: 100%;\n    max-width: 1450px;\n\n    margin: 0 auto;\n\n    padding: 45px 20px 70px;\n\n    font-family: inherit;\n}\n\n\n\/* =========================================================\nHEADER\n========================================================= *\/\n\n.cwa-header {\n\n    text-align: center;\n\n    margin-bottom: 28px;\n}\n\n.cwa-header h1 {\n\n    margin: 0 0 10px;\n\n    font-size: 38px;\n    line-height: 1.2;\n\n    font-weight: 800;\n\n    color: #111111;\n}\n\n.cwa-header p {\n\n    margin: 0;\n\n    font-size: 16px;\n    line-height: 1.6;\n\n    color: var(--cwa-muted);\n}\n\n\n\/* =========================================================\nSEARCH\n========================================================= *\/\n\n.cwa-search-wrap {\n\n    position: relative;\n\n    width: 100%;\n    max-width: 680px;\n\n    margin: 28px auto 40px;\n}\n\n.cwa-search-icon {\n\n    position: absolute;\n\n    left: 19px;\n    top: 50%;\n\n    transform: translateY(-50%);\n\n    font-size: 17px;\n\n    color: #596579;\n\n    z-index: 2;\n\n    pointer-events: none;\n}\n\n#cwa-search {\n\n    width: 100%;\n    height: 50px;\n\n    padding: 0 20px 0 50px;\n\n    border: 1px solid var(--cwa-border);\n    border-radius: 30px;\n\n    background: #FFFFFF;\n\n    outline: none;\n\n    font-family: inherit;\n    font-size: 14px;\n\n    color: #222222;\n\n    box-shadow:\n        0 2px 5px rgba(0,0,0,.03);\n\n    transition: .2s ease;\n}\n\n#cwa-search:focus {\n\n    border-color: var(--cwa-blue);\n\n    box-shadow:\n        0 0 0 3px rgba(8,164,184,.10);\n}\n\n\n\/* =========================================================\nCATEGORY WRAPPER\n========================================================= *\/\n\n.cwa-category-wrapper {\n\n    position: relative;\n\n    width: 100%;\n\n    margin-bottom: 34px;\n}\n\n.cwa-categories {\n\n    display: flex;\n    align-items: stretch;\n    justify-content: center;\n\n    gap: 12px;\n\n    width: 100%;\n\n    padding: 4px 3px 12px;\n\n    overflow-x: auto;\n\n    scrollbar-width: none;\n\n    scroll-behavior: smooth;\n}\n\n.cwa-categories::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Slider mode: enabled only when WooCommerce category count exceeds 8 *\/\n.cwa-category-wrapper.cwa-slider-active {\n    padding-left: 52px;\n    padding-right: 52px;\n}\n\n.cwa-category-wrapper.cwa-slider-active .cwa-categories {\n    justify-content: flex-start;\n}\n\n\n\/* =========================================================\nCATEGORY CARD\n\nNORMAL:\nWhite background\nBlack text\n\nSELECTED:\nBlue background\nWhite text\n========================================================= *\/\n\n.cwa-category-card {\n\n    appearance: none;\n    -webkit-appearance: none;\n\n    flex: 0 0 112px;\n\n    min-width: 112px;\n    height: 90px;\n\n    padding: 10px 8px;\n\n    border: 1px solid var(--cwa-border);\n    border-radius: 10px;\n\n    background: #FFFFFF;\n    color: #222222;\n\n    display: flex;\n    flex-direction: column;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 7px;\n\n    cursor: pointer;\n\n    font-family: inherit;\n\n    font-size: 13px;\n    font-weight: 600;\n\n    text-align: center;\n\n    box-shadow: none;\n\n    transition:\n        border-color .2s ease,\n        background-color .2s ease,\n        color .2s ease,\n        box-shadow .2s ease,\n        transform .2s ease;\n}\n\n\n\/* Normal text *\/\n\n.cwa-category-card .cwa-category-name {\n\n    color: #FFFFFFF:\n}\n\n\n\/* Subtle hover *\/\n\n.cwa-category-card:hover {\n\n    border-color: var(--cwa-blue);\n\n    transform: translateY(-1px);\n\n    box-shadow:\n        0 4px 10px rgba(0,0,0,.06);\n}\n\n\n\/* Selected category *\/\n\n.cwa-category-card.active {\n\n    background: var(--cwa-blue);\n\n    color: #FFFFFF;\n\n    border-color: var(--cwa-blue);\n\n    box-shadow:\n        0 5px 14px rgba(8,164,184,.22);\n}\n\n.cwa-category-card.active .cwa-category-name {\n\n    color: #FFFFFF;\n}\n\n\n\/* =========================================================\nWOOCOMMERCE CATEGORY IMAGE\n========================================================= *\/\n\n.cwa-category-image {\n\n    width: 34px;\n    height: 34px;\n\n    flex: 0 0 34px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    overflow: hidden;\n}\n\n.cwa-category-image img {\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: contain;\n\n    transition: transform .2s ease;\n}\n\n.cwa-category-card:hover\n.cwa-category-image img {\n\n    transform: scale(1.05);\n}\n\n\n\/* Fallback if Woo category has no thumbnail *\/\n\n.cwa-category-placeholder {\n\n    font-size: 25px;\n\n    line-height: 1;\n\n    color: ##000000;\n}\n\n.cwa-category-card.active\n.cwa-category-placeholder {\n\n    color: #FFFFFF;\n}\n\n\n\/* =========================================================\nCATEGORY NAME\n========================================================= *\/\n\n.cwa-category-name {\n\n    width: 100%;\n\n    line-height: 1.2;\n\n    overflow-wrap: break-word;\n}\n\n\n\/* =========================================================\nCATEGORY ARROWS\n========================================================= *\/\n\n.cwa-arrow {\n\n    appearance: none;\n    -webkit-appearance: none;\n\n    position: absolute;\n\n    top: 45px;\n\n    transform: translateY(-50%);\n\n    width: 38px;\n    height: 38px;\n\n    padding: 0;\n\n    z-index: 20;\n\n    border: 1px solid var(--cwa-border);\n    border-radius: 50%;\n\n    background: #FFFFFF;\n    color: #344054;\n\n    display: none;\n\n    align-items: center;\n    justify-content: center;\n\n    cursor: pointer;\n\n    font-size: 25px;\n    line-height: 1;\n\n    box-shadow:\n        0 2px 8px rgba(0,0,0,.08);\n\n    transition:\n        background-color .2s ease,\n        border-color .2s ease,\n        color .2s ease,\n        opacity .2s ease;\n}\n\n.cwa-category-wrapper.cwa-slider-active .cwa-arrow {\n    display: flex;\n}\n\n.cwa-arrow:hover:not(:disabled) {\n\n    background: var(--cwa-blue);\n\n    color: #FFFFFF;\n\n    border-color: var(--cwa-blue);\n}\n\n.cwa-arrow:disabled {\n    opacity: .30;\n    cursor: default;\n    pointer-events: none;\n}\n\n.cwa-arrow-left {\n    left: 4px;\n}\n\n.cwa-arrow-right {\n    right: 4px;\n}\n\n\n\/* =========================================================\nFILTER BAR\n========================================================= *\/\n\n.cwa-filters {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(4, minmax(0,1fr));\n\n    gap: 18px;\n\n    width: 100%;\n    max-width: 1050px;\n\n    margin: 0 auto 34px;\n}\n\n.cwa-filters select {\n\n    width: 100%;\n    height: 44px;\n\n    padding: 0 38px 0 14px;\n\n    border: 1px solid var(--cwa-border);\n    border-radius: 10px;\n\n    background-color: #FFFFFF;\n\n    color: #111827;\n\n    outline: none;\n\n    font-family: inherit;\n    font-size: 14px;\n\n    cursor: pointer;\n\n    transition: .2s ease;\n}\n\n.cwa-filters select:focus {\n\n    border-color: var(--cwa-blue);\n}\n\n\n\/* =========================================================\nRESULTS\n========================================================= *\/\n\n.cwa-results-wrapper {\n\n    position: relative;\n\n    width: 100%;\n\n    min-height: 250px;\n}\n\n\n\/* =========================================================\nPRODUCT GRID\n\nDesktop:\n4 columns\n========================================================= *\/\n\n.custom-products-grid {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(4, minmax(0,1fr));\n\n    gap: 24px;\n}\n\n\n\/* =========================================================\nPRODUCT CARD\n========================================================= *\/\n\n.custom-product-card {\n\n    position: relative;\n\n    min-width: 0;\n\n    overflow: hidden;\n\n    background: #FFFFFF;\n\n    border: 1px solid #E9EEF2;\n    border-radius: 14px;\n\n    box-shadow:\n        0 4px 18px rgba(0,0,0,.045);\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease;\n}\n\n.custom-product-card:hover {\n\n    transform: translateY(-4px);\n\n    box-shadow:\n        0 10px 28px rgba(0,0,0,.085);\n}\n\n\n\/* =========================================================\nBADGES\n========================================================= *\/\n\n.custom-product-badges {\n\n    position: absolute;\n\n    top: 12px;\n    left: 12px;\n    right: 12px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: space-between;\n\n    gap: 8px;\n\n    z-index: 10;\n\n    pointer-events: none;\n}\n\n.custom-stock-badge,\n.custom-condition-badge {\n\n    min-height: 23px;\n\n    padding: 4px 10px;\n\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 30px;\n\n    font-size: 11px;\n    line-height: 1;\n\n    font-weight: 700;\n}\n\n\n\/* In stock *\/\n\n.custom-stock-badge.stock-in {\n\n    background:#D30000;\n\n    color: #FFFFFF;\n}\n\n\n\/* Limited stock *\/\n\n.custom-stock-badge.stock-limited {\n\n    background: #FFA100;\n\n    color: #FFFFFF;\n}\n\n\n\/* Out of stock *\/\n\n.custom-stock-badge.stock-out {\n\n    background:#FF0000;\n\n    color: #FFFFFF;\n}\n\n\n\/* Condition *\/\n\n.custom-condition-badge {\n\n    margin-left: auto;\n\n    background: #EEF4FF;\n\n    color: #175CD3;\n\n    border: 1px solid #B2CCFF;\n}\n\n\n\/* =========================================================\nPRODUCT IMAGE\n========================================================= *\/\n\n.custom-product-image {\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n    height: 240px;\n\n    overflow: hidden;\n\n    padding: 22px;\n\n    background: #F7F9FA;\n\n    text-decoration: none;\n}\n\n.custom-product-image img {\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: contain;\n\n    margin: 0;\n\n    transition:\n        transform .3s ease;\n}\n\n.custom-product-card:hover\n.custom-product-image img {\n\n    transform: scale(1.035);\n}\n\n\n\/* =========================================================\nPRODUCT CONTENT\n========================================================= *\/\n\n.custom-product-content {\n\n    padding: 18px;\n}\n\n\n\/* Category *\/\n\n.custom-product-category {\n\n    margin-bottom: 7px;\n\n    font-size: 11px;\n    line-height: 1.4;\n\n    color: #98A2B3;\n}\n\n.custom-product-category a {\n\n    color: inherit;\n\n    text-decoration: none;\n}\n\n\n\/* Title *\/\n\n.custom-product-title {\n    \n     display: flex;\n\n    align-items: left;\n    justify-content: left;\n\n    width: 100%;\n    height: 150px;\n\n    overflow: hidden;\n\n    padding: 22px;\n\n    \n\n    text-decoration: none;\n\n    min-height: 4px;\n\n    margin:9 0 9px;\n\n    \n    line-height: 1.45;\n\n    font-weight: 700;\n}\n\n.custom-product-title a {\n    font-size:18px;\n    color: #101828;\n\n    text-decoration: none;\n}\n\n.custom-product-title a:hover {\n    \n    color: var(--cwa-blue);\n}\n\n\n\/* Price *\/\n\n.custom-product-price {\n\n    margin-bottom: 15px;\n\n    font-size: 16px;\n    line-height: 1.3;\n\n    font-weight: 800;\n\n    color: #101828;\n}\n\n.custom-product-price del {\n\n    margin-right: 5px;\n\n    font-size: 13px;\n    font-weight: 400;\n\n    color: #98A2B3;\n}\n\n.custom-product-price ins {\n\n    text-decoration: none;\n}\n\n\n\/* =========================================================\nPRODUCT ACTION BUTTONS\n========================================================= *\/\n\n.custom-product-actions {\n\n    display: grid;\n\n    grid-template-columns:\n        minmax(0,1fr)\n        minmax(0,1fr);\n\n    gap: 8px;\n\n    width: 100%;\n}\n\n\n\/* Add to cart *\/\n\n.custom-add-cart,\n.custom-product-actions .button {\n\n    width: 100% !important;\n    min-height: 42px !important;\n\n    margin: 0 !important;\n\n    padding: 8px 8px !important;\n\n    border: 1px solid var(--cwa-orange) !important;\n    border-radius: 8px !important;\n\n    background: #FFFFFF !important;\n\n    color: #111111 !important;\n\n    display: flex !important;\n\n    align-items: center !important;\n    justify-content: center !important;\n\n    text-align: center !important;\n\n    text-decoration: none !important;\n\n    font-family: inherit !important;\n\n    font-size: 12px !important;\n    line-height: 1.2 !important;\n\n    font-weight: 700 !important;\n\n    box-shadow: none !important;\n\n    transition: .2s ease !important;\n}\n\n.custom-add-cart:hover,\n.custom-product-actions .button:hover {\n\n    background: var(--cwa-orange-dark) !important;\n\n    border-color: var(--cwa-orange-dark) !important;\n\n    color: #FFFFFF !important;\n}\n\n\n\/* View Details *\/\n\n.custom-view-details {\n\n    width: 100%;\n    min-height: 42px;\n\n    padding: 8px;\n\n    border: 1px solid var(--cwa-blue);\n    border-radius: 8px;\n\n    background: #FFFFFF;\n\n    color: #111111;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    text-align: center;\n\n    text-decoration: none;\n\n    font-family: inherit;\n\n    font-size: 12px;\n    line-height: 1.2;\n\n    font-weight: 700;\n\n    transition: .2s ease;\n}\n\n.custom-view-details:hover {\n\n    background: var(--cwa-blue);\n\n    border-color: var(--cwa-blue);\n\n    color: #FFFFFF !important;\n}\n\n\n\/* =========================================================\nPAGINATION\n========================================================= *\/\n\n.custom-pagination {\n\n    display: flex;\n\n    flex-wrap: wrap;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 8px;\n\n    margin-top: 38px;\n}\n\n.custom-page-btn {\n\n    min-width: 40px;\n    height: 40px;\n\n    padding: 0 12px;\n\n    border: 1px solid var(--cwa-border);\n    border-radius: 8px;\n\n    background: #FFFFFF;\n\n    color: #344054;\n\n    font-family: inherit;\n    font-size: 13px;\n\n    font-weight: 600;\n\n    cursor: pointer;\n\n    transition: .2s ease;\n}\n\n.custom-page-btn:hover,\n.custom-page-btn.active {\n\n    background: var(--cwa-blue);\n\n    border-color: var(--cwa-blue);\n\n    color: #FFFFFF;\n}\n\n\n\/* =========================================================\nNO PRODUCTS\n========================================================= *\/\n\n.custom-no-products {\n\n    padding: 65px 25px;\n\n    text-align: center;\n\n    border: 1px dashed var(--cwa-border);\n    border-radius: 14px;\n\n    background: #FAFCFC;\n}\n\n.custom-no-products h3 {\n\n    margin: 0 0 8px;\n\n    font-size: 22px;\n}\n\n.custom-no-products p {\n\n    margin: 0;\n\n    color: var(--cwa-muted);\n}\n\n\n\/* =========================================================\nLOADING\n========================================================= *\/\n\n.cwa-results-wrapper.cwa-loading {\n\n    min-height: 300px;\n}\n\n.cwa-results-wrapper.cwa-loading\n#cwa-results {\n\n    opacity: .35;\n\n    pointer-events: none;\n}\n\n.cwa-loader {\n\n    display: none;\n\n    position: absolute;\n\n    top: 90px;\n    left: 50%;\n\n    z-index: 100;\n\n    width: 42px;\n    height: 42px;\n\n    margin-left: -21px;\n\n    border: 4px solid #E5EBEE;\n\n    border-top-color: var(--cwa-blue);\n\n    border-radius: 50%;\n\n    animation:\n        cwaSpin .7s linear infinite;\n}\n\n.cwa-results-wrapper.cwa-loading\n.cwa-loader {\n\n    display: block;\n}\n\n@keyframes cwaSpin {\n\n    to {\n        transform: rotate(360deg);\n    }\n\n}\n\n\n\/* =========================================================\nSMALL DESKTOP\n3 COLUMNS\n========================================================= *\/\n\n@media (max-width: 1200px) {\n\n    .custom-products-grid {\n\n        grid-template-columns:\n            repeat(3, minmax(0,1fr));\n\n        gap: 22px;\n    }\n\n    .custom-product-image {\n\n        height: 245px;\n    }\n\n}\n\n\n\/* =========================================================\nTABLET\n2 COLUMNS\n========================================================= *\/\n\n@media (max-width: 1024px) {\n\n    #cwa-shop {\n\n        padding:\n            35px 18px 55px;\n    }\n\n\n    .cwa-header h1 {\n\n        font-size: 34px;\n    }\n\n\n    .cwa-header p {\n\n        font-size: 15px;\n    }\n\n\n    .cwa-search-wrap {\n\n        max-width: 620px;\n\n        margin:\n            24px auto 30px;\n    }\n\n\n    .cwa-categories {\n\n        gap: 10px;\n    }\n\n\n    .cwa-category-card {\n\n        flex: 0 0 108px;\n\n        min-width: 108px;\n\n        height: 86px;\n    }\n\n\n    .cwa-category-image {\n\n        width: 32px;\n        height: 32px;\n\n        flex-basis: 32px;\n    }\n\n\n    .cwa-filters {\n\n        grid-template-columns:\n            repeat(2, minmax(0,1fr));\n\n        gap: 12px;\n\n        max-width: 100%;\n    }\n\n\n    .custom-products-grid {\n\n        grid-template-columns:\n            repeat(2, minmax(0,1fr));\n\n        gap: 20px;\n    }\n\n\n    .custom-product-image {\n\n        height: 260px;\n    }\n\n\n    .custom-product-actions {\n\n        grid-template-columns:\n            1fr 1fr;\n    }\n\n}\n\n\n\/* =========================================================\nMOBILE\n1 COLUMN\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n    #cwa-shop {\n\n        padding:\n            28px 12px 45px;\n    }\n\n\n    \/* Header *\/\n\n    .cwa-header {\n\n        margin-bottom: 20px;\n    }\n\n    .cwa-header h1 {\n\n        font-size: 28px;\n\n        margin-bottom: 8px;\n    }\n\n    .cwa-header p {\n\n        font-size: 14px;\n\n        line-height: 1.5;\n    }\n\n\n    \/* Search *\/\n\n    .cwa-search-wrap {\n\n        margin:\n            20px auto 24px;\n    }\n\n    #cwa-search {\n\n        height: 46px;\n\n        font-size: 14px;\n\n        padding-left: 46px;\n    }\n\n    .cwa-search-icon {\n\n        left: 16px;\n    }\n\n\n    \/* Categories *\/\n\n    .cwa-category-wrapper {\n\n        margin-bottom: 24px;\n    }\n\n    .cwa-categories {\n\n        gap: 9px;\n\n        padding:\n            3px 1px 9px;\n\n        scroll-snap-type:\n            x proximity;\n\n        -webkit-overflow-scrolling:\n            touch;\n    }\n\n    .cwa-category-card {\n\n        flex: 0 0 96px;\n\n        min-width: 96px;\n\n        height: 78px;\n\n        padding: 7px 5px;\n\n        border-radius: 10px;\n\n        font-size: 12px;\n\n        scroll-snap-align: start;\n    }\n\n    .cwa-category-image {\n\n        width: 30px;\n        height: 30px;\n\n        flex-basis: 30px;\n    }\n\n    .cwa-category-placeholder {\n\n        font-size: 21px;\n    }\n\n    .cwa-arrow {\n\n        display: none !important;\n    }\n\n    .cwa-category-wrapper.cwa-slider-active {\n\n        padding-left: 0;\n        padding-right: 0;\n    }\n\n    .cwa-category-wrapper.cwa-slider-active .cwa-categories {\n\n        justify-content: flex-start;\n    }\n\n\n    \/* Filters *\/\n\n    .cwa-filters {\n\n        grid-template-columns:\n            1fr;\n\n        gap: 10px;\n\n        margin-bottom: 22px;\n    }\n\n    .cwa-filters select {\n\n        height: 46px;\n\n        font-size: 14px;\n    }\n\n\n    \/* Products *\/\n\n    .custom-products-grid {\n\n        grid-template-columns:\n            1fr;\n\n        gap: 18px;\n    }\n\n    .custom-product-image {\n\n        height: 270px;\n\n        padding: 24px;\n    }\n\n    .custom-product-title {\n\n        min-height: auto;\n\n        font-size: 16px;\n    }\n\n    .custom-product-price {\n\n        font-size: 20px;\n    }\n\n\n    \/* Buttons *\/\n\n    .custom-product-actions {\n\n        grid-template-columns:\n            1fr 1fr;\n\n        gap: 8px;\n    }\n\n    .custom-add-cart,\n    .custom-product-actions .button,\n    .custom-view-details {\n\n        min-height: 44px !important;\n    }\n\n\n    \/* Badges *\/\n\n    .custom-stock-badge,\n    .custom-condition-badge {\n\n        font-size: 10px;\n\n        padding: 4px 9px;\n    }\n\n}\n\n\n\/* =========================================================\nVERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n    #cwa-shop {\n\n        padding-left: 10px;\n        padding-right: 10px;\n    }\n\n\n    .cwa-header h1 {\n\n        font-size: 25px;\n    }\n\n\n    .cwa-category-card {\n\n        flex: 0 0 90px;\n\n        min-width: 90px;\n\n        height: 74px;\n    }\n\n\n    .cwa-category-image {\n\n        width: 28px;\n        height: 28px;\n\n        flex-basis: 28px;\n    }\n\n\n    .custom-product-image {\n\n        height: 235px;\n    }\n\n\n    .custom-product-actions {\n\n        grid-template-columns:\n            1fr;\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       AJAX URL\n    ===================================================== *\/\n\n    const AJAX_URL =\n        window.location.origin +\n        \"\/wp-admin\/admin-ajax.php\";\n\n\n    \/* =====================================================\n       ELEMENTS\n    ===================================================== *\/\n\n    const shop =\n        document.getElementById(\n            \"cwa-shop\"\n        );\n\n\n    if (!shop) {\n        return;\n    }\n\n\n    const title =\n        document.getElementById(\n            \"cwa-title\"\n        );\n\n\n    const searchInput =\n        document.getElementById(\n            \"cwa-search\"\n        );\n\n\n    const categoryContainer =\n        document.getElementById(\n            \"cwa-categories\"\n        );\n\n\n    const categoryWrapper =\n        shop.querySelector(\n            \".cwa-category-wrapper\"\n        );\n\n\n    const categoryFilter =\n        document.getElementById(\n            \"cwa-category-filter\"\n        );\n\n\n    const conditionFilter =\n        document.getElementById(\n            \"cwa-condition-filter\"\n        );\n\n\n    const tagFilter =\n        document.getElementById(\n            \"cwa-tag-filter\"\n        );\n\n\n    const sortFilter =\n        document.getElementById(\n            \"cwa-sort-filter\"\n        );\n\n\n    const results =\n        document.getElementById(\n            \"cwa-results\"\n        );\n\n\n    const resultsWrapper =\n        document.getElementById(\n            \"cwa-results-wrapper\"\n        );\n\n\n    const prevButton =\n        document.getElementById(\n            \"cwa-category-prev\"\n        );\n\n\n    const nextButton =\n        document.getElementById(\n            \"cwa-category-next\"\n        );\n\n\n    \/* =====================================================\n       STATE\n    ===================================================== *\/\n\n    let selectedCategory = \"\";\n\n    let searchTimer = null;\n\n    let productController = null;\n\n\n    \/* =====================================================\n       SAFE HTML\n    ===================================================== *\/\n\n    function escapeHTML(value) {\n\n        const div =\n            document.createElement(\n                \"div\"\n            );\n\n        div.textContent =\n            value || \"\";\n\n        return div.innerHTML;\n\n    }\n\n\n    \/* =====================================================\n       LOAD WOOCOMMERCE FILTER DATA\n    ===================================================== *\/\n\n    async function loadFilters() {\n\n        const formData =\n            new FormData();\n\n\n        formData.append(\n            \"action\",\n            \"custom_shop_filters\"\n        );\n\n\n        try {\n\n            const response =\n                await fetch(\n                    AJAX_URL,\n                    {\n                        method: \"POST\",\n\n                        body: formData,\n\n                        credentials:\n                            \"same-origin\"\n                    }\n                );\n\n\n            if (!response.ok) {\n\n                throw new Error(\n                    \"Filter request failed.\"\n                );\n\n            }\n\n\n            const data =\n                await response.json();\n\n\n            if (\n                !data ||\n                !data.success ||\n                !data.data\n            ) {\n\n                throw new Error(\n                    \"Invalid filter response.\"\n                );\n\n            }\n\n\n            buildCategories(\n                data.data.categories || []\n            );\n\n\n            buildConditions(\n                data.data.conditions || []\n            );\n\n\n            buildTags(\n                data.data.tags || []\n            );\n\n\n        } catch (error) {\n\n            console.error(\n                \"WooCommerce filter error:\",\n                error\n            );\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       CATEGORY SLIDER MANAGEMENT\n    ===================================================== *\/\n\n    function updateCategorySlider(categories) {\n\n        \/*\n         * Count WooCommerce parent categories only.\n         * The separate \"All\" card is not included.\n         *\/\n        const sliderRequired =\n            categories.length > 8;\n\n\n        categoryWrapper.classList.toggle(\n            \"cwa-slider-active\",\n            sliderRequired\n        );\n\n\n        if (!sliderRequired) {\n\n            categoryContainer.scrollLeft = 0;\n\n            prevButton.disabled = true;\n            nextButton.disabled = true;\n\n            return;\n        }\n\n\n        requestAnimationFrame(\n            updateCategoryArrowState\n        );\n    }\n\n\n    function updateCategoryArrowState() {\n\n        if (\n            !categoryWrapper.classList.contains(\n                \"cwa-slider-active\"\n            )\n        ) {\n            return;\n        }\n\n\n        const maximumScroll =\n            categoryContainer.scrollWidth -\n            categoryContainer.clientWidth;\n\n\n        prevButton.disabled =\n            categoryContainer.scrollLeft <= 2;\n\n\n        nextButton.disabled =\n            categoryContainer.scrollLeft >=\n            maximumScroll - 2;\n    }\n\n\n    function getCategoryScrollDistance() {\n\n        const firstCard =\n            categoryContainer.querySelector(\n                \".cwa-category-card\"\n            );\n\n\n        if (!firstCard) {\n            return 400;\n        }\n\n\n        const cardWidth =\n            firstCard.getBoundingClientRect().width;\n\n\n        const containerStyles =\n            window.getComputedStyle(\n                categoryContainer\n            );\n\n\n        const gap =\n            parseFloat(\n                containerStyles.columnGap\n            ) || 12;\n\n\n        return (cardWidth + gap) * 4;\n    }\n\n\n    \/* =====================================================\n       BUILD CATEGORY CARDS\n\n       PHP returns PARENT WooCommerce\n       categories only.\n\n       category.image =\n       WooCommerce category thumbnail.\n    ===================================================== *\/\n\n    function buildCategories(categories) {\n\n\n        categoryContainer.innerHTML = \"\";\n\n\n        categoryFilter.innerHTML =\n            '<option value=\"\">All categories<\/option>';\n\n\n\n        \/* -----------------------------------------\n           ALL PRODUCTS\n        ----------------------------------------- *\/\n\n\n        const allCard =\n            document.createElement(\n                \"button\"\n            );\n\n\n        allCard.type =\n            \"button\";\n\n\n        allCard.className =\n            \"cwa-category-card active\";\n\n\n        allCard.dataset.category =\n            \"\";\n\n\n        allCard.dataset.name =\n            \"Our Products\";\n\n\n        allCard.innerHTML = `\n\n            <span\n                class=\"\n                    cwa-category-image\n                    cwa-category-placeholder\n                \"\n            >\n                &#128269;\n            <\/span>\n\n            <span\n                class=\"cwa-category-name\"\n            >\n                All\n            <\/span>\n\n        `;\n\n\n        categoryContainer.appendChild(\n            allCard\n        );\n\n\n\n        \/* -----------------------------------------\n           WOOCOMMERCE PARENT CATEGORIES\n        ----------------------------------------- *\/\n\n\n        categories.forEach(\n            function (category) {\n\n\n                const card =\n                    document.createElement(\n                        \"button\"\n                    );\n\n\n                card.type =\n                    \"button\";\n\n\n                card.className =\n                    \"cwa-category-card\";\n\n\n                card.dataset.category =\n                    category.slug || \"\";\n\n\n                card.dataset.name =\n                    category.name || \"\";\n\n\n\n                let categoryVisual = \"\";\n\n\n\n                \/* WooCommerce category thumbnail *\/\n\n                if (category.image) {\n\n\n                    categoryVisual = `\n\n                        <span\n                            class=\"cwa-category-image\"\n                        >\n\n                            <img decoding=\"async\"\n                                src=\"${escapeHTML(category.image)}\"\n                                alt=\"${escapeHTML(category.name)}\"\n                                loading=\"lazy\"\n                            >\n\n                        <\/span>\n\n                    `;\n\n\n                } else {\n\n\n                    \/* Fallback when category has no thumbnail *\/\n\n                    categoryVisual = `\n\n                        <span\n                            class=\"\n                                cwa-category-image\n                                cwa-category-placeholder\n                            \"\n                        >\n                            \u25eb\n                        <\/span>\n\n                    `;\n\n                }\n\n\n\n                card.innerHTML = `\n\n                    ${categoryVisual}\n\n                    <span\n                        class=\"cwa-category-name\"\n                    >\n                        ${escapeHTML(category.name)}\n                    <\/span>\n\n                `;\n\n\n\n                categoryContainer.appendChild(\n                    card\n                );\n\n\n\n                \/* Category dropdown *\/\n\n                const option =\n                    document.createElement(\n                        \"option\"\n                    );\n\n\n                option.value =\n                    category.slug;\n\n\n                option.textContent =\n                    category.name;\n\n\n                categoryFilter.appendChild(\n                    option\n                );\n\n            }\n        );\n\n\n        bindCategoryCards();\n\n        updateCategorySlider(categories);\n\n    }\n\n\n    \/* =====================================================\n       CONDITION FILTER\n    ===================================================== *\/\n\n    function buildConditions(conditions) {\n\n\n        conditionFilter.innerHTML =\n            '<option value=\"\">All conditions<\/option>';\n\n\n        conditions.forEach(\n            function (condition) {\n\n\n                const option =\n                    document.createElement(\n                        \"option\"\n                    );\n\n\n                option.value =\n                    condition.slug;\n\n\n                option.textContent =\n                    condition.name;\n\n\n                conditionFilter.appendChild(\n                    option\n                );\n\n            }\n        );\n\n    }\n\n\n    \/* =====================================================\n       TAG FILTER\n    ===================================================== *\/\n\n    function buildTags(tags) {\n\n\n        tagFilter.innerHTML =\n            '<option value=\"\">All tags<\/option>';\n\n\n        tags.forEach(\n            function (tag) {\n\n\n                const option =\n                    document.createElement(\n                        \"option\"\n                    );\n\n\n                option.value =\n                    tag.slug;\n\n\n                option.textContent =\n                    tag.name;\n\n\n                tagFilter.appendChild(\n                    option\n                );\n\n            }\n        );\n\n    }\n\n\n    \/* =====================================================\n       CATEGORY BUTTON EVENTS\n    ===================================================== *\/\n\n    function bindCategoryCards() {\n\n\n        const cards =\n            categoryContainer.querySelectorAll(\n                \".cwa-category-card\"\n            );\n\n\n        cards.forEach(\n            function (card) {\n\n\n                card.addEventListener(\n                    \"click\",\n                    function (event) {\n\n\n                        event.preventDefault();\n\n\n                        cards.forEach(\n                            function (item) {\n\n                                item.classList.remove(\n                                    \"active\"\n                                );\n\n                            }\n                        );\n\n\n                        card.classList.add(\n                            \"active\"\n                        );\n\n\n                        selectedCategory =\n                            card.dataset.category || \"\";\n\n\n                        categoryFilter.value =\n                            selectedCategory;\n\n\n                        title.textContent =\n                            card.dataset.name ||\n                            \"Our Products\";\n\n\n                        loadProducts(1);\n\n                    }\n                );\n\n            }\n        );\n\n    }\n\n\n    \/* =====================================================\n       CATEGORY DROPDOWN\n    ===================================================== *\/\n\n    categoryFilter.addEventListener(\n        \"change\",\n        function () {\n\n\n            selectedCategory =\n                this.value;\n\n\n            if (!selectedCategory) {\n\n\n                title.textContent =\n                    \"Our Products\";\n\n\n            } else {\n\n\n                title.textContent =\n                    this.options[\n                        this.selectedIndex\n                    ].text;\n\n            }\n\n\n\n            const cards =\n                categoryContainer.querySelectorAll(\n                    \".cwa-category-card\"\n                );\n\n\n            cards.forEach(\n                function (card) {\n\n\n                    const category =\n                        card.dataset.category || \"\";\n\n\n                    if (\n                        category ===\n                        selectedCategory\n                    ) {\n\n\n                        card.classList.add(\n                            \"active\"\n                        );\n\n\n                        card.scrollIntoView({\n                            behavior: \"smooth\",\n                            block: \"nearest\",\n                            inline: \"center\"\n                        });\n\n\n                    } else {\n\n\n                        card.classList.remove(\n                            \"active\"\n                        );\n\n                    }\n\n                }\n            );\n\n\n            loadProducts(1);\n\n        }\n    );\n\n\n    \/* =====================================================\n       CONDITION\n    ===================================================== *\/\n\n    conditionFilter.addEventListener(\n        \"change\",\n        function () {\n\n            loadProducts(1);\n\n        }\n    );\n\n\n    \/* =====================================================\n       TAG\n    ===================================================== *\/\n\n    tagFilter.addEventListener(\n        \"change\",\n        function () {\n\n            loadProducts(1);\n\n        }\n    );\n\n\n    \/* =====================================================\n       SORT\n    ===================================================== *\/\n\n    sortFilter.addEventListener(\n        \"change\",\n        function () {\n\n            loadProducts(1);\n\n        }\n    );\n\n\n    \/* =====================================================\n       SEARCH\n    ===================================================== *\/\n\n    searchInput.addEventListener(\n        \"input\",\n        function () {\n\n\n            clearTimeout(\n                searchTimer\n            );\n\n\n            searchTimer =\n                setTimeout(\n                    function () {\n\n                        loadProducts(1);\n\n                    },\n                    450\n                );\n\n        }\n    );\n\n\n    \/* =====================================================\n       CATEGORY SLIDER\n    ===================================================== *\/\n\n    prevButton.addEventListener(\n        \"click\",\n        function (event) {\n\n\n            event.preventDefault();\n\n\n            categoryContainer.scrollBy({\n                left: -getCategoryScrollDistance(),\n                behavior: \"smooth\"\n            });\n\n        }\n    );\n\n\n    nextButton.addEventListener(\n        \"click\",\n        function (event) {\n\n\n            event.preventDefault();\n\n\n            categoryContainer.scrollBy({\n                left: getCategoryScrollDistance(),\n                behavior: \"smooth\"\n            });\n\n        }\n    );\n\n\n    categoryContainer.addEventListener(\n        \"scroll\",\n        function () {\n\n            requestAnimationFrame(\n                updateCategoryArrowState\n            );\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n    window.addEventListener(\n        \"resize\",\n        function () {\n\n            requestAnimationFrame(\n                updateCategoryArrowState\n            );\n\n        }\n    );\n\n\n    \/* =====================================================\n       LOAD PRODUCTS\n    ===================================================== *\/\n\n    async function loadProducts(page = 1) {\n\n\n        if (productController) {\n\n            productController.abort();\n\n        }\n\n\n        productController =\n            new AbortController();\n\n\n        resultsWrapper.classList.add(\n            \"cwa-loading\"\n        );\n\n\n        const formData =\n            new FormData();\n\n\n        formData.append(\n            \"action\",\n            \"custom_product_filter\"\n        );\n\n\n        formData.append(\n            \"search\",\n            searchInput.value.trim()\n        );\n\n\n        formData.append(\n            \"category\",\n            selectedCategory\n        );\n\n\n        formData.append(\n            \"condition\",\n            conditionFilter.value\n        );\n\n\n        formData.append(\n            \"tag\",\n            tagFilter.value\n        );\n\n\n        formData.append(\n            \"sort\",\n            sortFilter.value\n        );\n\n\n        formData.append(\n            \"page\",\n            page\n        );\n\n\n        try {\n\n\n            const response =\n                await fetch(\n                    AJAX_URL,\n                    {\n\n                        method: \"POST\",\n\n                        body: formData,\n\n                        credentials:\n                            \"same-origin\",\n\n                        signal:\n                            productController.signal\n\n                    }\n                );\n\n\n            if (!response.ok) {\n\n\n                throw new Error(\n                    \"Product request failed.\"\n                );\n\n            }\n\n\n            const html =\n                await response.text();\n\n\n            results.innerHTML =\n                html;\n\n\n            bindPagination();\n\n\n            refreshWooCommerceCart();\n\n\n        } catch (error) {\n\n\n            if (\n                error.name ===\n                \"AbortError\"\n            ) {\n\n                return;\n\n            }\n\n\n            console.error(\n                \"Product AJAX error:\",\n                error\n            );\n\n\n            results.innerHTML = `\n\n                <div\n                    class=\"custom-no-products\"\n                >\n\n                    <h3>\n                        Unable to load products\n                    <\/h3>\n\n                    <p>\n                        Please refresh the page and try again.\n                    <\/p>\n\n                <\/div>\n\n            `;\n\n\n        } finally {\n\n\n            resultsWrapper.classList.remove(\n                \"cwa-loading\"\n            );\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       PAGINATION\n    ===================================================== *\/\n\n    function bindPagination() {\n\n\n        const buttons =\n            results.querySelectorAll(\n                \".custom-page-btn\"\n            );\n\n\n        buttons.forEach(\n            function (button) {\n\n\n                button.addEventListener(\n                    \"click\",\n                    function (event) {\n\n\n                        event.preventDefault();\n\n\n                        const page =\n                            parseInt(\n                                button.dataset.page,\n                                10\n                            );\n\n\n                        if (!page) {\n                            return;\n                        }\n\n\n                        loadProducts(\n                            page\n                        );\n\n\n                        const scrollPosition =\n                            shop.getBoundingClientRect().top +\n                            window.pageYOffset -\n                            30;\n\n\n                        window.scrollTo({\n                            top: scrollPosition,\n                            behavior: \"smooth\"\n                        });\n\n                    }\n                );\n\n            }\n        );\n\n    }\n\n\n    \/* =====================================================\n       WOOCOMMERCE CART REFRESH\n    ===================================================== *\/\n\n    function refreshWooCommerceCart() {\n\n\n        if (\n            window.jQuery &&\n            typeof window.jQuery ===\n            \"function\"\n        ) {\n\n\n            window.jQuery(\n                document.body\n            ).trigger(\n                \"wc_fragment_refresh\"\n            );\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       INITIALIZE\n    ===================================================== *\/\n\n    async function initializeShop() {\n\n\n        await loadFilters();\n\n\n        await loadProducts(1);\n\n    }\n\n\n    initializeShop();\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Products Browse our selection of quality laptops, desktops, and components &#128269; &#8249; &#8250; All categories All conditions All tags Newest Oldest Price Low to High Price High to Low Popularity Average Rating Name A to Z<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17415","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/pages\/17415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/comments?post=17415"}],"version-history":[{"count":11,"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/pages\/17415\/revisions"}],"predecessor-version":[{"id":17690,"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/pages\/17415\/revisions\/17690"}],"wp:attachment":[{"href":"https:\/\/driptechsolutions.com\/index.php\/wp-json\/wp\/v2\/media?parent=17415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}