:root {
    --sticky-top: 0px !important;
}

.site-header {
    position: relative !important;
    top: auto !important;
}

html.js .results-top,
.results-top {
    padding-block: 0.5rem !important;
}

html.js .results-head {
    flex: 0 0 auto;
    min-width: 0;
}

html.js .results-title {
    flex: 0 1 auto;
    min-width: 0;
}

html.js .results-title h1 {
    flex: 0 1 auto;
    min-width: 0;
}

html.js .results-title-button {
    max-width: none;
}

@media (min-width: 64rem) {
    html.js .results-title-text {
        max-width: min(34rem, 42vw);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 64rem) {
    .ad-aside {
        top: var(--sp-4) !important;
        max-height: calc(100dvh - 2 * var(--sp-4)) !important;
    }

    .oe-page .oe-account-nav {
        top: var(--sp-5) !important;
    }
}

@media (max-width: 63.999rem) {
    .crumbs-band--sticky {
        top: 0 !important;
    }
}

.glance-toasts {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

.glance-sonner-root [data-sonner-toast][data-y-position="top"] {
    --y-offset: calc(var(--tl-top-offset, 12px) + env(safe-area-inset-top, 0px)) !important;
}

@media (max-width: 63.999rem) {
    html.js .results-top {
        position: sticky;
        top: 0;
        z-index: 30;
        border-bottom: 1px solid var(--line);
        background: var(--paper);
    }

    .crumbs-band--sticky {
        position: relative;
        top: auto;
        z-index: auto;
    }
}

/* Keep the title, count, sort and alert on the same vertical centre. */
html.js .results-top {
    align-items: center;
}

html.js .results-top .results-title {
    align-items: center;
    align-self: center;
}

html.js .results-top .results-title h1 {
    display: flex;
    align-items: center;
    line-height: 1;
}

html.js .results-top .results-title-button {
    align-items: center;
}

html.js .results-top .results-count {
    align-self: center;
    line-height: 1;
}

html.js .results-top .results-sort {
    align-items: center;
}

/* Desktop: active filter chips sit in the title row, between the title/count
   and the sort control. They scroll sideways when they do not fit. */
html.js .results-top .results-filterbar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

html.js .results-filter-scroll {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.18rem;
}

html.js .results-filter-chips {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

html.js .results-filter-chips::-webkit-scrollbar {
    display: none;
}

html.js .results-filter-nav {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0.3rem;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}

html.js .results-filter-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

html.js .results-filter-nav .gi {
    width: 0.8rem;
    height: 0.8rem;
}

@media (min-width: 64rem) {
    html.js .results-filter-scroll.is-overflowing .results-filter-nav {
        display: inline-flex;
    }
}

/* Mobile: the same chips become a separate, single-line scroll row under the
   title. They never wrap; the arrows are replaced by touch scrolling. */
@media (max-width: 63.999rem) {
    html.js .results-top .results-filterbar {
        width: 100%;
        margin-top: 0.3rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--line);
    }

    html.js .results-filter-nav {
        display: none !important;
    }
}

html.js .results-filter-chips .chip {
    flex: 0 0 auto;
    height: 1.7rem;
    min-height: 1.7rem;
    max-width: 16rem;
    padding: 0 0.3rem 0 0.45rem;
    gap: 0.2rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
}

html.js .results-filter-chips .chip .gi {
    width: 0.7rem;
    height: 0.7rem;
}

html.js .results-filter-open {
    min-height: 1.7rem;
    padding-inline: 0.5rem 0.6rem;
    font-size: 0.68rem;
}

html.js .results-filter-clear {
    font-size: 0.68rem;
}

/* Breadcrumb links use the same compact hover language as the home category
   buttons. The band sits above the sticky results title so its hover menu can
   open over the title row instead of disappearing underneath it. */
.crumbs-band {
    z-index: 35 !important;
}

.crumbs-band .crumbs > li > a,
.crumbs-band .crumbs > li[aria-current] > span {
    min-height: 1.9rem;
    padding-inline: 0.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

.crumbs-band .crumbs > li > a.crumbs-home {
    min-height: 1.9rem;
    padding-inline: 0.4rem;
    border-radius: 6px;
}

.crumbs-band .crumbs > li > a:hover,
.crumbs-band .crumbs > li > a:focus-visible,
.crumbs-band .crumbs > li.has-crumb-menu:hover > a,
.crumbs-band .crumbs > li.has-crumb-menu:focus-within > a,
.crumbs-band .crumbs > li.has-crumb-menu:hover > span,
.crumbs-band .crumbs > li.has-crumb-menu:focus-within > span {
    border-color: var(--osc-rule-strong, var(--line-strong));
    background: var(--osc-chrome-hover, var(--sunk));
    color: var(--osc-ink, var(--ink));
    text-decoration: none;
}

.crumbs-band .crumbs > li[aria-current] > span {
    padding-inline: 0.5rem;
}