/************* Retailer inventory page *************/

/* The grid, pagination and footer match the browse hub (hub.css), which is the
   same shape: a paginated grid of .wineCard. The filter rail is the one part
   that has no precedent on the site, so the container is wider than the usual
   960px to leave the grid room for three cards beside it. */

#retailer {
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: 40px 20px 60px;
}

/************* Breadcrumb *************/

#retailerBreadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
}

#retailerBreadcrumbList {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.retailerBreadcrumbListItem {
    color: #8C8D8B;
}

.retailerBreadcrumbListItem:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: #CCC;
}

.retailerBreadcrumbListItemLink {
    color: var(--primary);
    text-decoration: none;
}

.retailerBreadcrumbListItemLink:hover {
    text-decoration: underline;
}

.retailerBreadcrumbListItemCurrent {
    color: #333;
    font-weight: 600;
}

/************* Header *************/

#retailerHeader {
    margin-bottom: 28px;
}

#retailerHeaderTitle {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 8px;
}

#retailerHeaderMeta {
    font-size: 15px;
    color: #555;
}

/************* Body layout *************/

#retailerBody {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/************* Filters *************/

#retailerFiltersToggle {
    display: none;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #EBEBEA;
    border-radius: 6px;
    background: #FFF;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

#retailerFiltersToggle:hover {
    border-color: var(--primary);
}

#retailerFiltersPanelClear {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--primary);
}

#retailerFiltersPanelClear:hover {
    text-decoration: underline;
}

.retailerFiltersPanelGroup {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #EBEBEA;
}

.retailerFiltersPanelGroup:last-child {
    border-bottom: 0;
}

.retailerFiltersPanelGroupTitle {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8C8D8B;
    margin-bottom: 10px;
}

.retailerFiltersPanelGroupList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.retailerFiltersPanelGroupItem {
    margin-bottom: 6px;
}

/* the fold: options past the first few are rendered but hidden until the group is
   opened, so "Show all" needs no second request */
.retailerFiltersPanelGroupItemFolded {
    display: none;
}

.retailerFiltersPanelGroup.active .retailerFiltersPanelGroupItemFolded {
    display: block;
}

.retailerFiltersPanelGroupItemLink {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    text-decoration: none;
}

.retailerFiltersPanelGroupItemLink:hover {
    color: var(--primary);
}

.retailerFiltersPanelGroupItem.active .retailerFiltersPanelGroupItemLink {
    font-weight: 600;
    color: var(--primary);
}

.retailerFiltersPanelGroupMore {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
}

.retailerFiltersPanelGroupMore:hover {
    text-decoration: underline;
}

/************* Results *************/

#retailerResultsCount {
    margin-bottom: 14px;
    font-size: 15px;
    color: #555;
}

#retailerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* the cards inside #retailerGrid are the shared .wineCard component (wine-card.css) */

/* the empty message is rendered in place of the cards, so it is a grid item and
   has to span the whole row rather than sit in one 280px column */
#retailerGridEmpty {
    grid-column: 1 / -1;
    font-size: 15px;
    color: #555;
}

/************* Pagination *************/

#retailerPagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
}

#retailerPagination:empty {
    display: none;
}

.retailerPaginationLink {
    display: inline-block;
    min-width: 38px;
    padding: 8px 10px;
    border: 1px solid #EBEBEA;
    border-radius: 6px;
    color: var(--primary);
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.retailerPaginationLink:hover {
    border-color: var(--primary);
}

/************* Footer *************/

#retailerFooter {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #EBEBEA;
}

#retailerFooterDisclaimer {
    font-size: 12px;
    color: #8C8D8B;
    line-height: 1.6;
    margin: 0;
}

/************* Mobile *************/

@media (max-width: 800px) {
    #retailerHeaderTitle {
        font-size: 24px;
    }

    #retailerBody {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #retailerFiltersToggle {
        display: block;
    }

    /* collapsed by default on a phone so the wines are not pushed below a
       screenful of filters; the toggle adds .active */
    #retailerFiltersPanel {
        display: none;
        margin-top: 14px;
    }

    #retailerFiltersPanel.active {
        display: block;
    }

    #retailerGrid {
        grid-template-columns: 1fr;
    }
}