/* Divi geeft elke ul binnen een Theme Builder-lay-out een opsommingsteken en
   inspringing (`#left-area ul, .entry-content ul, .et-l--body ul, ...`). Die
   selector is een klasse plus een elementnaam: specificiteit 0-1-1. Onze eigen
   lijstregels hebben één klasse, 0-1-0, en verliezen dus altijd. Bij het
   vergelijken telt het aantal klassen zwaarder dan het aantal elementnamen, dus
   de klasse herhalen brengt ons op 0-2-0 en wint — zonder !important en zonder
   afhankelijk te worden van welke stylesheet als laatste laadt. Elke regel
   hieronder die een ul opmaakt, staat daarom dubbel. */

/* Een 1fr-kolom is minstens zo breed als zijn breedste inhoud, en de carrousel is een rij
   die niet afbreekt; minmax(0, 1fr) laat de rij binnen de kolom scrollen in plaats van de
   kolom op te rekken. */
.vai-zoek__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }

.vai-ingangen { background: var(--vai-zwart); border-radius: 6px; padding: 28px 24px; margin-bottom: 28px; }
.vai-ingangen[hidden] { display: none; }
.vai-ingangen__kop { color: #fff; text-align: center; margin: 0 0 20px; font-size: 24px; }
.vai-ingangen__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vai-ingang { background: #fff; border-top: 3px solid var(--vai-oranje); border-radius: 5px; padding: 16px; }
.vai-ingang h3 { margin: 0 0 4px; font-size: 15px; }
.vai-ingang p { margin: 0 0 10px; font-size: 13px; color: var(--vai-grijs); }
.vai-ingang input, .vai-ingang select { width: 100%; padding: 8px 10px; border: 1px solid var(--vai-lijn); border-radius: 4px; margin-bottom: 6px; }
.vai-ingang button { width: 100%; background: var(--vai-oranje); color: #fff; border: 0; border-radius: 4px; padding: 9px; font-weight: 700; cursor: pointer; }
.vai-ingang__categorieen.vai-ingang__categorieen { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.9; }

.vai-filter { border: 1px solid var(--vai-lijn); border-radius: 5px; padding: 14px; margin-bottom: 14px; background: #fff; }
.vai-filter h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.vai-filter input { width: 100%; padding: 8px 10px; border: 1px solid var(--vai-lijn); border-radius: 4px; }
.vai-cats.vai-cats, .vai-filter__merken.vai-filter__merken { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.8; }
.vai-cats--n2.vai-cats--n2 { padding-left: 12px; }
.vai-cats--n3.vai-cats--n3 { padding-left: 24px; font-size: 13px; }
.vai-cats--n4.vai-cats--n4 { padding-left: 36px; font-size: 13px; }
.vai-cats a, .vai-filter__merken a { color: var(--vai-tekst); text-decoration: none; }
.vai-cats a.is-actief, .vai-filter__merken a.is-actief { color: var(--vai-oranje); font-weight: 700; }
/* Hoofdcategorie zonder treffers in de huidige zoekopdracht. Blijft klikbaar —
   je wisselt er de zoekterm mee van categorie — maar valt niet op. */
.vai-cats a.is-leeg { opacity: .45; }
.vai-cats span, .vai-filter__merken span { color: #aaa; }

/* De opmaak van .vai-zoekbalk staat in vai-frontend.css: de shortcode
   [vai_zoekbalk] zet dezelfde balk ook buiten de zoekpagina neer. */

/* Het kruimelpad staat bóven de chips: eerst waar je bent, dan wat je eraf kunt halen.
   Dubbele klasse op de lijst omdat Divi anders zijn eigen opsomming-opmaak wint. */
.vai-kruimels { margin: 0 0 10px; font-size: 13px; color: var(--vai-grijs); }
.vai-kruimels__lijst.vai-kruimels__lijst { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; }
.vai-kruimels li { display: inline-flex; align-items: center; }
.vai-kruimels li::after { content: '›'; margin-left: 6px; color: var(--vai-lijn); }
.vai-kruimels li:last-child::after { content: ''; margin-left: 0; }
.vai-kruimels a { color: var(--vai-grijs); text-decoration: none; }
.vai-kruimels a:hover { color: var(--vai-oranje); text-decoration: underline; }
.vai-kruimels [aria-current='page'] { color: var(--vai-tekst); font-weight: 600; }

.vai-chips.vai-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; }
.vai-chips a { display: inline-block; background: var(--vai-oranje); color: #fff; border-radius: 20px; padding: 5px 12px; font-size: 13px; text-decoration: none; }
.vai-chips__wis a { background: none; color: var(--vai-grijs); text-decoration: underline; }

.vai-resultaten__balk { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 4px; font-size: 14px; color: var(--vai-grijs); margin-bottom: 14px; }
/* Het aantal gevonden artikelen links, de twee keuzes rechts ernaast: met auto-marge
   blijft dat kloppen of er nu twee of drie blokken in de balk staan. Op een smal scherm
   breekt de balk af; flex-end houdt de keuzes dan ook op de tweede regel rechts, want een
   auto-marge werkt alleen binnen de regel waarin ze staat. */
.vai-resultaten__balk > :first-child { margin-right: auto; }
.vai-sorteer a { margin-left: 12px; color: var(--vai-grijs); text-decoration: none; }
.vai-sorteer a.is-actief { color: var(--vai-oranje); font-weight: 700; }
.vai-perpagina { margin-left: 18px; }
.vai-perpagina__label { color: var(--vai-grijs); }
.vai-perpagina a { margin-left: 8px; color: var(--vai-grijs); text-decoration: none; }
.vai-perpagina a.is-actief { color: var(--vai-oranje); font-weight: 700; }

.vai-raster.vai-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vai-item a { display: block; border: 1px solid var(--vai-lijn); border-radius: 5px; overflow: hidden; text-decoration: none; color: var(--vai-tekst); height: 100%; transition: border-color .15s; }
.vai-item a:hover { border-color: var(--vai-oranje); }
/* De hele foto tonen, niet een uitsnede. We vragen het medium-formaat op, dat de
   verhouding bewaart — maar dan verschilt de hoogte per foto en wordt het raster
   rafelig. Een vast vak van 4:3 eromheen houdt de kaarten gelijk, en
   object-fit: contain past de foto er heel binnen in plaats van hem bij te snijden.
   Dubbele klasse omdat Divi anders zijn eigen height op img wint. */
.vai-item__foto.vai-item__foto { display: block; aspect-ratio: 4 / 3; background: #fff; }
.vai-item__foto.vai-item__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vai-item__titel { display: block; padding: 10px 12px 2px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.vai-item__nr { display: block; padding: 0 12px; font-size: 12px; color: var(--vai-grijs); }
/* De machinekaart: bouwjaar, draaiuren en voorraadnummer onder de titel, waar een onderdeel zijn
   nummer heeft. Elk kenmerk een eigen blokje, zodat een smalle kaart ze heel laat doorlopen in
   plaats van midden in "11.560 uur" af te breken. */
.vai-item__kenmerken { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 0 12px; font-size: 12px; color: var(--vai-grijs); }
.vai-item__kenmerken span { white-space: nowrap; }
.vai-item__poa { display: block; padding: 6px 12px 12px; font-size: 12px; font-style: italic; color: var(--vai-grijs); }

.vai-paginering { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.vai-paginering a { padding: 8px 13px; border: 1px solid var(--vai-lijn); border-radius: 4px; text-decoration: none; color: var(--vai-tekst); }
.vai-paginering a.is-actief { background: var(--vai-oranje); border-color: var(--vai-oranje); color: #fff; }
.vai-paginering__gat { padding: 8px 4px; color: var(--vai-grijs); }

/* De carrousel met categorietegels. Eén rij die horizontaal scrolt en per tegel vastklikt
   (scroll-snap): swipen op een telefoon werkt daarmee vanzelf, en zonder JavaScript blijft hij
   scrollbaar. De pijltjes zijn een aanvulling en staan standaard op hidden; het script zet ze aan. */
.vai-carrousel { position: relative; margin: 0 0 18px; }
.vai-carrousel__baan.vai-carrousel__baan { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.vai-tegel { flex: 0 0 calc((100% - 5 * 12px) / 6); scroll-snap-align: start; }
.vai-tegel__vak { display: block; height: 100%; border: 1px solid var(--vai-lijn); border-radius: 5px; overflow: hidden; background: #fff; color: var(--vai-tekst); text-align: center; text-decoration: none; transition: border-color .15s; }
a.vai-tegel__vak:hover { border-color: var(--vai-oranje); }
.vai-tegel.is-actief .vai-tegel__vak { border: 2px solid var(--vai-oranje); }
/* Dubbele klasse: Divi zet anders zijn eigen hoogte op img. */
.vai-tegel__foto.vai-tegel__foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #f4f4f4; color: #b5b5b5; }
.vai-tegel__foto.vai-tegel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vai-tegel__foto svg { width: 42%; height: 42%; }
.vai-tegel__naam { display: block; padding: 7px 6px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.vai-tegel__aantal { color: var(--vai-grijs); font-weight: 400; }
.vai-carrousel__pijl { position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--vai-zwart); color: #fff; font-size: 22px; line-height: 34px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.vai-carrousel__pijl--vorige { left: 4px; }
.vai-carrousel__pijl--volgende { right: 4px; }
.vai-carrousel__pijl[hidden] { display: none; }

@media (max-width: 1024px) {
    .vai-tegel { flex-basis: calc((100% - 3 * 12px) / 4); }
}

@media (max-width: 640px) {
    /* Twee en een halve tegel: de halve laat zien dat er meer is. */
    .vai-tegel { flex-basis: calc((100% - 2 * 12px) / 2.5); }
}

.vai-leeg { padding: 32px; text-align: center; color: var(--vai-grijs); background: var(--vai-vlak); border-radius: 5px; }

/* De knop is alleen zinvol als JavaScript hem kan bedienen, en alleen op smalle
   schermen. De zichtbaarheid zit daarom in CSS en niet in een attribuut: een
   attribuut overleeft de AJAX-vervanging van de zijbalk niet. */
.vai-zijbalk__schakel { display: none; }

@media (max-width: 980px) {
    .vai-zoek__body { grid-template-columns: minmax(0, 1fr); }
    .vai-ingangen__rij { grid-template-columns: 1fr; }
    .vai-raster.vai-raster { grid-template-columns: repeat(2, 1fr); }

    .vai-zoek.is-js .vai-zijbalk__schakel {
        display: block;
        width: 100%;
        padding: 12px;
        border: 1.5px solid var(--vai-zwart);
        border-radius: 4px;
        background: #fff;
        font-weight: 700;
        cursor: pointer;
    }
    .vai-zoek.is-js .vai-zijbalk__inhoud { display: none; }
    .vai-zoek.is-js .vai-zijbalk.is-open .vai-zijbalk__inhoud { display: block; margin-top: 12px; }
}

@media (max-width: 520px) {
    .vai-raster.vai-raster { grid-template-columns: 1fr; }
}

.vai-zoek.is-bezig .vai-zoek__body { opacity: .55; transition: opacity .12s; }

/* Uitklapblok met de merken die niet in de eerste vijftien passen. Een <details>,
   zodat het ook zonder JavaScript opengaat. De ouderklasse verslaat Divi's
   eigen opmaak voor summary. */
.vai-filter .vai-filter__meer { margin-top: 6px; }
.vai-filter .vai-filter__meer > summary { cursor: pointer; font-size: 13px; color: var(--vai-oranje); list-style: none; padding: 4px 0; }
.vai-filter .vai-filter__meer > summary::-webkit-details-marker { display: none; }
.vai-filter .vai-filter__meer > summary::before { content: '+ '; font-weight: 700; }
.vai-filter .vai-filter__meer[open] > summary::before { content: '\2212\00a0'; }
.vai-filter .vai-filter__meer > summary:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Divi's globale linkkleur binnen onze eigen onderdelen terugdringen.

   Met een linkkleur in Thema-opties zet Divi deze regel neer:
       a, .et-db #et-boc .et-l a { color: #ff6c00; }
   Het tweede deel telt een id (#et-boc) en komt op (1,2,1). Onze regels als
   `.vai-cats a` staan op (0,1,1), en omdat het aantal id's het zwaarst weegt
   kan geen enkele selector met alleen klassen daar nog overheen.

   Op de winkelpagina merk je er niets van: dat is een gewone pagina, onze inhoud
   valt buiten .et-l en alleen het zwakke `a` (0,0,1) geldt. Een categoriearchief
   heeft geen pagina en loopt via een Theme Builder-sjabloon — dán zit onze inhoud
   er wel in en kleurt alles oranje. Vandaar dat het alleen daar misging.

   Hieronder dezelfde voorvoegsels, wat ons op (1,3,1) brengt. Geen !important:
   dit blijft dezelfde manier van winnen als de rest van dit bestand. Alleen de
   kleur wordt herhaald — al het andere uit de oorspronkelijke regels blijft staan.
   --------------------------------------------------------------------------- */
.et-db #et-boc .et-l .vai-cats a,
.et-db #et-boc .et-l .vai-filter__merken a { color: var(--vai-tekst); }
.et-db #et-boc .et-l .vai-cats a.is-actief,
.et-db #et-boc .et-l .vai-filter__merken a.is-actief { color: var(--vai-oranje); }

/* Wit op oranje: zonder deze regel wordt de tekst oranje op oranje en dus onleesbaar. */
.et-db #et-boc .et-l .vai-chips a { color: #fff; }
.et-db #et-boc .et-l .vai-paginering a.is-actief { color: #fff; }

.et-db #et-boc .et-l .vai-chips__wis a,
.et-db #et-boc .et-l .vai-kruimels a { color: var(--vai-grijs); }
.et-db #et-boc .et-l .vai-kruimels a:hover { color: var(--vai-oranje); }
.et-db #et-boc .et-l .vai-sorteer a { color: var(--vai-grijs); }
.et-db #et-boc .et-l .vai-sorteer a.is-actief { color: var(--vai-oranje); }
.et-db #et-boc .et-l .vai-perpagina a { color: var(--vai-grijs); }
.et-db #et-boc .et-l .vai-perpagina a.is-actief { color: var(--vai-oranje); }
.et-db #et-boc .et-l .vai-item a,
.et-db #et-boc .et-l .vai-paginering a { color: var(--vai-tekst); }
.et-db #et-boc .et-l .vai-tegel__vak { color: var(--vai-tekst); }