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

/* Samenvattingszin onder de categoriekop: aantal, goedkoopste, peildatum.
   Bewust gewone lopende tekst en geen badge of banner — hij moet als zin
   gelezen kunnen worden, door een bezoeker én door een extractor. */
.vs-cat-samenvatting {
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 1.6;
}
.vs-cat-samenvatting a { color: inherit; text-decoration: underline; }
.vs-cat-samenvatting__peiling { color: var(--vs-muted, #6b7280); }

/* Subcategorie-tiles */
.vs-subcat-tiles {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 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";
}

/* Tussenvorm: bij twee of drie subcategorieen alleen tekstlinks */
.vs-subcat-links {
    margin: 0 0 28px;
}

.vs-subcat-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

.vs-subcat-links__link {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--vs-border, #e5e5e5);
    border-radius: 999px;
    background: var(--vs-surface, #fff);
    color: inherit;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.3;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vs-subcat-links__link:hover {
    border-color: var(--vs-color-primary, #1a1a1a);
    box-shadow: var(--vs-shadow-sm, 0 4px 14px rgba(0, 0, 0, .1));
}

/*
 * Volledige subcategorie-lijst onder het grid (Archive\SubcategoryLinkList).
 * Staat lager op de pagina dan de tegelrij en is aanvullende navigatie, dus
 * bewust rustiger: kleinere pillen en een kop die niet met de H1 concurreert.
 */
.vs-subcat-links--volledig {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--vs-border, #e5e5e5);
}

.vs-subcat-links__title {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
}

.vs-subcat-links--volledig .vs-subcat-links__list {
    gap: 8px;
}

.vs-subcat-links--volledig .vs-subcat-links__link {
    padding: 6px 13px;
    font-size: 14px;
}

/* 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 */
.vs-archive-faq {
    margin: 36px 0;
}

.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 — één stijl voor de server-render (thema-template
   loop/pagination.php) en de AJAX-render (FilterRestController). Blokjes in de
   kaart-taal: wit, 1px rand, zelfde afronding als de kaarten, actieve pagina
   gevuld in het huisstijl-blauw. Tapdoelen minimaal 40x40. De marge boven de
   nav is bewust ruim: de "Gratis staal"-knoppen op de onderste kaartenrij
   eindigen precies op de grid-onderrand en plakten anders tegen de cijfers. */
.vs-product-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 36px 0 10px;
}

.vs-product-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--vs-border, #e2e5ea);
    border-radius: var(--vs-radius, 10px);
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.14s, background 0.14s, color 0.14s;
}

.vs-product-pagination a.page-numbers:hover,
.vs-product-pagination a.page-numbers:focus-visible {
    border-color: var(--vs-color-primary, #324696);
    color: var(--vs-color-primary, #324696);
    background: #f4f6fb;
}

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

/* Weglatingsteken: geen blokje, gewoon een rustpunt. */
.vs-product-pagination .page-numbers.dots {
    min-width: 24px;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 400;
    color: var(--vs-color-muted, #7c828d);
}

.vs-product-pagination .page-numbers.prev svg,
.vs-product-pagination .page-numbers.next svg {
    display: block;
}

.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, 1fr);
    }
}

@media (max-width: 600px) {
    .vs-subcat-tiles {
        grid-auto-flow: column;
        grid-auto-columns: 70%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Tot de schermrand doorlopen (DLV bfe1abf). De rij stopte op de
           kantlijn van de pagina, dus de half zichtbare tegel werd afgekapt en
           daarna stond er nog een strook wit tot de rand — dat leest als een
           fout in plaats van als "hier kun je swipen". De negatieve marge trekt
           de rij naar de rand, de padding houdt de eerste tegel op de
           tekstkantlijn (thema-gutter 20px) en geeft de laatste weer lucht. */
        margin-left: calc(-1 * var(--vs-arch-gutter, 20px));
        margin-right: calc(-1 * var(--vs-arch-gutter, 20px));
        padding-left: var(--vs-arch-gutter, 20px);
        padding-right: var(--vs-arch-gutter, 20px);
        scroll-padding-left: var(--vs-arch-gutter, 20px);
    }

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

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

/* Legmethode-schakelaar boven het PVC-raster: wisselen tussen klik en plak
   zonder de aangeklikte filters te verliezen (zelfde pil-taal als de
   subcategorie-tekstlinks hierboven; actief = merkblauw gevuld). */
.vs-legwijze {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 18px;
}

.vs-legwijze__label {
    font-size: 14px;
    font-weight: 700;
    color: #2a3065;
}

.vs-legwijze__opts {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vs-legwijze__opt {
    display: inline-block;
    padding: 7px 15px;
    border: 1px solid var(--vs-border, #d9dceb);
    border-radius: 999px;
    background: var(--vs-surface, #fff);
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.3;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vs-legwijze__opt:hover {
    border-color: #324696;
    box-shadow: var(--vs-shadow-sm, 0 4px 14px rgba(0, 0, 0, .1));
}

.vs-legwijze__opt.is-actief {
    border-color: #324696;
    background: #324696;
    color: #fff;
    font-weight: 600;
}