/* Vloershop Core — archief-overzicht. Structuur; kleuren via CSS-variabelen. */

/* Subcategorie-tiles */
.vs-subcat-tiles {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    /* minmax(0,1fr): tegels met grote intrinsieke foto's mogen de grid nooit oprekken */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.vs-subcat-tile {
    margin: 0;
}

.vs-subcat-tile__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--vs-surface, #fff);
    border: 1px solid var(--vs-border, #e5e5e5);
    border-radius: var(--vs-radius, 8px);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.vs-subcat-tile__link:hover {
    box-shadow: var(--vs-shadow-sm, 0 4px 14px rgba(0, 0, 0, .1));
    transform: translateY(-2px);
}

.vs-subcat-tile__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.vs-subcat-tile__image--placeholder {
    background: var(--vs-border, #eee);
}

.vs-subcat-tile__label {
    padding: 12px 14px 4px;
    font-weight: 600;
}

.vs-subcat-tile__cta {
    padding: 0 14px 14px;
    color: var(--vs-color-primary, #1a1a1a);
    font-size: 14px;
}

.vs-subcat-tile__cta::after {
    content: " \2192";
}

/* Promo-tile in de productgrid */
.vs-promo-tile {
    position: relative;
    list-style: none;
    border-radius: var(--vs-radius, 8px);
    overflow: hidden;
}

.vs-promo-tile__link,
.vs-promo-tile__image {
    display: block;
    width: 100%;
    height: 100%;
}

.vs-promo-tile__image {
    object-fit: cover;
}

.vs-promo-tile__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    font-weight: 700;
    color: var(--vs-promo-text, #fff);
    background: var(--vs-promo-overlay, rgba(0, 0, 0, .45));
}

/* Lees-meer toggle op de categorie-intro */
.vs-archive-intro--clamped .term-description,
.term-description.vs-archive-intro--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vs-archive-intro__toggle {
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    color: var(--vs-color-primary, #1a1a1a);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* SEO-FAQ-accordion — zelfde contentbreedte als .vs-carch__wrap (anders
   liep de FAQ over de volle breedte zonder marge, los van de rest). */
.vs-archive-faq {
    max-width: 1440px;
    margin: 36px auto;
    padding: 0 20px;
}

.vs-archive-faq__title {
    margin: 0 0 12px;
}

.vs-archive-faq__item {
    border-bottom: 1px solid var(--vs-border, #e5e5e5);
    padding: 12px 0;
}

.vs-archive-faq__q {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.vs-archive-faq__q::-webkit-details-marker {
    display: none;
}

.vs-archive-faq__q::before {
    content: "+";
    display: inline-block;
    width: 1em;
    font-weight: 700;
}

.vs-archive-faq__item[open] .vs-archive-faq__q::before {
    content: "\2013";
}

.vs-archive-faq__a {
    padding: 8px 0 4px 1em;
}

/* Paginering onder de grid */
.vs-product-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 28px 0;
}

.vs-product-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--vs-border, #e5e5e5);
    border-radius: var(--vs-radius, 8px);
    text-decoration: none;
    color: inherit;
}

.vs-product-pagination .page-numbers.current {
    background: var(--vs-color-primary, #1a1a1a);
    color: var(--vs-color-on-primary, #fff);
    border-color: var(--vs-color-primary, #1a1a1a);
}

.vs-product-grid__empty {
    margin: 24px 0;
}

/* Pre-footer hulpblok */
.vs-archive-help {
    margin: 36px 0;
    padding: 28px;
    text-align: center;
    background: var(--vs-surface-alt, #f7f7f7);
    border-radius: var(--vs-radius, 8px);
}

.vs-archive-help__heading {
    margin: 0 0 8px;
}

.vs-archive-help__text {
    margin: 0 auto 16px;
    max-width: 52ch;
}

.vs-archive-help__button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--vs-radius, 8px);
    background: var(--vs-color-primary, #1a1a1a);
    color: var(--vs-color-on-primary, #fff);
    font-weight: 600;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .vs-subcat-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    /* Kleinere tegels zodat de volgende half in beeld staat: zo is direct
       duidelijk dat de rij horizontaal scrolt. */
    .vs-subcat-tiles {
        grid-auto-flow: column;
        grid-auto-columns: 56%;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .vs-subcat-tiles::-webkit-scrollbar { display: none; }

    .vs-subcat-tile {
        scroll-snap-align: start;
    }

    .vs-subcat-tile__label {
        padding: 9px 11px 2px;
        font-size: 14px;
    }

    .vs-subcat-tile__cta {
        padding: 0 11px 11px;
        font-size: 12.5px;
    }

    .vs-promo-tile--no-mobile {
        display: none;
    }
}