{"id":2139,"date":"2025-08-07T07:36:09","date_gmt":"2025-08-07T07:36:09","guid":{"rendered":"https:\/\/nopassdev.com\/?p=2139"},"modified":"2025-08-07T07:36:44","modified_gmt":"2025-08-07T07:36:44","slug":"switching-between-left-and-right-product-categories-for-wrodpress","status":"publish","type":"post","link":"https:\/\/nopassdev.com\/de\/switching-between-left-and-right-product-categories-for-wrodpress\/","title":{"rendered":"Wrodpress Produktkategorie Links\/Rechts-Umschaltung"},"content":{"rendered":"<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"eine Kopie machen von\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&#91;category_carousel ids=\"19,21,23,25,27,29\"&#93;\n\u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u6ed1\u52a8\n\nadd_shortcode('category_carousel', function($atts) {\n    $cat_ids = !empty($atts&#91;'ids'&#93;) ? explode(',', $atts&#91;'ids'&#93;) : [];\n    if (empty($cat_ids)) return '';\n    $per_row = 3;\n    $cats = get_terms(&#91;\n        'taxonomy'   => 'product_cat',\n        'include'    => $cat_ids,\n        'hide_empty' => false,\n        'orderby'    => 'include',\n    &#93;);\n    if (empty($cats) || is_wp_error($cats)) return '';\n\n    $groups = array_chunk($cats, $per_row);\n    $total_groups = count($groups);\n\n    ob_start();\n    ?>\n    &lt;div class=\"cat-carousel-wrap\">\n        &lt;div class=\"cat-carousel-inner\">\n            &lt;?php foreach ($groups as $g=>$group): ?>\n            &lt;div class=\"cat-carousel-group&lt;?php if($g==0) echo ' active'; ?>\" data-group=\"&lt;?php echo $g; ?>\">\n                &lt;?php foreach ($group as $cat):\n                    $img_id = get_term_meta($cat->term_id, 'thumbnail_id', true);\n                    $img_url = $img_id ? wp_get_attachment_image_url($img_id, 'large') : wc_placeholder_img_src();\n                    ?>\n                    &lt;a href=\"&lt;?php echo get_term_link($cat); ?>\" class=\"cat-carousel-card\">\n                        &lt;div class=\"cat-carousel-img-wrap\">\n                            &lt;div class=\"cat-carousel-img\" style=\"background-image:url('&lt;?php echo esc_url($img_url); ?>')\">&lt;\/div>\n                        &lt;\/div>\n                        &lt;div class=\"cat-carousel-title\">&lt;?php echo esc_html($cat->name); ?>&lt;\/div>\n                    &lt;\/a>\n                &lt;?php endforeach; ?>\n            &lt;\/div>\n            &lt;?php endforeach; ?>\n\n            &lt;div class=\"cat-carousel-group-mobile\">\n                &lt;?php foreach ($cats as $cat):\n                    $img_id = get_term_meta($cat->term_id, 'thumbnail_id', true);\n                    $img_url = $img_id ? wp_get_attachment_image_url($img_id, 'large') : wc_placeholder_img_src();\n                ?>\n                &lt;a href=\"&lt;?php echo get_term_link($cat); ?>\" class=\"cat-carousel-card\">\n                    &lt;div class=\"cat-carousel-img-wrap\">\n                        &lt;div class=\"cat-carousel-img\" style=\"background-image:url('&lt;?php echo esc_url($img_url); ?>')\">&lt;\/div>\n                    &lt;\/div>\n                    &lt;div class=\"cat-carousel-title\">&lt;?php echo esc_html($cat->name); ?>&lt;\/div>\n                &lt;\/a>\n                &lt;?php endforeach; ?>\n            &lt;\/div>\n        &lt;\/div>\n        &lt;button class=\"cat-carousel-btn prev\" aria-label=\"Previous\">\n            &lt;svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"left-circle-1\" data-name=\"Flat Line\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon flat-line\" width=\"44\" height=\"44\">&lt;g>&lt;circle cx=\"12\" cy=\"12\" r=\"9\" style=\"fill: #F05B2D; stroke-width: 2;\">&lt;\/circle>&lt;polyline points=\"13 9 10 12 13 15\" style=\"fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;\">&lt;\/polyline>&lt;circle cx=\"12\" cy=\"12\" r=\"9\" style=\"fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;\">&lt;\/circle>&lt;\/g>&lt;\/svg>\n        &lt;\/button>\n        &lt;button class=\"cat-carousel-btn next\" aria-label=\"Next\">\n            &lt;svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"right-circle\" data-name=\"Flat Line\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon flat-line\" width=\"44\" height=\"44\">&lt;g>&lt;circle cx=\"12\" cy=\"12\" r=\"9\" style=\"fill: #F05B2D; stroke-width: 2;\">&lt;\/circle>&lt;polyline points=\"11 15 14 12 11 9\" style=\"fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;\">&lt;\/polyline>&lt;circle cx=\"12\" cy=\"12\" r=\"9\" style=\"fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;\">&lt;\/circle>&lt;\/g>&lt;\/svg>\n        &lt;\/button>\n        &lt;div class=\"cat-carousel-progress\">\n            &lt;div class=\"cat-carousel-progress-bg\">&lt;\/div>\n            &lt;div class=\"cat-carousel-progress-bar\">&lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n    &lt;style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Marcellus:wght@400&amp;display=swap');\n    .cat-carousel-wrap { width:100%; margin:0 auto 24px auto; position:relative; box-sizing:border-box; padding:0; max-width:100vw;}\n    .cat-carousel-inner { position:relative; width:100%;}\n    .cat-carousel-group, .cat-carousel-group-mobile { display:none; }\n    .cat-carousel-group.active { display:flex; flex-wrap:nowrap; width:100%; animation:fadeIn .6s; justify-content:flex-start; align-items:stretch; gap:30px;}\n    .cat-carousel-card { flex:1 1 0; max-width:calc((100% - 60px)\/3); min-width:0; background:#fff; text-decoration:none; color:#222; display:flex; flex-direction:column; align-items:flex-start; border-radius:0; overflow:hidden; margin:0; box-shadow:none !important; border:none; position:relative; transition:none;}\n    .cat-carousel-img-wrap { width:100%; aspect-ratio:3\/2; position:relative; overflow:hidden; background:#f7f7f7;}\n    .cat-carousel-img { width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; transition:transform .42s cubic-bezier(.28,.62,.37,1.18), box-shadow .38s; will-change:transform; box-shadow:none;}\n    .cat-carousel-card:hover .cat-carousel-img { transform:scale(1.06) translateY(-4px); box-shadow:0 6px 38px #f05b2d44; z-index:2;}\n    .cat-carousel-title { padding:12px 0 6px 0; font-family:'Marcellus',serif !important; font-size:24px; color:#222; text-align:left; font-weight:400; width:100%; border-radius:0; letter-spacing:0; line-height:1.2; margin:0;}\n    .cat-carousel-btn, .cat-carousel-btn:active, .cat-carousel-btn:focus, .cat-carousel-btn:hover { background:transparent !important; box-shadow:none !important; border:none !important; outline:none !important;}\n    .cat-carousel-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:54px; height:54px; border-radius:50%; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .22s; display:flex; align-items:center; justify-content:center; padding:0; visibility:visible;}\n    .cat-carousel-btn.hidden { display:none !important;}\n    .cat-carousel-btn svg { background:none !important;}\n    .cat-carousel-btn.prev { left:-27px;}\n    .cat-carousel-btn.next { right:-27px;}\n    .cat-carousel-wrap:hover .cat-carousel-btn { opacity:1; pointer-events:auto;}\n    .cat-carousel-progress { width:100%; height:2px; margin:40px 0 0 0; position:relative; background:none; z-index:1; user-select:none; pointer-events:none;}\n    .cat-carousel-progress-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#D9DFD7; border-radius:3px; z-index:0;}\n    .cat-carousel-progress-bar { position:absolute; top:0; left:0; height:100%; width:0; background:#2E4D37; border-radius:3px; z-index:1; transition:width .35s cubic-bezier(.44,.67,.6,1.12);}\n    @keyframes fadeIn { from { opacity:0; transform:translateY(30px);} to { opacity:1; transform:none;}}\n    @media (max-width:700px) {\n        .cat-carousel-wrap { margin:0 auto 12px auto;}\n        .cat-carousel-group { display:none !important;}\n        .cat-carousel-group-mobile { display:flex !important; flex-direction:row; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; justify-content:flex-start; width:100%;}\n        .cat-carousel-card { flex:0 0 calc((100vw - 10px)\/1.5); max-width:calc((100vw - 10px)\/1.5); min-width:160px; scroll-snap-align:start;}\n        .cat-carousel-img-wrap { aspect-ratio:3\/2;}\n        .cat-carousel-title { font-size:16px; padding:8px 0 4px 0;}\n        .cat-carousel-btn { display:none !important;}\n        .cat-carousel-group-mobile::-webkit-scrollbar { display:none; height:0;}\n        .cat-carousel-group-mobile { -ms-overflow-style:none; scrollbar-width:none;}\n        .cat-carousel-progress { margin:8px 0 0 0;}\n    }\n    &lt;\/style>\n    &lt;script>\n    (function(){\n        var wrap = document.currentScript.parentElement,\n            groups = wrap.querySelectorAll('.cat-carousel-group'),\n            groupMobile = wrap.querySelector('.cat-carousel-group-mobile'),\n            btnPrev = wrap.querySelector('.cat-carousel-btn.prev'),\n            btnNext = wrap.querySelector('.cat-carousel-btn.next'),\n            progressBar = wrap.querySelector('.cat-carousel-progress-bar');\n        var total = groups.length, current = 0;\n\n        function updateCarousel(idx){\n            groups.forEach(function(g, i){ g.classList.toggle('active', i === idx); });\n            if(progressBar) progressBar.style.width = ((idx+1)\/total*100)+'%';\n            if(btnPrev) btnPrev.classList.toggle('hidden', idx===0);\n            if(btnNext) btnNext.classList.toggle('hidden', idx===total-1);\n        }\n        if(btnPrev) btnPrev.onclick = function(){ if(current>0) current--; updateCarousel(current);}\n        if(btnNext) btnNext.onclick = function(){ if(current&lt;total-1) current++; updateCarousel(current);}\n        wrap.tabIndex = 0;\n        wrap.addEventListener('keydown', function(e){\n            if(e.key===\"ArrowLeft\") btnPrev &amp;&amp; btnPrev.click();\n            if(e.key===\"ArrowRight\") btnNext &amp;&amp; btnNext.click();\n        });\n\n        function isMobile(){ return window.innerWidth &lt;= 700; }\n        function setMobileProgress(){\n            if(!isMobile() || !groupMobile || !progressBar) return;\n            var scrollL = groupMobile.scrollLeft, w = groupMobile.scrollWidth, vw = groupMobile.clientWidth;\n            var maxScroll = w-vw;\n            var percent = maxScroll>0 ? Math.min(scrollL\/maxScroll,1) : 0;\n            if(scrollL&lt;=1) percent = (vw\/w);\n            progressBar.style.width = (percent*100)+'%';\n        }\n        if(groupMobile){\n            groupMobile.addEventListener('scroll', setMobileProgress, {passive:true});\n            window.addEventListener('resize', function(){\n                if(isMobile()) setMobileProgress();\n                else updateCarousel(current);\n            });\n        }\n        if(isMobile()) setMobileProgress(); else updateCarousel(current);\n        window.addEventListener('resize', function(){\n            if(isMobile()) setMobileProgress();\n            else updateCarousel(current);\n        });\n    })();\n    &lt;\/script>\n    &lt;?php\n    return ob_get_clean();\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D8DEE9FF\">&#91;<\/span><span style=\"color: #D8DEE9\">category_carousel<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">ids<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">19,21,23,25,27,29<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">&#93;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">\u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u6ed1\u52a8<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">add_shortcode<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">category_carousel<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">$atts<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">$cat_ids<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #88C0D0\">empty<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">$atts<\/span><span style=\"color: #D8DEE9FF\">&#91;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">ids<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">&#93;) <\/span><span style=\"color: #81A1C1\">?<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">explode<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">,<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">$atts<\/span><span style=\"color: #D8DEE9FF\">&#91;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">ids<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">&#93;) <\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> []<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #88C0D0\">empty<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">$cat_ids<\/span><span style=\"color: #D8DEE9FF\">)) <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">$per_row<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">$cats<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">get_terms<\/span><span style=\"color: #D8DEE9FF\">(&#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">taxonomy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">   <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">product_cat<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">include<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">$cat_ids<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">hide_empty<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">false<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">orderby<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">include<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    &#93;)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #88C0D0\">empty<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">$cats<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">is_wp_error<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">$cats<\/span><span style=\"color: #D8DEE9FF\">)) <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">$groups<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">array_chunk<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">$cats<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">$per_row<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">$total_groups<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">count<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">$groups<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">ob_start<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-wrap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-inner<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            &lt;?php foreach ($groups as $g=&gt;$group): ?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-group&lt;?php if($g==0) echo &#39; active&#39;; ?&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">data-group<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&lt;?php echo $g; ?&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                &lt;?php foreach ($group as $cat):<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    $img_id = get_term_meta($cat-&gt;term_id, &#39;thumbnail_id&#39;, true);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    $img_url = $img_id ? wp_get_attachment_image_url($img_id, &#39;large&#39;) : wc_placeholder_img_src();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    ?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">&lt;a<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&lt;?php echo get_term_link($cat); ?&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-card<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-img-wrap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                            <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-img<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-image:url(&#39;&lt;?php echo esc_url($img_url); ?&gt;&#39;)<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-title<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">&lt;?php echo esc_html($cat-&gt;name); ?&gt;<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">&lt;\/a&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                &lt;?php endforeach; ?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            &lt;?php endforeach; ?&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-group-mobile<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                &lt;?php foreach ($cats as $cat):<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    $img_id = get_term_meta($cat-&gt;term_id, &#39;thumbnail_id&#39;, true);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    $img_url = $img_id ? wp_get_attachment_image_url($img_id, &#39;large&#39;) : wc_placeholder_img_src();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                ?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;a<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&lt;?php echo get_term_link($cat); ?&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-card<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-img-wrap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-img<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-image:url(&#39;&lt;?php echo esc_url($img_url); ?&gt;&#39;)<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-title<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">&lt;?php echo esc_html($cat-&gt;name); ?&gt;<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;\/a&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                &lt;?php endforeach; ?&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-btn prev<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">aria-label<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Previous<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;svg<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">fill<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">#000000<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">viewBox<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">0 0 24 24<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">left-circle-1<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">data-name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Flat Line<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">xmlns<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">http:\/\/www.w3.org\/2000\/svg<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">icon flat-line<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">width<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">44<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">height<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">44<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;g&gt;&lt;circle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cx<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cy<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">r<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">9<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">fill: #F05B2D; stroke-width: 2;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/circle&gt;&lt;polyline<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">points<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">13 9 10 12 13 15<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/polyline&gt;&lt;circle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cx<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cy<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">r<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">9<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/circle&gt;&lt;\/g&gt;&lt;\/svg&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-btn next<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">aria-label<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Next<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;svg<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">fill<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">#000000<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">viewBox<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">0 0 24 24<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">right-circle<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">data-name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Flat Line<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">xmlns<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">http:\/\/www.w3.org\/2000\/svg<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">icon flat-line<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">width<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">44<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">height<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">44<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;g&gt;&lt;circle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cx<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cy<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">r<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">9<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">fill: #F05B2D; stroke-width: 2;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/circle&gt;&lt;polyline<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">points<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">11 15 14 12 11 9<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/polyline&gt;&lt;circle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cx<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cy<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">12<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">r<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">9<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/circle&gt;&lt;\/g&gt;&lt;\/svg&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-progress<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-progress-bg<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">cat-carousel-progress-bar<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    @import url(&#39;https:\/\/fonts.googleapis.com\/css2?family=Marcellus:wght@400&amp;display=swap&#39;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-wrap <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #D8DEE9FF\"> 24<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">relative<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">sizing<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">max<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:100<\/span><span style=\"color: #D8DEE9\">vw<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-inner <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">relative<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-group, .cat-carousel-group-mobile <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-group.active <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">nowrap<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">animation<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">fadeIn<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">6<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">justify<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">start<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">align<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">items<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">stretch<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">gap<\/span><span style=\"color: #D8DEE9FF\">:30<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-card <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">max<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #88C0D0\">calc<\/span><span style=\"color: #D8DEE9FF\">((<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\"> 60<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #D8DEE9FF\">); <\/span><span style=\"color: #D8DEE9\">min<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #D8DEE9FF\">:#<\/span><span style=\"color: #D8DEE9\">fff<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">text<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">decoration<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">:#<\/span><span style=\"color: #B48EAD\">222<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">direction<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">column<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">align<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">items<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">start<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">overflow<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">hidden<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">relative<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">transition<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-img-wrap <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">aspect<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">ratio<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">relative<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">overflow<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">hidden<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #D8DEE9FF\">:#<\/span><span style=\"color: #D8DEE9\">f7f7f7<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-img <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">cover<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">center<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">repeat<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">no<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">repeat<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">transition<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">42<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">cubic<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #88C0D0\">bezier<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">.28<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">.62<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">.37<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">1.18<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">38<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">will<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">change<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-card:hover .cat-carousel-img <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #88C0D0\">scale<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">1.06<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">translateY<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">4<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">); <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> 6<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> 38<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> #<\/span><span style=\"color: #D8DEE9\">f05b2d44<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-title <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">:12<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> 6<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">family<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Marcellus<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">:24<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">:#<\/span><span style=\"color: #B48EAD\">222<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">text<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">align<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">weight<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">400<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">letter<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">spacing<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">1.2<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-btn, .cat-carousel-btn:active, .cat-carousel-btn:focus, .cat-carousel-btn:hover <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">transparent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">box<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">shadow<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">outline<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-btn <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #88C0D0\">translateY<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">); <\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">5<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:54<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">:54<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">cursor<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">pointer<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">pointer<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">events<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">transition<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">22<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">align<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">items<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">center<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">justify<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">center<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">visibility<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">visible<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-btn.hidden <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">display<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-btn svg <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-btn.prev <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">27<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-btn.next <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">27<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-wrap:hover .cat-carousel-btn <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">pointer<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">events<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-progress <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">:2<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">margin<\/span><span style=\"color: #D8DEE9FF\">:40<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">relative<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">user<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">select<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">pointer<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">events<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-progress-bg <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #D8DEE9FF\">:#<\/span><span style=\"color: #D8DEE9\">D9DFD7<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">:3<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    .cat-carousel-progress-bar <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #D8DEE9FF\">:#2<\/span><span style=\"color: #D8DEE9\">E4D37<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">radius<\/span><span style=\"color: #D8DEE9FF\">:3<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">transition<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">35<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">cubic<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #88C0D0\">bezier<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">.44<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">.67<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">.6<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">1.12<\/span><span style=\"color: #D8DEE9FF\">);<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    @keyframes fadeIn <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">from<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">opacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #88C0D0\">translateY<\/span><span style=\"color: #D8DEE9FF\">(30<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">);<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">to<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">opacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    @media (max-width:700px) <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">margin<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #D8DEE9FF\"> 12<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">group<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">group<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">mobile<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">direction<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">row<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">gap<\/span><span style=\"color: #D8DEE9FF\">:10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">overflow<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">overflow<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">y<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">hidden<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">scroll<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">snap<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">type<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">mandatory<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">webkit<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">overflow<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">scrolling<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">touch<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">justify<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">flex<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">start<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">card<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">flex<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">calc<\/span><span style=\"color: #D8DEE9FF\">((100<\/span><span style=\"color: #D8DEE9\">vw<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\"> 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #B48EAD\">1.5<\/span><span style=\"color: #D8DEE9FF\">); <\/span><span style=\"color: #D8DEE9\">max<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #88C0D0\">calc<\/span><span style=\"color: #D8DEE9FF\">((100<\/span><span style=\"color: #D8DEE9\">vw<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\"> 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #B48EAD\">1.5<\/span><span style=\"color: #D8DEE9FF\">); <\/span><span style=\"color: #D8DEE9\">min<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:160<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">scroll<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">snap<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">align<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">start<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">img<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> aspect-<\/span><span style=\"color: #88C0D0\">ratio<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">title<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> font-<\/span><span style=\"color: #88C0D0\">size<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\">16<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">:8<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> 4<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">btn<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">important<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">group<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">mobile<\/span><span style=\"color: #D8DEE9FF\">::<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">webkit<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">scrollbar<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">display<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">group<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">mobile<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> -ms-overflow-<\/span><span style=\"color: #88C0D0\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #D8DEE9\">scrollbar<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">:<\/span><span style=\"color: #D8DEE9\">none<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">cat<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">carousel<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">progress<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">margin<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\">8<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    (function()<\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">currentScript<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">parentElement<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">groups<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelectorAll<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">.cat-carousel-group<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">groupMobile<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelector<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">.cat-carousel-group-mobile<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">btnPrev<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelector<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">.cat-carousel-btn.prev<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">btnNext<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelector<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">.cat-carousel-btn.next<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">progressBar<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelector<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">.cat-carousel-progress-bar<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">total<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">groups<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">length<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">updateCarousel<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">idx<\/span><span style=\"color: #ECEFF4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">groups<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">g<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">i<\/span><span style=\"color: #ECEFF4\">){<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">g<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">classList<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toggle<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">active<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">i<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">idx<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">progressBar<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">progressBar<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">style<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> ((<\/span><span style=\"color: #D8DEE9\">idx<\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #D8DEE9\">total<\/span><span style=\"color: #81A1C1\">*<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">%<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">btnPrev<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">btnPrev<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">classList<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toggle<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">hidden<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">idx<\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">btnNext<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">btnNext<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">classList<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toggle<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">hidden<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">idx<\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #D8DEE9\">total<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">btnPrev<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">btnPrev<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">onclick<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(){<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #81A1C1\">--;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">updateCarousel<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">btnNext<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">btnNext<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">onclick<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(){<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9\">total<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #81A1C1\">++;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">updateCarousel<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">tabIndex<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">wrap<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">keydown<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">e<\/span><span style=\"color: #ECEFF4\">){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">e<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">key<\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">ArrowLeft<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">btnPrev<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&amp;&amp;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">btnPrev<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">click<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">e<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">key<\/span><span style=\"color: #81A1C1\">===<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">ArrowRight<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">btnNext<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&amp;&amp;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">btnNext<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">click<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">isMobile<\/span><span style=\"color: #ECEFF4\">(){<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">window<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerWidth<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">700<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">setMobileProgress<\/span><span style=\"color: #ECEFF4\">(){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #88C0D0\">isMobile<\/span><span style=\"color: #D8DEE9FF\">() <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">groupMobile<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">progressBar<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #81A1C1\">return;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">scrollL<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">groupMobile<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">scrollLeft<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">w<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">groupMobile<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">scrollWidth<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">vw<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">groupMobile<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">clientWidth<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">maxScroll<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">w<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">vw<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">percent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">maxScroll<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">?<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Math<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">min<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">scrollL<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #D8DEE9\">maxScroll<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">scrollL<\/span><span style=\"color: #81A1C1\">&lt;=<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #D8DEE9\">percent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">vw<\/span><span style=\"color: #81A1C1\">\/<\/span><span style=\"color: #D8DEE9\">w<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">progressBar<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">style<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">percent<\/span><span style=\"color: #81A1C1\">*<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">%<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">groupMobile<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            groupMobile.addEventListener(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">scroll<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">setMobileProgress<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\">passive<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #81A1C1\">true<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            window.addEventListener(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">resize<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">function<\/span><span style=\"color: #ECEFF4\">(){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #88C0D0\">isMobile<\/span><span style=\"color: #D8DEE9FF\">()) <\/span><span style=\"color: #88C0D0\">setMobileProgress<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">updateCarousel<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #88C0D0\">isMobile<\/span><span style=\"color: #D8DEE9FF\">()) <\/span><span style=\"color: #88C0D0\">setMobileProgress<\/span><span style=\"color: #D8DEE9FF\">(); <\/span><span style=\"color: #D8DEE9\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">updateCarousel<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">window<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">resize<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #88C0D0\">isMobile<\/span><span style=\"color: #D8DEE9FF\">()) <\/span><span style=\"color: #88C0D0\">setMobileProgress<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">updateCarousel<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">current<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">)();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;?<\/span><span style=\"color: #D8DEE9\">php<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">ob_get_clean<\/span><span style=\"color: #D8DEE9FF\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[15],"tags":[],"class_list":["post-2139","post","type-post","status-publish","format-standard","hentry","category-wordpress-code"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nopassdev.com\/de\/switching-between-left-and-right-product-categories-for-wrodpress\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nopassdev.com\/de\/switching-between-left-and-right-product-categories-for-wrodpress\/\" \/>\n<meta property=\"og:site_name\" content=\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-07T07:36:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-07T07:36:44+00:00\" \/>\n<meta name=\"author\" content=\"Nopass\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nopass\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/\"},\"author\":{\"name\":\"Nopass\",\"@id\":\"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/10c72918e517d5694cdb56ed20f0eba7\"},\"headline\":\"Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362\",\"datePublished\":\"2025-08-07T07:36:09+00:00\",\"dateModified\":\"2025-08-07T07:36:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/\"},\"wordCount\":1,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/nopassdev.com\/zh\/#organization\"},\"articleSection\":[\"Wordpress \u4ee3\u7801\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/\",\"url\":\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/\",\"name\":\"Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\",\"isPartOf\":{\"@id\":\"https:\/\/nopassdev.com\/zh\/#website\"},\"datePublished\":\"2025-08-07T07:36:09+00:00\",\"dateModified\":\"2025-08-07T07:36:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/nopassdev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nopassdev.com\/zh\/#website\",\"url\":\"https:\/\/nopassdev.com\/zh\/\",\"name\":\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/nopassdev.com\/zh\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nopassdev.com\/zh\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/nopassdev.com\/zh\/#organization\",\"name\":\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\",\"url\":\"https:\/\/nopassdev.com\/zh\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/nopassdev.com\/zh\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/nopassdev.com\/wp-content\/uploads\/2025\/07\/LOGO-NEW.jpg\",\"contentUrl\":\"https:\/\/nopassdev.com\/wp-content\/uploads\/2025\/07\/LOGO-NEW.jpg\",\"width\":1822,\"height\":306,\"caption\":\"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546\"},\"image\":{\"@id\":\"https:\/\/nopassdev.com\/zh\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/10c72918e517d5694cdb56ed20f0eba7\",\"name\":\"Nopass\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g\",\"caption\":\"Nopass\"},\"sameAs\":[\"https:\/\/nopassdev.com\"],\"url\":\"https:\/\/nopassdev.com\/de\/author\/minglifa2022gmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wrodpress Produktkategorie links\/rechts umschalten - Cross Border Website Builder","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nopassdev.com\/de\/switching-between-left-and-right-product-categories-for-wrodpress\/","og_locale":"de_DE","og_type":"article","og_title":"Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362 - \u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546","og_url":"https:\/\/nopassdev.com\/de\/switching-between-left-and-right-product-categories-for-wrodpress\/","og_site_name":"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546","article_published_time":"2025-08-07T07:36:09+00:00","article_modified_time":"2025-08-07T07:36:44+00:00","author":"Nopass","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Nopass"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#article","isPartOf":{"@id":"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/"},"author":{"name":"Nopass","@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/10c72918e517d5694cdb56ed20f0eba7"},"headline":"Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362","datePublished":"2025-08-07T07:36:09+00:00","dateModified":"2025-08-07T07:36:44+00:00","mainEntityOfPage":{"@id":"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/"},"wordCount":1,"commentCount":0,"publisher":{"@id":"https:\/\/nopassdev.com\/zh\/#organization"},"articleSection":["Wordpress \u4ee3\u7801"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/","url":"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/","name":"Wrodpress Produktkategorie links\/rechts umschalten - Cross Border Website Builder","isPartOf":{"@id":"https:\/\/nopassdev.com\/zh\/#website"},"datePublished":"2025-08-07T07:36:09+00:00","dateModified":"2025-08-07T07:36:44+00:00","breadcrumb":{"@id":"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/nopassdev.com\/switching-between-left-and-right-product-categories-for-wrodpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/nopassdev.com\/"},{"@type":"ListItem","position":2,"name":"Wrodpress \u4ea7\u54c1\u5206\u7c7b\u5de6\u53f3\u5207\u6362"}]},{"@type":"WebSite","@id":"https:\/\/nopassdev.com\/zh\/#website","url":"https:\/\/nopassdev.com\/zh\/","name":"Grenz\u00fcberschreitende Website-Anbieter","description":"","publisher":{"@id":"https:\/\/nopassdev.com\/zh\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nopassdev.com\/zh\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/nopassdev.com\/zh\/#organization","name":"Grenz\u00fcberschreitende Website-Anbieter","url":"https:\/\/nopassdev.com\/zh\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/logo\/image\/","url":"https:\/\/nopassdev.com\/wp-content\/uploads\/2025\/07\/LOGO-NEW.jpg","contentUrl":"https:\/\/nopassdev.com\/wp-content\/uploads\/2025\/07\/LOGO-NEW.jpg","width":1822,"height":306,"caption":"\u8de8\u5883\u5efa\u7ad9\u670d\u52a1\u5546"},"image":{"@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/10c72918e517d5694cdb56ed20f0eba7","name":"Nopass","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/nopassdev.com\/zh\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8717d323563ed7c90a695bacdb516c285d94c51ce7947adb6c33f07577e6ac8?s=96&d=mm&r=g","caption":"Nopass"},"sameAs":["https:\/\/nopassdev.com"],"url":"https:\/\/nopassdev.com\/de\/author\/minglifa2022gmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/posts\/2139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/comments?post=2139"}],"version-history":[{"count":2,"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/posts\/2139\/revisions"}],"predecessor-version":[{"id":2141,"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/posts\/2139\/revisions\/2141"}],"wp:attachment":[{"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/media?parent=2139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/categories?post=2139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nopassdev.com\/de\/wp-json\/wp\/v2\/tags?post=2139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}