/* === BASIS: pagina mag niet horizontaal scrollen === */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* === AFBEELDINGEN: netjes schalen binnen hun container === */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Eventueel wat strenger in de hoofdcontent */
#content img,
.tabelmidden img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === TABELLEN: lopen niet van de pagina af === */
table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;          /* kolommen worden niet idioot breed */
    word-wrap: break-word;
}

td,
th {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Hoofdcontent-tabel extra veilig */
#content table,
.tabelmidden table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

/* === FORMULIEREN & VELDEN: passen in kolommen === */
form {
    max-width: 100%;
}

input,
textarea,
select {
    max-width: 100%;
}

/* === HEADER ICONEN RECHTS (zoek / winkelwagen / user) === */
.shoppingbasket .fa {
    color: #fff !important;
}

/* === SLIDER PIJLEN (#slidere) ZEKER KLIKBAAR HOUDEN === */
/* Dit grijpt alleen op jouw slider in, niet op de rest van de site */

#slidere {
    position: relative;
}

/* Viewport blijft onder de pijlen */
#slidere .slider-viewport {
    position: relative;
    z-index: 1;
}

/* Navigatieknoppen bovenop en klikbaar */
#slidere .nav-btn {
    position: absolute;     /* staat ook al in je inline CSS, maar dit bevestigt het */
    z-index: 10;            /* hoger dan de inhoud van de slider */
    pointer-events: auto;   /* expliciet klikken toestaan */
}
/* === CATEGORY CARDS: strakke vaste vorm === */

.artikelcatoverzicht .card {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0; /* we regelen padding zelf */
}

/* afbeelding-zone: vaste hoogte, midden gecentreerd */
.product-image-wrapper {
    height: 200px;                 /* ← vaste hoogte voor ALLE tegels */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 12px;
}

.product-image {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
}

/* tekstzone */
.artikelcatoverzicht .info {
    padding: 12px 10px;
    min-height: 48px;              /* zorg dat titels altijd gelijk staan */
}

.artikelcatoverzicht .info .text1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* max 2 regels titel */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
}

/* prijszone onderin */
.artikelcatoverzicht .cost {
    margin-top: auto;              /* duwt prijs/knop naar onder in de kaart */
    padding-bottom: 16px;
}

/* knoppen netjes houden */
.artikelcatoverzicht form {
    padding: 0 12px 16px;
}

/* lichte hover zonder drukte */
.artikelcatoverzicht .card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
    transition: all .2s ease;
}
/* BESTELLEN-knop groen maken */
.artikelcatoverzicht form input[type="submit"],
.artikelcatoverzicht form button,
.artikelcatoverzicht form .button,
.artikelcatoverzicht form .btn {
    background-color: #28a745 !important;   /* mooi groen */
    border-color: #28a745 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
}

/* =================================================
   CATEGORIE – BESTELLEN KNOP 100% STABIEL (GEEN SPRONG)
   ================================================= */

.artikelcatoverzicht form input[type="submit"],
.artikelcatoverzicht form button,
.artikelcatoverzicht form .button,
.artikelcatoverzicht form .btn {
    background-color: #28a745 !important;
    border: 1px solid #28a745 !important;
    color: #ffffff !important;

    /* VASTE MATEN – NOOIT MEER VERANDEREN */
    padding: 10px 26px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;

    box-shadow: none !important;
    transform: none !important;
    transition: background-color .15s ease !important;
}

/* Hover – ZELFDE MATEN, ALLEEN ANDERE KLEUR */
.artikelcatoverzicht form input[type="submit"]:hover,
.artikelcatoverzicht form button:hover,
.artikelcatoverzicht form .button:hover,
.artikelcatoverzicht form .btn:hover {
    background-color: #218838 !important;
    border-color: #218838 !important;
    color: #ffffff !important;

    /* EXPLICIET OPNIEUW VASTZETTEN */
    padding: 10px 26px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;

    box-shadow: none !important;
    transform: none !important;
}

/* ======================================
   WINKELWAGEN – TABEL STYLING (GEÏSOLEERD)
   ====================================== */

#content table.borderless {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    overflow: hidden;
    font-size: 14px;
}

/* Header */
#content table.borderless tr:first-child td.winkelwagenoverzicht {
    background: #f4f6fb;
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    white-space: nowrap;
}

/* Alle rijen */
#content table.borderless td.winkelwagenoverzicht {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    vertical-align: middle;
}

/* Aantal input */
#content table.borderless .aantalwinkelwagen {
    width: 70px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    text-align: center;
}

/* Productfoto's */
#content table.borderless td.winkelwagenoverzicht img {
    max-width: 120px !important;
    border-radius: 10px;
    display: block;
    object-fit: contain;
}

/* Delete icoon */
#content table.borderless td.winkelwagenoverzicht a img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    object-fit: contain;
    transition: transform .15s ease;
}

#content table.borderless td.winkelwagenoverzicht a img:hover {
    transform: scale(1.15);
}

/* Productnaam */
#content table.borderless .webshopomschrijvingtekst {
    font-weight: 600;
    font-size: 14px;
    color: #0b3e70;
    text-decoration: none;
}

#content table.borderless .webshopomschrijvingtekst:hover {
    text-decoration: underline;
}

/* Kleine info onder naam */
#content table.borderless .smalltekst.small {
    color: #6c757d;
    font-size: 12px;
}

/* Totaalprijs-cellen */
#content table.borderless td[align="right"] b {
    font-size: 15px;
    white-space: nowrap;
}
/* Info + Bestellen naast elkaar zetten in categorie-tegels */
.artikelcatoverzicht form {
    display: flex;
    justify-content: center;
    gap: 10px;               /* ruimte tussen de knoppen */
    padding: 0 12px 16px;
}

/* Zorg dat knoppen niet op 100% breedte staan */
.artikelcatoverzicht form .btn,
.artikelcatoverzicht form button,
.artikelcatoverzicht form input[type="submit"] {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* ======================================
   FIX WINKELWAGEN-TABEL (ALLEEN BORDERLESS)
   ====================================== */

/* Laat de winkelwagen zelf de kolombreedtes bepalen */
#content table.borderless {
    table-layout: auto !important;
}

/* In de winkelwagen geen agressieve woord-breking */
#content table.borderless td,
#content table.borderless th {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Header netjes op één regel, links uitgelijnd */
#content table.borderless tr:first-child td.winkelwagenoverzicht {
    white-space: nowrap;
    text-align: left;
}

/* Kolombreedtes wat sturen (desktop) */
@media (min-width: 768px) {
    #content table.borderless tr:first-child td:nth-child(1),
    #content table.borderless tr td:nth-child(1) {
        width: 10%;
    }

    #content table.borderless tr:first-child td:nth-child(2),
    #content table.borderless tr td:nth-child(2) {
        width: 15%;
    }

    #content table.borderless tr:first-child td:nth-child(3),
    #content table.borderless tr td:nth-child(3) {
        width: 45%;
    }

    #content table.borderless tr:first-child td:nth-child(5),
    #content table.borderless tr td:nth-child(5) {
        width: 15%;
        white-space: nowrap;
    }

    #content table.borderless tr:first-child td:nth-child(6),
    #content table.borderless tr td:nth-child(6) {
        width: 5%;
    }
}
/* Thumbnail verbergen in de winkelwagen op mobiel */
@media (max-width: 767px) {
    #content table.borderless td:nth-child(2),
    #content table.borderless tr:first-child td:nth-child(2) {
        display: none;
    }
}
/* ============================
   NAW-PAGINA – LAYOUT FIX
   (alleen waar het naw-formulier staat)
   ============================ */

/* Linker kolom ("Onze merken") verbergen op de NAW-pagina */
.tabelmidden:has(form[name="nawform"]) > .col-md-3.d-none.d-lg-block {
    display: none !important;
}

/* Contentkolom (met formulier) over de volle breedte laten lopen */
.tabelmidden:has(form[name="nawform"]) > #content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* De drie blokken (01/02/03) netjes laten ademen */
form[name="nawform"] .width33 {
    margin-bottom: 20px;
}

/* Op grotere schermen: 3 kolommen mooi verdeeld */
@media (min-width: 992px) {
    form[name="nawform"] {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
    }

    form[name="nawform"] .width33 {
        flex: 1 1 0;
        max-width: none;
    }
}

/* Panelen (Factuuradres / Betaalmethode / Overzicht) als cards */
form[name="nawform"] .shadow.p-3 {
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    background: #ffffff;
}
/* Bestellen & betalen knop iets naar links op de NAW-pagina */
form[name="nawform"] input[type="submit"].toevoegenbutton {
    margin-right: 32px;   /* schuift de knop naar links */
}

/* Op mobiel iets minder inspringen */
@media (max-width: 768px) {
    form[name="nawform"] input[type="submit"].toevoegenbutton {
        margin-right: 12px;
    }
}