/* =========================================================
ODOO SHOP CATEGORIEËN - SIDEBAR
Sadu rood: #E30613
Lettertype wordt NIET aangepast
========================================================= */
/* --- Sidebar algemeen --- */
#products_grid_before {
background: #fff;
}
/* Zorgt voor wat nette ruimte rondom de categorieën */
#products_grid_before .products_categories {
padding: 0;
}
/* =========================================================
HOOFDTITEL "CATEGORIEËN"
========================================================= */
#products_grid_before .o_categories_collapse_title {
margin: 0 0 8px 0;
}
#products_grid_before .o_categories_collapse_title > .accordion-button {
padding: 14px 18px !important;
background: #f3f4f5 !important;
color: #172536;
border-left: 3px solid #E30613;
box-shadow: none !important;
border-radius: 0;
font-weight: 700;
text-transform: uppercase;
}
/* Verwijder standaard focus/shadow van Bootstrap */
#products_grid_before .accordion-button:focus {
box-shadow: none !important;
}
/* =========================================================
ALGEMENE CATEGORIE LINKS
========================================================= */
#products_grid_before .wsale_products_categories_list a {
display: block;
color: #596778;
text-decoration: none !important;
padding: 6px 12px !important;
transition:
color 0.15s ease,
background-color 0.15s ease;
}
/* Hover */
#products_grid_before .wsale_products_categories_list a:hover {
color: #E30613;
}
/* =========================================================
EERSTE CATEGORIE-NIVEAU
Bijvoorbeeld: "Snijschijven"
========================================================= */
#products_grid_before
.wsale_products_categories_list
> .nav
> .nav-item
> .accordion-header
> a {
color: #172536;
font-weight: 700;
padding-left: 18px !important;
}
/* Actieve / open hoofdcategorie rood */
#products_grid_before
.wsale_products_categories_list
> .nav
> .nav-item
> .accordion-header
> a:hover,
#products_grid_before
.wsale_products_categories_list
> .nav
> .nav-item
> .accordion-header
> a.o_active_category_link {
color: #E30613;
}
/* =========================================================
TWEEDE NIVEAU
Bijvoorbeeld: "Doorslijpschijven"
========================================================= */
#products_grid_before
.wsale_products_categories_list
.nav-item
.nav-item
> .accordion-header
> a {
padding-left: 26px !important;
color: #596778;
font-weight: 400;
}
/* =========================================================
DERDE NIVEAU
Bijvoorbeeld:
"Doorslijpschijven voor metaal"
========================================================= */
#products_grid_before
.wsale_products_categories_list
.nav-item
.nav-item
.nav-item
a {
padding-left: 38px !important;
color: #687686;
}
/* =========================================================
ACTIEVE CATEGORIE
========================================================= */
#products_grid_before .o_active_category_link {
position: relative;
background: #fdf0f0;
color: #172536 !important;
font-weight: 700 !important;
text-decoration: none !important;
}
/* Rode lijn links bij geselecteerde categorie */
#products_grid_before .o_active_category_link::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: #E30613;
}
/* =========================================================
ACCORDION + / -
========================================================= */
/* Standaard Bootstrap icoon verwijderen */
#products_grid_before
.o_categories_recursive_button.accordion-button::after {
background-image: none !important;
content: "+";
width: auto;
height: auto;
margin-left: auto;
color: #667485;
font-size: 14px;
font-weight: 500;
transform: none !important;
}
/* Wanneer categorie geopend is */
#products_grid_before
.o_categories_recursive_button.accordion-button:not(.collapsed)::after {
content: "−";
background-image: none !important;
transform: none !important;
}
/* Knop compacter maken */
#products_grid_before .o_categories_recursive_button {
min-width: 30px;
padding-right: 14px !important;
}
/* =========================================================
RUIMTE TUSSEN CATEGORIEËN
========================================================= */
#products_grid_before .wsale_products_categories_list .nav-item {
margin-bottom: 0 !important;
}
/* Headers netjes uitlijnen */
#products_grid_before .accordion-header {
align-items: center;
margin-bottom: 0 !important;
}
/* =========================================================
"ALL" LINK
========================================================= */
#products_grid_before
.wsale_products_categories_list
> .nav
> a[href="/shop"] {
padding: 7px 18px !important;
color: #596778;
}
/* Optioneel: verberg "All"
#products_grid_before
.wsale_products_categories_list
> .nav
> a[href="/shop"] {
display: none;
}
*/
/* =========================================================
SCROLLBAR IETS RUSTIGER
========================================================= */
#products_grid_before .o_wsale_products_grid_before_rail {
scrollbar-width: thin;
}
/* =========================================================
FILTER-SCHEIDING
========================================================= */
#products_grid_before .products_attributes_filters {
margin-top: 16px;
border-color: #e5e7e9 !important;
}
