.list-group-item:first-child{border-left:4px solid #0d6efd;background-color:#f8f9fa}.card-img-top{width:100%;height:220px;object-fit:contain;padding:10px;background-color:#fff}.dropdown-menu .dropdown-toggle::after{display:none}.btn-toggle{display:inline-flex;padding:.25rem .5rem;font-weight:600;color:rgba(0,0,0,.65);background-color:transparent}.btn-toggle::before{width:1.25em;line-height:0;content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");transition:transform .35s ease;transform-origin:.5em 50%}.btn-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}.btn-toggle-nav a{padding:.1875rem .5rem;margin-top:.125rem;margin-left:1.25rem}

/* Custom styles for the Offcanvas categories */
.offcanvas-categories {
    /* Default width for mobile */
    width: 280px;
}

@media (min-width: 992px) { /* Apply for desktop (lg breakpoint and up) */
    .offcanvas-categories {
        width: 380px; /* Wider for desktop */
    }
}

/* Ensure left alignment for category items in offcanvas */
.offcanvas-body .list-unstyled li .btn,
.offcanvas-body .list-unstyled li .link-dark {
    text-align: left;
    width: 100%; /* Make clickable area wider */
    padding-left: 0.5rem; /* Adjust padding if needed */
}

/* Ensure nested items are also left-aligned and have proper indentation */
.offcanvas-body .btn-toggle-nav {
    padding-left: 1.5rem; /* Indent for sub-categories */
}
.offcanvas-body .btn-toggle-nav a {
    padding-left: 0rem; /* Reset padding for actual links */
}

/* Make category list scrollable if it exceeds height */
.offcanvas-category-list {
    max-height: calc(100vh - 120px); /* Adjust based on header/footer height in offcanvas */
    overflow-y: auto;
    padding-right: 15px; /* Add some padding for scrollbar */
}