Sort by
-
Featured
-
Best selling
-
Alphabetically, A-Z
-
Alphabetically, Z-A
-
Price, low to high
-
Price, high to low
-
Date, old to new
-
Date, new to old
/* Turn the existing breadcrumb into a vertical sidebar called "Category" */
.m-breadcrumb--wrapper{
/* layout: park it on the left */
float: left; /* or use position:sticky + a fixed width, per your layout */
width: 260px;
margin: 0 24px 24px 0; /* space to the product grid/content */
padding: 16px;
border: 1px solid #eaeaea;
border-radius: 12px;
background: #fff;
display: block;
}
/* Add the title */
.m-breadcrumb--wrapper::before{
content: "Category";
display: block;
font-weight: 600;
font-size: 1.05rem;
margin-bottom: 12px;
}
/* Stack items vertically */
.m-breadcrumb--item{
display: block !important; /* force block so each sits on its own line */
margin: 0;
padding: 6px 0;
text-decoration: none;
color: #333;
}
/* Current page style (use your brand green) */
.m-breadcrumb--item-current{
font-weight: 700;
color: #59B147 !important;
}
/* Hide the arrow separators */
.m-breadcrumb--separator{
display: none !important;
}
/* Optional: subtle dividers between rows */
.m-breadcrumb--item + .m-breadcrumb--item{
border-top: 1px solid #f3f3f3;
}
/* Optional: bullets hinting at depth */
.m-breadcrumb--item:not(#BreadcrumbHome)::before{
content: "› ";
opacity: .45;
}
/* Mobile: fall back to standard horizontal breadcrumb if desired */
@media (max-width: 768px){
.m-breadcrumb--wrapper{
float: none;
width: auto;
margin: 0 0 12px 0;
padding: 8px 0;
border: 0;
border-radius: 0;
background: transparent;
}
.m-breadcrumb--wrapper::before{ content: ""; }
.m-breadcrumb--item{ display: inline; border-top: 0; padding: 0; }
.m-breadcrumb--separator{ display: inline-block !important; }
}