/*
 * Catalog listing surfaces (category, search) on the Inter/Zinc token system.
 * Matched to the Figma "Shop / Category" screen (file 1T8btiNYCKtIVdcZHZ3xa8).
 * Replaces the catalog rules from the retired assets/styles/shop.css; the
 * product card + price + stock badge here are shared with the home favorites
 * row and the product-detail listing bits.
 */

/* ============================================================ Layout */

.lst {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .lst {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================ Facets */

.facets {
    position: sticky;
    top: 20px;
}

/* On desktop the filter column is sticky. A filter list taller than the screen
   would otherwise pin to the top and keep its lower groups below the fold until
   you'd scrolled past every product (the tall grid cell that anchors the
   sticky) - so cap the column to the viewport and let it scroll on its own.
   Scoped to desktop so the mobile filter drawer (which scrolls its own panel)
   is untouched. The 8px inline padding contains the facet rows' -8px hover
   bleed inside the scroll box (no stray horizontal scrollbar) and the matching
   negative margin pulls it back so the column keeps its width and alignment. */
@media (min-width: 901px) {
    .facets {
        box-sizing: border-box;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        padding: 0 12px;
        margin: 0 -12px;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border-strong) transparent;
    }

    .facets::-webkit-scrollbar {
        width: 10px;
    }

    .facets::-webkit-scrollbar-thumb {
        background-color: var(--color-border-strong);
        background-clip: padding-box;
        border: 3px solid transparent;
        border-radius: var(--radius-full);
    }

    .facets::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-text-muted);
    }
}

.facets__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border-default);
}

.facets__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.facets__clear {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-brand);
    text-decoration: none;
}

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

.facets__group {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-default);
}

.facets__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.facets__summary::-webkit-details-marker {
    display: none;
}

.facets__chev {
    color: var(--color-text-muted);
    transition: transform 150ms ease;
}

.facets__group[open] .facets__chev {
    transform: rotate(180deg);
}

.facets__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 14px 0 2px;
    padding: 0;
    list-style: none;
}

.facet-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-secondary);
}

.facet-opt:hover {
    background: var(--color-bg-subtle);
}

.facet-opt__box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 5px;
    background: var(--color-bg-surface) center / 11px no-repeat;
}

.facet-opt.is-selected .facet-opt__box {
    border-color: var(--color-bg-brand);
    background-color: var(--color-bg-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4.6 4.4 8 11 1.3'/%3E%3C/svg%3E");
}

.facet-opt__label {
    flex: 1 1 auto;
    font-size: var(--text-base);
    line-height: 18px;
}

.facet-opt.is-selected .facet-opt__label {
    color: var(--color-text-primary);
    font-weight: 500;
}

.facet-opt__count {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ============================================================ Toolbar */

.lst__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.lst__count {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.lst__tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Sort dropdown - JS-free <details> */
.lst-sort {
    position: relative;
}

.lst-sort__dd > summary {
    list-style: none;
}

.lst-sort__dd > summary::-webkit-details-marker {
    display: none;
}

.lst-sort__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.lst-sort__btn:hover {
    background: var(--color-bg-subtle);
}

.lst-sort__muted {
    color: var(--color-text-muted);
    font-weight: 400;
}

.lst-sort__caret {
    color: var(--color-text-muted);
    transition: transform 150ms ease;
}

.lst-sort__dd[open] .lst-sort__caret {
    transform: rotate(180deg);
}

.lst-sort__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 208px;
    padding: 6px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
}

.lst-sort__menu a {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.lst-sort__menu a:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
}

.lst-sort__menu a[aria-current] {
    background: var(--color-bg-brand-subtle);
    color: var(--color-text-brand);
    font-weight: 600;
}

/* View toggle */
.lst-view {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.lst-view__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border-radius: 6px;
    color: var(--color-text-muted);
}

.lst-view__btn:hover {
    color: var(--color-text-secondary);
}

.lst-view__btn[aria-current] {
    background: var(--color-bg-surface);
    color: var(--color-text-brand);
    box-shadow: var(--shadow-sm);
}

/* ============================================================ Product grid */

.lst__grid {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lst__grid[data-view='raster'] {
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.lst__grid[data-view='lijst'] {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* Product card */
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.pcard:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-overlay);
    transform: translateY(-2px);
}

.pcard__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-subtle);
    overflow: hidden;
    text-decoration: none;
}

.pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Blends the white photo background into the grey media tile so the
       product floats without a visible white box. */
    mix-blend-mode: multiply;
}

.pcard__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.pcard__placeholder .ui-icon {
    color: var(--color-border-strong);
}

.pcard__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
}

.pcard__brand {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pcard__name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 20px;
    color: var(--color-text-primary);
    text-decoration: none;
}

.pcard__name:hover {
    color: var(--color-text-brand);
}

.pcard__sku {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.pcard .ui-badge {
    align-self: flex-start;
    margin-top: 2px;
}

/* Merchandising deal label (home favorites row) */
.deal-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #fff;
    background: var(--color-bg-brand);
}

.deal-label--nieuw {
    background: var(--color-status-info-fg);
}

.deal-label--actie {
    background: var(--color-status-danger-solid);
}

/* Card price */
.pcard-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    margin: 4px 0 0;
}

.pcard-price__amount {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
}

.pcard-price__unit {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.pcard-price__sub {
    flex-basis: 100%;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.pcard-price--request {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pcard-price-gate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.pcard-price-gate .ui-icon {
    color: var(--color-text-muted);
}

.pcard-price-gate a {
    color: var(--color-text-brand);
    font-weight: 500;
    text-decoration: none;
}

.pcard-price-gate a:hover {
    text-decoration: underline;
}

/* List view variant - fixed uniform thumbnail so every row matches height */
.lst__grid[data-view='lijst'] .pcard {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    align-items: center;
}

.lst__grid[data-view='lijst'] .pcard__media {
    width: 184px;
    height: 152px;
    aspect-ratio: auto;
}

.lst__grid[data-view='lijst'] .pcard__body {
    justify-content: center;
    padding: 18px 24px;
}

/* ============================================================ Empty + pagination */

.lst__empty {
    padding: 48px 40px;
    text-align: center;
    background: var(--color-bg-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
}

.lst__empty p {
    margin: 0;
}

.lst__empty-hint {
    margin-top: 6px;
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 34px;
}

.pager__num,
.pager__edge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.pager__num:hover,
.pager__edge:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.pager__num.is-current {
    background: var(--color-bg-brand);
    border-color: var(--color-bg-brand);
    color: var(--color-text-on-brand);
}

.pager__gap {
    padding: 0 4px;
    color: var(--color-text-muted);
}

/* ============================================================ Filters: sidebar / drawer
   On desktop the two wrappers collapse via display:contents, so .facets is the
   grid column directly (keeping its sticky behaviour); the drawer chrome (bar,
   overlay) and the toolbar "Filters" button are hidden. On mobile the wrapper
   becomes an off-canvas drawer toggled by that button - or, with JS off, the
   facets fall back to an inline block below the products. */

.lst__facets,
.lst__facets-panel {
    display: contents;
}

.lst__facets > .shop-drawer__overlay,
.lst__facets-bar,
.lst-filter-btn {
    display: none;
}

/* ============================================================ Responsive */

@media (max-width: 900px) {
    /* No-JS fallback: facets stay inline, but show products first (the sidebar
       is first in the DOM) and drop the filters, un-stuck, below them. */
    html:not([data-js]) .lst__results {
        order: 1;
    }

    html:not([data-js]) .facets {
        order: 2;
        position: static;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--color-border-default);
    }

    /* With JS: the filters live in a right-hand off-canvas drawer. */
    [data-js] .lst__facets {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100;
    }

    [data-js] .lst__facets.is-open {
        display: block;
    }

    [data-js] .lst__facets > .shop-drawer__overlay {
        display: block;
    }

    [data-js] .lst__facets-panel {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset: 0 0 0 auto;
        width: min(88vw, 340px);
        background: var(--color-bg-surface);
        box-shadow: var(--shadow-overlay);
        overflow-y: auto;
        animation: shop-drawer-slide-r 200ms ease;
    }

    [data-js] .lst__facets-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 14px 16px;
        background: var(--color-bg-surface);
        border-bottom: 1px solid var(--color-border-default);
    }

    .lst__facets-bar .shop-drawer__title {
        margin-right: auto;
    }

    .lst__facets-clear {
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--color-text-brand);
        text-decoration: none;
    }

    /* The drawer bar carries the title + clear, so hide the in-aside head. */
    [data-js] .lst__facets-panel .facets__head {
        display: none;
    }

    [data-js] .lst__facets-panel .facets {
        position: static;
        padding: 4px 16px 28px;
    }

    /* Toolbar "Filters" trigger (mirrors the sort button). */
    [data-js] .lst-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--color-text-primary);
        cursor: pointer;
        white-space: nowrap;
    }

    [data-js] .lst-filter-btn:hover {
        background: var(--color-bg-subtle);
    }

    .lst-filter-btn__dot {
        width: 7px;
        height: 7px;
        border-radius: var(--radius-full);
        background: var(--color-bg-brand);
    }

    .lst__tools {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 560px) {
    /* Toolbar: result count on one row, the tools spread across the next. */
    .lst__toolbar {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .lst__tools {
        width: 100%;
        justify-content: space-between;
    }

    /* Two-up cards read better than one giant card per row on a phone. */
    .lst__grid[data-view='raster'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Shrink the fixed list-view thumbnail so the body keeps usable width. */
    .lst__grid[data-view='lijst'] .pcard {
        grid-template-columns: 116px minmax(0, 1fr);
    }

    .lst__grid[data-view='lijst'] .pcard__media {
        width: 116px;
        height: 116px;
    }

    .lst__grid[data-view='lijst'] .pcard__body {
        padding: 14px 16px;
    }
}