/*
    "Browse our products by category" sidebar.

    Root categories as headings, the first eight shown and the rest folded behind a show all /
    show fewer control. This was variant B of the ?nav= trial; it won, so it is simply how the
    sidebar renders now and the variant machinery is gone.

    For reference, the design it replaced ran to 2512px collapsed on a 375px viewport - 26
    groups at 67px each. This is around 515px.
*/

/* Compact rows. The old design spent 40px of padding and a 5px divider on every row, which is
   where most of that height went. */
.products-sidebar .products-header {
    border-bottom: 1px solid #e5e5e5;
    margin-top: 0 !important;
    margin-bottom: 4px;
    padding: 11px 14px;
}

    .products-sidebar .products-header span {
        font-size: 16px;
        line-height: 1.35;
    }

    .products-sidebar .products-header .glyphicon {
        font-size: 12px;
        line-height: 1.6;
    }

.products-sidebar .products-sidebar-container {
    margin-bottom: 8px;
    margin-top: 0;
    padding: 6px 14px;
}

    .products-sidebar .products-order-list li {
        padding-bottom: 7px;
        padding-top: 7px;
    }

/* ---- Show all / show fewer ---- */

.category-sidebar-show-all {
    background-color: #fff;
    border: 1px solid #eb8b16;
    color: #eb8b16;
    display: block;
    font-size: 16px;
    margin-top: 10px;
    padding: 11px 14px;
    text-align: left;
    width: 100%;
}

    .category-sidebar-show-all:hover {
        background-color: #eb8b16;
        color: #fff;
    }

/* Groups past the leading few are hidden until show all is pressed. They stay in the DOM, so
   every category link is still there for crawlers. */
.category-sidebar-overflow {
    display: none !important;
}

/* Only the headings come back - each group's own list stays closed until it is clicked. */
.category-sidebar-expanded .products-header.category-sidebar-overflow {
    display: block !important;
}

/* The control carries both labels and only ever shows one. Without this it would still read
   "Show all N categories" with the list already open, looking like it expands rather than
   collapses. */
.category-sidebar-label-expanded {
    display: none;
}

.category-sidebar-expanded .category-sidebar-label-collapsed {
    display: none;
}

.category-sidebar-expanded .category-sidebar-label-expanded {
    display: inline;
}