/* MotoBase-specific additions layered on top of the purchased RedParts theme. */

.catalog-category-filter > .filter-categories__link {
    display: block;
    padding: 2px 0 8px;
}

.catalog-category-tree__list {
    width: 100%;
}

.catalog-category-tree__item {
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.catalog-category-tree__item > .catalog-category-tree__link {
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: break-word;
    padding-top: 3px;
    padding-bottom: 3px;
}

.catalog-category-tree__list--root > .catalog-category-tree__item > .catalog-category-tree__link {
    font-weight: 600;
}

.catalog-category-tree__item > .catalog-category-tree__list {
    display: none;
    flex: 0 0 100%;
    margin: 2px 0 3px;
    padding-left: 10px;
}

.catalog-category-tree__item--expanded > .catalog-category-tree__list {
    display: block;
}

.catalog-category-tree__item--current > .catalog-category-tree__link {
    color: #e52727;
    font-weight: 700;
}

.catalog-category-tree__item--current > .catalog-category-tree__list {
    font-weight: 400;
}

.catalog-category-tree__item--expanded > .filter-categories__arrow {
    transform: rotate(90deg);
}

.catalog-category-tree__link:focus-visible {
    border-radius: 2px;
    outline: 2px solid #e52727;
    outline-offset: 2px;
}

/* Keep RedParts navigation styling while restoring a visible keyboard focus. */
.departments__button:focus-visible,
.departments__item-link:focus-visible,
.megamenu-links__item-link:focus-visible,
.mobile-header__menu-button:focus-visible,
.mobile-menu__close:focus-visible,
.mobile-menu__panel-back:focus-visible,
.mobile-menu__links a:focus-visible {
    border-radius: 2px;
    outline: 2px solid #e52727;
    outline-offset: 2px;
}

/* Category artwork is optional and decorative, as in the purchased template. */
.departments__megamenu--has-image {
    min-height: 280px;
    overflow: hidden;
}

.departments__megamenu--has-image .megamenu__image {
    max-width: 42%;
    pointer-events: none;
}

.departments__megamenu--has-image.departments__megamenu--size--xl .megamenu__image {
    max-width: 20%;
}

.departments__megamenu--has-image.departments__megamenu--size--lg .megamenu__image {
    max-width: 25%;
}

.departments__megamenu--has-image.departments__megamenu--size--md .megamenu__image {
    max-width: 33.333333%;
}

.departments__megamenu--has-image.departments__megamenu--size--nl .megamenu__image {
    max-width: 50%;
}

.departments__megamenu--has-image .megamenu__image img {
    height: auto;
    max-height: 260px;
    max-width: 100%;
    object-fit: contain;
}