.nav-vertical {
    flex-direction: column;
}

.nav-vertical .border-bottom {
    border-bottom: 1px solid #e5e5e5 !important;
}

.nav-vertical .nav-link {
    padding-left: 0;
    padding-right: 0;
    font-size: 1.125rem;
    color: #111;
    font-weight: 700;
}

.list-styled {
    list-style-type: none;
    padding-left: 0;
}

.list-styled-link {
    display: block;
    color: #525252;
    font-size: 1rem;
}

.list-styled-link:hover {
    color: var(--ffj-red-02);
}

.list-styled-item+.list-styled-item {
    margin-top: .75em;
}

.dropdown-toggle,
.dropright-toggle {
    overflow: hidden;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 2rem;
}

.custom-control-inline {
    display: inline-flex;
    margin-right: .5rem;
}

.custom-control {
    padding-left: 0;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1.125rem;
    height: 1.3125rem;
    opacity: 0;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    color: #767676;
    vertical-align: top;
}

.custom-control .custom-control-label {
    color: #767676;
    cursor: pointer;
}

.custom-control-color .custom-control-label {
    min-width: 3rem;
    padding: .5rem;
    text-align: center;
    border: 1px solid #ddd;
}

.custom-control .custom-control-input:checked~.custom-control-label {
    color: #111;
}

.custom-control-color .custom-control-input:checked~.custom-control-label {
    border-color: #111;
}

.custom-control-color .custom-control-label::after,
.custom-control-color .custom-control-label::before {
    display: none
}

.custom-control-color .custom-control-input:checked~.custom-control-label {
    border-color: currentColor;
}

.custom-control-color .custom-control-input[disabled]~.custom-control-label {
    background-color: #f5f5f5
}

.custom-control.custom-control-color .custom-control-label {
    color: #fff;
    text-shadow: 2px 2px 2px #111;
}

.custom-control.custom-control-color .custom-control-input:checked~.custom-control-label {
    color: #fff;
    border-color: var(--ffj-red-01);
    border-width: 3px;
    box-shadow: 0 1rem 3rem rgba(237, 73, 65, .175);
}

.custom-control {
    padding-left: 0;
}

input[type="checkbox" i]:focus {
    outline-offset: 0px;
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    color: #767676;
    vertical-align: top;
}

.custom-control .custom-control-label {
    color: #767676;
    cursor: pointer;
}

.custom-checkbox .custom-control-label,
.custom-radio .custom-control-label {
    padding-left: 2rem;
}

.custom-control .custom-control-label::after,
.custom-control .custom-control-label::before {
    top: calc((1em * 1.5 - 1.125rem)/ 2);
}

.custom-checkbox .custom-control-label::after,
.custom-checkbox .custom-control-label::before,
.custom-radio .custom-control-label::after,
.custom-radio .custom-control-label::before {
    left: 0;
}

.custom-control-label::before {
    position: absolute;
    top: .1875rem;
    left: -2rem;
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
    content: "";
    background-color: #e5e5e5;
    border: #525252 solid 0;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #1f1f1f;
    background-color: #1f1f1f;
}

.custom-checkbox .custom-control-label::after,
.custom-checkbox .custom-control-label::before,
.custom-radio .custom-control-label::after,
.custom-radio .custom-control-label::before {
    left: 0;
}

.custom-control-label::after {
    position: absolute;
    top: .1875rem;
    left: -2rem;
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    content: "";
    background: no-repeat 50%/10px 8px;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3e%3cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9 1L3.5 7L1 4.27273'/%3e%3c/svg%3e);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: none;
}

#color66 {
    background: #f2dcb2;
}

#color28 {
    background: #000002;
}

#color46 {
    background: #683c28;
}

#color5 {
    background: #995556;
}

#color16 {
    background: #ccb292;
}

.nav-item .active,
.list-styled-link.active {
    color: #af0800;
    font-weight: bold;
}

/* Число панелей на цветной плашке. Белые цифры с тенью терялись на светлых
   цветах (Blanco, Crema, Gris claro) — тёмная подложка читается на любом. */
.custom-control.custom-control-color .count {
    display: inline-block;
    min-width: 1.75em;
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    line-height: 1.5;
    text-shadow: none;
}


/* Фильтры каталога на телефоне
   ------------------------------------------------------------------------ */

/*
 * Ниже 768px панель фильтров (#filter-panel) свёрнута за кнопкой над сеткой,
 * иначе первая панель начиналась на третьем экране. Кнопку прячет d-md-none
 * в разметке, а правило свёртки живёт только в media — на десктопе панель
 * открыта всегда, что бы ни лежало в классе is-open.
 */
.catalog-filter-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    background: var(--ffj-grey-02);
    color: #24262b;
    font-weight: 600;
    text-align: left;
}

.catalog-filter-toggle:hover,
.catalog-filter-toggle:focus {
    color: var(--ffj-red-02);
}

.catalog-filter-toggle__count {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--ffj-red-01);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.catalog-filter-toggle__arrow {
    margin-left: auto;
    font-size: 12px;
    transition: transform .2s ease;
}

.catalog-filter-toggle[aria-expanded="true"] .catalog-filter-toggle__arrow {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    .filters-block:not(.is-open) {
        display: none;
    }

    .filters-block.is-open {
        margin-top: 12px;
    }
}