/* ================================= */ /* CATALOG SIDEBAR */ /* ================================= */ .catalog-sidebar{ background:#fff; border:1px solid #e5e5e5; border-radius:10px; padding:10px; position:sticky; top:110px; } /* reset */ .catalog-sidebar ul{ list-style:none; margin:0; padding:0; } .catalog-sidebar li{ position:relative; } /* ================================= */ /* LINKS */ /* ================================= */ .catalog-sidebar a{ display:block; padding:0 60px 0 14px; height:44px; line-height:44px; border-bottom:1px solid #f1f1f1; text-decoration:none; color:#222; border-radius:6px; transition:background .2s ease; position:relative; } /* last item */ .catalog-sidebar li:last-child > a{ border-bottom:none; } /* hover */ .catalog-sidebar a:hover{ background:#f5f5f5; } /* active */ .catalog-sidebar .current-cat > a, .catalog-sidebar .current-cat-parent > a, .catalog-sidebar .current-product-ancestor > a{ background:#ececec; font-weight:600; } /* ================================= */ /* CHILDREN TREE */ /* ================================= */ .catalog-sidebar ul.children{ max-height:0; overflow:hidden; padding-left:16px; transition:max-height .35s ease; } .catalog-sidebar li.open > ul.children{ max-height:500px; } .catalog-sidebar .current-cat-parent > ul.children, .catalog-sidebar .current-cat > ul.children, .catalog-sidebar .current-product-ancestor > ul.children{ max-height:500px; } /* animation */ .catalog-sidebar ul.children li{ opacity:0; transform:translateY(-4px); transition:all .25s ease; } .catalog-sidebar li.open ul.children li{ opacity:1; transform:translateY(0); } /* ================================= */ /* SIDEBAR ARROWS */ /* ================================= */ .catalog-sidebar li > a::after{ content:"›"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:16px; font-weight:700; color:#f2b300; transition:transform .25s ease; } /* hide arrow if no children */ .catalog-sidebar li:not(:has(ul.children)) > a::after{ display:none; } /* rotate arrow */ .catalog-sidebar li.open > a::after{ transform:translateY(-50%) rotate(90deg); } /* ================================= */ /* COUNT BADGE */ /* ================================= */ .catalog-sidebar .count{ position:absolute !important; right:34px !important; top:50% !important; transform:translateY(-50%) !important; font-size:12px !important; color:#777 !important; background:#f3f3f3 !important; padding:2px 7px !important; border-radius:20px !important; font-weight:500 !important; line-height:1 !important; } /* remove brackets */ .catalog-sidebar .count::before, .catalog-sidebar .count::after{ display:none !important; } /* ================================= */ /* LEVEL INDENT (UX improvement) */ /* ================================= */ .catalog-sidebar ul.children a{ padding-left:28px; } .catalog-sidebar ul.children ul.children a{ padding-left:42px; } @media (max-width: 1024px){ .catalog-sidebar{ display:none; } } .mobile-categories-panel{ position:fixed; top:0; left:-100%; width:85%; max-width:360px; height:100%; background:#fff; z-index:9999; overflow:auto; transition:left .3s ease; padding:20px; box-shadow:0 0 25px rgba(0,0,0,0.15); } .mobile-categories-panel.open{ left:0; } .mobile-shop-actions{ display:none; gap:10px; margin-bottom:20px; } .mobile-shop-actions button{ flex:1; background:#fff; border:1px solid #ddd; padding:12px; font-size:15px; font-weight:600; border-radius:8px; } @media (max-width:1024px){ .mobile-shop-actions{ display:flex; } }