{"id":22,"date":"2025-12-18T12:24:17","date_gmt":"2025-12-18T12:24:17","guid":{"rendered":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/?page_id=22"},"modified":"2025-12-18T12:29:32","modified_gmt":"2025-12-18T12:29:32","slug":"shopypress","status":"publish","type":"page","link":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/","title":{"rendered":"ShopyPress(filters)"},"content":{"rendered":"        <div class=\"shopypress-main\">\n            <div class=\"mb-4 shopypress-commerce-top\">\n                <button class=\"flex md:hidden items-center border-solid border-2 border-black hover:border-[#000000] bg-white text-black \n                hover:bg-[#ebebeb] hover:text-[#000000] transition-colors duration-200 text-center \n                rounded-full px-5 py-1 font-semibold relative shopypress-popup-btn shopypress-open-mobile-filters\">\n                    <!-- Filter Icon -->\n                    <svg class=\"w-5 h-5 mr-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                        <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                        <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                        <circle cx=\"7\" cy=\"6\" r=\"2\" fill=\"currentColor\"\/>\n                        <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"currentColor\"\/>\n                        <circle cx=\"10\" cy=\"18\" r=\"2\" fill=\"currentColor\"\/>\n                    <\/svg>\n                    Filters                    <div class=\"absolute top-[-40%] right-[-5px] py-0 px-2 bg-black border-solid border-2 border-[#FFFFFF] rounded-full text-white shopypress-filters-count\"><\/div>\n                <\/button>\n\n            <\/div>\n            <div class=\"flex flex-row gap-6 shopypress-content\">\n\n                <div class=\"hidden md:block w-64 flex-shrink-0 shopypress-filters-background\">\n                    <div class=\"shopypress-filters-background-black\"><\/div>\n                    <div class=\"shopypress-filters-content\">\n                        <div class=\"hidden shopypress-filters-mobile-top\">\n                            <div class=\"font-semibold text-xl\">Filters<\/div>\n                            <button class=\"absolute top-1\/2 right-[10px] -translate-y-1\/2 w-9 h-9 flex items-center justify-center rounded-full text-black !hover:text-black transition-colors duration-200 hover:bg-[#F2F2F2] shopypress-popup-btn close-filters-popup-btn\">\u2715<\/button>\n                        <\/div>\n\n                        <div class=\"shopypress-scroll-content-ui\">\n                            <div class=\"shopypress-scroll-content\">\n                                <aside class=\"shopypress-filters\">\n                                            <div class=\"mb-5 filter-group\" data-filter-type=\"option\" data-option-name=\"color\">\n            <h4 class=\"color filter-group-title\">Color<\/h4>\n            <div class=\"flex flex-wrap filter-group-content\">\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"beige\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">beige<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"black\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">black<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"blue\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">blue<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"burgandy\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">burgandy<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"gray\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">gray<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"red\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">red<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"white\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">white<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"color\"\n                        data-option-value=\"yellow\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">yellow<\/span>\n                    <\/button>\n                \n                            <\/div>\n        <\/div>\n                <div class=\"mb-5 filter-group\" data-filter-type=\"collection\">\n            <h4 class=\"collection-type filter-group-title\">Collections<\/h4>\n            <div class=\"filter-group-content\" data-collection-limit=\"5\">\n                        <div class=\"category-item-wrapper collection-item-wrapper\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"5\"\n                    data-collection-slug=\"adidas\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by ADIDAS\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"5\"\n                    data-collection-slug=\"adidas\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">ADIDAS<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(4)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"10\"\n                    data-collection-slug=\"asics-tiger\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by ASICS TIGER\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"10\"\n                    data-collection-slug=\"asics-tiger\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">ASICS TIGER<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"8\"\n                    data-collection-slug=\"converse\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by CONVERSE\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"8\"\n                    data-collection-slug=\"converse\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">CONVERSE<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(3)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"15\"\n                    data-collection-slug=\"dr-martens\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by DR MARTENS\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"15\"\n                    data-collection-slug=\"dr-martens\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">DR MARTENS<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(3)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"18\"\n                    data-collection-slug=\"flex-fit\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by FLEX FIT\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"18\"\n                    data-collection-slug=\"flex-fit\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">FLEX FIT<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"17\"\n                    data-collection-slug=\"herschel\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by HERSCHEL\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"17\"\n                    data-collection-slug=\"herschel\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">HERSCHEL<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"19\"\n                    data-collection-slug=\"frontpage\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by Home page\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"19\"\n                    data-collection-slug=\"frontpage\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">Home page<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"6\"\n                    data-collection-slug=\"kid\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by KID\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"6\"\n                    data-collection-slug=\"kid\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">KID<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(3)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"9\"\n                    data-collection-slug=\"men\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by MEN\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"9\"\n                    data-collection-slug=\"men\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">MEN<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(4)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"7\"\n                    data-collection-slug=\"nike\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by NIKE\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"7\"\n                    data-collection-slug=\"nike\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">NIKE<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(3)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"11\"\n                    data-collection-slug=\"palladuim\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by PALLADUIM\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"11\"\n                    data-collection-slug=\"palladuim\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">PALLADUIM<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"12\"\n                    data-collection-slug=\"puma\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by PUMA\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"12\"\n                    data-collection-slug=\"puma\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">PUMA<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"20\"\n                    data-collection-slug=\"sale\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by SALE\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"20\"\n                    data-collection-slug=\"sale\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">SALE<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"13\"\n                    data-collection-slug=\"supra\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by SUPRA\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"13\"\n                    data-collection-slug=\"supra\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">SUPRA<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"14\"\n                    data-collection-slug=\"timberland\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by TIMBERLAND\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"14\"\n                    data-collection-slug=\"timberland\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">TIMBERLAND<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(1)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                <div class=\"category-item-wrapper collection-item-wrapper hidden-initially\" data-level=\"0\">\n            <div class=\"w-full gap-2 py-1.5 px-2 rounded transition-colors category-item-row collection-item-row\"\n                 style=\"padding-left: 0.5rem;\">\n\n                <!-- Left: Checkbox -->\n                <button\n                    class=\"filter-category-checkbox filter-collection-checkbox flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded transition-colors\"\n                    data-collection-id=\"16\"\n                    data-collection-slug=\"women\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\"\n                    aria-label=\"Filter by WOMEN\">\n                    <svg class=\"checkmark hidden w-full h-full text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\n                    <\/svg>\n                <\/button>\n\n                <!-- Middle: Collection Label -->\n                <button\n                    class=\"flex-1 text-left text-sm text-gray-700 filter-collection-label filter-category-label\"\n                    data-collection-id=\"16\"\n                    data-collection-slug=\"women\"\n                    data-child-ids=\"[]\"\n                    data-is-parent=\"false\"\n                    type=\"button\">\n                    <span class=\"font-medium\">WOMEN<\/span>\n                                            <span class=\"text-xs text-gray-500 ml-1\">(2)<\/span>\n                                    <\/button>\n\n                <!-- Right: Expand\/Collapse Arrow (only for parents) -->\n                                    <div class=\"w-6\"><\/div> <!-- Spacer for alignment -->\n                            <\/div>\n\n            <!-- Children container (hidden by default) -->\n                    <\/div>\n                            <button class=\"w-full mt-2 py-2 px-3 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors collection-show-all-btn\" type=\"button\">\n                        Show All                    <\/button>\n                            <\/div>\n\n        <\/div>\n                <div class=\"mb-5 filter-group\" data-filter-type=\"option\" data-option-name=\"size\">\n            <h4 class=\"size filter-group-title\">Size<\/h4>\n            <div class=\"flex flex-wrap filter-group-content\">\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"1\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">1<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"2\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">2<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"3\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">3<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"4\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">4<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"5\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">5<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"6\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">6<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"7\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">7<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"8\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">8<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"9\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">9<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"10\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">10<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"11\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">11<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"12\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">12<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"13\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">13<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"14\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">14<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"15\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">15<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"9.5-13\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">9.5-13<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"OS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">OS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"l\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">l<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"m\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">m<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"s\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">s<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"size\"\n                        data-option-value=\"xl\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">xl<\/span>\n                    <\/button>\n                \n                            <\/div>\n        <\/div>\n                <div class=\"mb-5 filter-group\" data-filter-type=\"option\" data-option-name=\"vendor\">\n            <h4 class=\"vendor filter-group-title\">Vendor<\/h4>\n            <div class=\"flex flex-wrap filter-group-content\">\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"ADIDAS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">ADIDAS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"ADIDAS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">ADIDAS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"ADIDAS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">ADIDAS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"ADIDAS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">ADIDAS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"NIKE\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">NIKE<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"NIKE\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">NIKE<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"NIKE\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">NIKE<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"CONVERSE\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">CONVERSE<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"CONVERSE\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">CONVERSE<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"CONVERSE\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">CONVERSE<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"ASICS TIGER\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">ASICS TIGER<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"PALLADIUM\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">PALLADIUM<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"PUMA\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">PUMA<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"SUPRA\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">SUPRA<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"TIMBERLAND\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">TIMBERLAND<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"DR MARTENS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">DR MARTENS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"DR MARTENS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">DR MARTENS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"DR MARTENS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">DR MARTENS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"HERSCHEL\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">HERSCHEL<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"FLEX FIT\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">FLEX FIT<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"VANS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">VANS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"VANS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">VANS<\/span>\n                    <\/button>\n                                    <button\n                        class=\"py-1 px-3 mr-3 mb-3 filter-item filter-option filter-attribute hidden-initially\"\n                        data-option-key=\"vendor\"\n                        data-option-value=\"VANS\"\n                        type=\"button\">\n                        <span class=\"filter-item-label\">VANS<\/span>\n                    <\/button>\n                \n                                    <button class=\"w-full mt-2 py-2 px-3 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors vendor-show-all-btn\" type=\"button\">\n                        Show All                    <\/button>\n                            <\/div>\n        <\/div>\n                <div class=\"mb-5 filter-group\" data-filter-type=\"price\">\n            <h4 class=\"price-slider filter-group-title\">Price Range<\/h4>\n            <div class=\"filter-group-content\">\n                <div class=\"price-range-filter\"\n                    data-min=\"19.95\"\n                    data-max=\"900\">\n\n                    <div class=\"price-range-values\">\n                        <span class=\"price-range-value-min\">$19.95<\/span>\n                        <span class=\"price-range-separator\">-<\/span>\n                        <span class=\"price-range-value-max\">$900.00<\/span>\n                    <\/div>\n\n                    <div class=\"price-range-slider-container\">\n                        <div class=\"price-range-track\">\n                            <div class=\"price-range-track-active\"><\/div>\n                        <\/div>\n                        <input\n                            type=\"range\"\n                            class=\"price-range-slider price-range-slider-min\"\n                            min=\"19.95\"\n                            max=\"900\"\n                            value=\"19.95\"\n                            step=\"1\"\n                        \/>\n                        <input\n                            type=\"range\"\n                            class=\"price-range-slider price-range-slider-max\"\n                            min=\"19.95\"\n                            max=\"900\"\n                            value=\"900\"\n                            step=\"1\"\n                        \/>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n                                        <\/aside>\n                                <div>\n                                    <button class=\"hidden md:block border-solid mb-5 border-2 border-black hover:border-[#000000] bg-white text-black hover:bg-[#ebebeb] hover:text-[#000000] transition-colors duration-200 text-center rounded-full px-5 py-1 font-semibold relative shopypress-popup-btn shopypress-clear-all-filters\">\n                                        Clear All                                        <div class=\"absolute top-[-40%] right-[-5px] py-0 px-2 bg-black border-solid border-2 border-[#FFFFFF] rounded-full text-white shopypress-filters-count\"><\/div>\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"hidden shopypress-filters-mobile-bottom\">\n                            <div>\n                                <button class=\"text-black hover:bg-[#e1e0e0] text-center rounded px-5 py-2 font-semibold \n                                shopypress-popup-btn shopypress-clear-filters-popup-btn\">Clear all<\/button>\n                            <\/div>\n                            <div>\n                            <\/div>\n                            <button class=\"bg-black text-white hover:bg-[#2d2d2d] hover:text-[#FFFFFF] text-center rounded px-5 py-2 font-semibold\n                             flex items-center justify-center shopypress-popup-btn shopypress-apply-filters-popup-btn\">\n                             <div class=\"hidden shopypress-loader-ui\">\n                                <div class=\"flex space-x-2 mr-4 shopypress-loader\">\n                                    <span class=\"w-2 h-2 bg-white rounded-full animate-dot1\"><\/span>\n                                    <span class=\"w-2 h-2 bg-white rounded-full animate-dot2\"><\/span>\n                                    <span class=\"w-2 h-2 bg-white rounded-full animate-dot3\"><\/span>\n                                <\/div>\n                             <\/div>\n                             <span class=\"shopypress-info\">Show <span class=\"shopypress-show-products-count\"><\/span><\/span>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n\n                <main class=\"shopypress-products-wrapper flex-1\"\n                      data-initial-load=\"12\"\n                      data-load-more-count=\"12\">\n                    <div class=\"shopypress-products-header mb-1\">\n                        <div class=\"product-count\"><\/div>\n                    <\/div>\n                    <div class=\"grid gap-7 sm:grid-cols-2 md:grid-cols-3 [grid-template-columns:repeat(auto-fit,minmax(350px,1fr))] shopypress-products\"><\/div>\n                    <div class=\"products-loading\">\n                        <div class=\"py-10 shopypress-products-loader-ui\">\n\n                            <div class=\"flex flex-col items-center gap-3 shopypress-product-loader\">\n                                <div class=\"w-12 h-12 border-4 border-gray-200 border-t-black rounded-full animate-spin\"><\/div>\n                                <span class=\"text-gray-600\">Loading products...<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"hidden my-5 load-more-ui\">\n                        <div class=\"flex items-center justify-center\">\n                            <button class=\"flex items-center border-solid border-2 border-black hover:border-[#000000] bg-white text-black \n                            hover:bg-[#ebebeb] hover:text-[#000000] transition-colors duration-200 text-center \n                            rounded-full px-6 py-1 font-semibold relative shopypress-load-more\">\n                                Load more                            <\/button>\n                        <\/div>\n\n                    <\/div>\n                <\/main>\n            <\/div>\n        <\/div>\n\n        \n        <div id=\"quick-view-modal\" class=\"fixed flex items-center justify-center hidden left-0 top-0 w-screen h-screen shopypress-quick-view-ui\">\n            <div class=\"z-1 absolute w-full h-full bg-black bg-opacity-30 shopypress-quick-view-background\"><\/div>\n            <div class=\"z-3 bg-white relative w-full max-w-md sm:max-w-lg md:max-w-4xl lg:max-w-3xl\n            rounded-2xl min-h-[50vh] h-[90vh] md:h-[70vh] max-h-[90vh] min-h-[50dvh] h-[90dvh] md:h-[70vh] max-h-[90dvh] shopypress-quick-view-modal\">\n                <div class=\"h-[3rem] relative flex items-center justify-between pl-3 shopypress-quick-view-modal-top\">\n                    <div class=\"font-semibold text-xl product-title\"><\/div>\n                    <button class=\"absolute top-1\/2 right-[10px] -translate-y-1\/2 w-9 h-9 flex items-center justify-center rounded-full text-black !hover:text-black\n                    transition-colors duration-200 hover:bg-[#F2F2F2] shopypress-popup-btn close-quick-view-modal-btn\">\u2715<\/button>\n                <\/div>\n                <div class=\"h-[calc(100%-3rem)] overflow-y-auto p-5 pt-0 product-modal-content\">\n                    <!-- Loading spinner -->\n                    <div class=\"absolute rounded-2xl inset-0 flex items-center justify-center bg-white bg-opacity-90 z-10 quick-view-loading\">\n                        <div class=\"flex flex-col items-center gap-3\">\n                            <div class=\"w-12 h-12 border-4 border-gray-200 border-t-black rounded-full animate-spin\"><\/div>\n                            <span class=\"text-gray-600\">Loading product...<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Product content will be added in future implementation -->\n                    <div class=\"pb-5 md:pb-0 quick-view-content hidden\">\n                        <!-- Empty for now - to be implemented -->\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":3,"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":27,"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/pages\/22\/revisions\/27"}],"wp:attachment":[{"href":"https:\/\/sakuraleaf.com\/showcase\/shopypress\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}