/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2026 | 15:10:29 */
/* Superkeys - 9 september 2026
   1. Twee producten naast elkaar op mobiel in plaats van een.
   2. De knop "In winkelwagen" opnieuw centreren. De oude centreerregel hing aan
      "#main .product-container .product-summary form.cart button"; die wrappers
      verdwenen toen Ultimate WooCommerce Cart werd uitgezet.
   Bewust hier en niet in het Divi-integratieveld: dat veld zit tegen een
   serverlimiet aan en maakt zichzelf leeg bij opslaan. */

@media only screen and (max-width: 767px) {
    body.archive.woocommerce ul.products,
    body.woocommerce-shop ul.products,
    body.search.woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 16px;
        row-gap: 28px;
    }
}

body.single-product form.cart button.single_add_to_cart_button {
    justify-content: center !important;
    align-items: center !important;
    gap: 8px;
}

/* 9-9-2026: Divi-pijl uitzetten op de winkelwagenknop.
   De knop is een flexbox met een eigen winkelwagen-icoon (::before).
   Divi's ::after-pijl staat absoluut gepositioneerd en landde daardoor
   midden in het woord "winkelwagen" bij hover. */
body.single-product form.cart button.single_add_to_cart_button::after,
body.single-product form.cart button.single_add_to_cart_button:hover::after,
body.single-product form.cart button.single_add_to_cart_button.button::after,
body.single-product form.cart button.single_add_to_cart_button.button:hover::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

/* 9-9-2026: mobiele producttegels netjes uitlijnen.
   Probleem: in twee kolommen is een tegel maar ~167 px breed, dus lange
   productnamen liepen over vijf regels en zakte de prijs bij elk product naar
   een andere hoogte (nog erger bij producten met sterren). Oplossing: titel
   maximaal drie regels, en de prijs met margin-top:auto onderaan de tegel.
   De tegels in een rij zijn even hoog (grid), dus de prijzen staan zo altijd
   op dezelfde lijn. */
@media only screen and (max-width: 767px) {

    body.archive.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
    body.woocommerce-shop ul.products li.product > a.woocommerce-LoopProduct-link,
    body.search.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
    }

    body.archive.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    body.woocommerce-shop ul.products li.product h2.woocommerce-loop-product__title,
    body.search.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
        font-size: 14px;
        line-height: 1.3;
        padding: 8px 0 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.archive.woocommerce ul.products li.product .star-rating,
    body.woocommerce-shop ul.products li.product .star-rating,
    body.search.woocommerce ul.products li.product .star-rating {
        margin: 6px 0 0 !important;
    }

    body.archive.woocommerce ul.products li.product .price,
    body.woocommerce-shop ul.products li.product .price,
    body.search.woocommerce ul.products li.product .price {
        margin-top: auto !important;
        padding-top: 6px;
    }
}

/* 9-9-2026: DE echte oorzaak van de rommelige mobiele tegels.
   In het Divi-integratieveld staat nog een regel uit de tijd dat de producten
   met float naast elkaar stonden:
       body.tax-product_cat #left-area ul.products li.product:nth-child(n),
       body.post-type-archive-product #left-area ... { width: 45% !important; }
   binnen @media screen and (max-width: 768px).
   Sinds ul.products een grid is, rekent die 45% niet meer over de rij maar over
   de kolom zelf: elke tegel werd 70 px breed in een kolom van 155 px, met de
   rest leeg. Zelfde fout als de 22%-regel die op 8 september de /shop/ sloopte.
   Die regel staat in het veld dat stil faalt bij opslaan, dus niet daar
   aanpassen maar hier overschrijven. Let op de specificiteit: het origineel
   heeft een id (#left-area) en !important, dus deze selector moet minstens
   even zwaar zijn - vandaar de extra klasse .woocommerce-page. */
@media only screen and (max-width: 767px) {

    body.archive.woocommerce.woocommerce-page #left-area ul.products > li.product,
    body.archive.woocommerce.woocommerce-page ul.products > li.product,
    body.search.woocommerce.woocommerce-page #left-area ul.products > li.product,
    body.search.woocommerce.woocommerce-page ul.products > li.product {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* sorteerkeuze over de volle breedte in plaats van half zwevend rechts */
    body.archive.woocommerce.woocommerce-page form.woocommerce-ordering,
    body.search.woocommerce.woocommerce-page form.woocommerce-ordering {
        float: none !important;
        width: 100%;
        margin: 0 0 18px !important;
    }
    body.archive.woocommerce.woocommerce-page form.woocommerce-ordering select,
    body.search.woocommerce.woocommerce-page form.woocommerce-ordering select {
        width: 100%;
    }
}

/* 9-9-2026: drie mobiele correcties, alle drie gemeten op een viewport van 375px. */
@media only screen and (max-width: 767px) {

    /* 1. Horizontale overloop - de pagina kon zijwaarts schuiven en dan viel "Home"
       links weg. Oorzaak zat in de Theme Builder-footer: Divi geeft twee codemodules
       een negatieve rechtermarge (-77px) en een breedte van 96,9%, waardoor ze buiten
       hun kolom van 300px staken. Het document werd 415px breed op een scherm van 375.
       De bestaande mobiele regels zetten die marge al op 0, maar verloren van Divi's
       eigen selector. Let op: .et-db staat op de BODY zelf, niet erbinnen - een selector
       die begint met "body .et-db" matcht dus niets. Het moet body.et-db zijn, en dat is
       tegelijk een tandje zwaarder dan Divi's eigen regel, die margin-left: 70px !important
       zet op exact dezelfde selector en later in de HTML staat. */
    body.et-db #et-boc .et-l .et_pb_code_1_tb_footer,
    body.et-db #et-boc .et-l .et_pb_code_2_tb_footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. De zwevende knop "Doorgaan naar afrekenen" verdween achter de footer.
       De knop heeft zelf z-index 100000, maar dat telt alleen binnen zijn eigen
       stapelcontext, en die wordt gemaakt door .et_builder_inner_content op z-index 1.
       De footer is een aparte Theme Builder-layout met een eigen wrapper die later in
       de HTML staat, dus die wint. De hefboom moet daarom op de wrapper van de PAGINA
       staan (.et-l--post), niet op alle wrappers - anders schuiven ze allebei mee op en
       verandert er niets. Alleen mobiel: op desktop staat de knop al bovenop. */
    body.woocommerce-cart .et-l--post > .et_builder_inner_content {
        z-index: 9500 !important;
    }

    /* 3. Ruimte tussen het blauwe USP-blok en de tabbladen was 10px - de eigen padding
       van het tabblok, want het blauwe blok heeft geen marge eronder. Verdubbeld naar
       20px. Wil je het gelijk trekken met de 30px boven het blauwe blok, dan wordt dit
       margin-top: 20px. De zware selector is nodig omdat er al een regel staat met
       body.woocommerce #content-area div.product .woocommerce-tabs { margin-top: 0 !important }
       binnen max-width 768px; die heeft een id erin en wint anders. */
    body.single-product.woocommerce #content-area div.product .woocommerce-tabs.wc-tabs-wrapper {
        margin-top: 10px !important;
    }
}

/* 13-9-2026: winkelmandknop in de header verticaal centreren.
   De knop had padding-top 10px, padding-bottom 0 en line-height 0, waardoor het
   winkelwagentje tegen de onderrand van de witte pil plakte en alles ~4px te laag
   stond. Nu een flexbox met vaste hoogte, zodat icoon, bedrag en pijl in het
   midden staan. Geldt voor de desktopheader en de mobiele header. */
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents,
header ul#mobile_menu2 li#wpmenucartli > a.wpmenucart-contents {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents > span.cartcontents,
header ul#mobile_menu2 li#wpmenucartli > a.wpmenucart-contents > span.cartcontents {
    top: -7px !important;
}
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents > span.amount,
header ul#mobile_menu2 li#wpmenucartli > a.wpmenucart-contents > span.amount {
    top: 0 !important;
}
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents::after,
header ul#mobile_menu2 li#wpmenucartli > a.wpmenucart-contents::after {
    top: 0 !important;
}

/* 13-9-2026: de UpsellWP-bump boven de kop Betaalwijze zetten.
   De plugin plaatst de bump op de hook woocommerce_review_order_before_payment en
   die valt in het sjabloon onder de kop. De kop en de bump zijn broers in hetzelfde
   blok, dus met flexbox is de volgorde om te draaien zonder het sjabloon aan te raken. */
#checkout_custom_left_section > div:not(.col2-set) {
    display: flex;
    flex-direction: column;
}
#checkout_custom_left_section > div:not(.col2-set) > .cuw-offers {
    order: -1;
}

/* 13-9-2026: evenveel witruimte boven en onder de upsell-bump.
   Boven de bump kwam de ruimte van .col-1 (0 px op desktop, 25 px op mobiel), onder de bump
   stond niets. Nu is .col-1 op beide breedtes op 0 gezet, zodat alleen de 10 px marge van de
   laatste formulierregel overblijft, en krijgt het bumpblok 13 px onder zich. Resultaat:
   22 px boven en 22 px onder, op desktop en op 375 px. De tweede, lege .cuw-offers-container
   moet buiten schot blijven, vandaar :not(:empty). */
#checkout_custom_left_section .col2-set > .col-1 {
    margin-bottom: 0 !important;
}
/* 13 september, avond: :not(:empty) bleek onbetrouwbaar. Zodra een aanbod is
   aangenomen blijft er witruimte als tekstknoop in de container staan, dus hij
   telt niet als leeg en hield zijn marge. Tegelijk verdween alle ruimte boven
   de kop Betaalwijze, die stond daardoor strak tegen het blok erboven.
   Nu sturen we op de aanwezigheid van de aanbodkaart zelf (.cuw-offer):
   is die er, dan 10 px marge boven en onder de container (samen met de eigen
   inzet van de kaart geeft dat 22 px aan beide kanten); is die er niet, dan
   krijgt de kop zelf 22 px ruimte. */
#checkout_custom_left_section > div:not(.col2-set) > .cuw-offers:has(.cuw-offer) {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
#checkout_custom_left_section > div:not(.col2-set):not(:has(> .cuw-offers .cuw-offer)) > h3 {
    margin-top: 22px !important;
}


/* --------------------------------------------------------------
   13 september 2026 - Winkelwagen: verwijderknop zichtbaar en de
   regels netjes uitgelijnd.

   1. a.icon_trash_alt stond op color:transparent, omdat het prullenbakje
      uit een pictogramfont via ::before hoort te komen. Dat font wordt op
      deze pagina niet geladen (::before krijgt geen content), dus stond er
      een klikbaar vlakje van 9x17 px zonder iets zichtbaars. De link bevat
      gewoon de tekst x; die maken we weer zichtbaar, dan is er geen font
      meer nodig.

   2. Elke winkelwagenregel is een EIGEN <table> van 562 px breed (drie
      producten = drie tabellen). Met table-layout:auto koos elke tabel zijn
      eigen kolombreedtes op basis van zijn eigen inhoud, dus prijzen,
      aantalvakjes en kruisjes stonden per regel vier tot zes pixels anders.
      Met table-layout:fixed en vaste kolombreedtes staat alles op een lijn.

   3. Het aantalveld was een groot vierkant veld zonder rand of ronding, en
      de volgorde van kruisje en aantal verschilde per regel (een regel met
      een vast aantal heeft geen invoerveld maar losse tekst). Nu een vakje
      van 44x30 met ronding, rechts uitgelijnd, kruisje er altijd naast.
   -------------------------------------------------------------- */
/* 13 september, laatste ronde: de vaste kolommen gelden alleen boven 980 px.
   Onder 980 px zet het thema de breedtes zelf op auto en verbergt het de kolom
   met de stuksprijs. Met table-layout:fixed daar bovenop kreeg de
   subtotaalkolom nog 11 px en stak het aantalvakje 30 px buiten de kaart.
   Daar laten we de oorspronkelijke automatische verdeling dus staan.

   Percentages in plaats van pixels, want bij een smaller venster is de tabel
   nog maar 398 px breed; vaste pixels hielden dan 372 px bezet en hield de
   titelkolom 26 px over (een letter per regel). Aantal staat op 22%, want de
   groep vakje + kruisje is 76 px breed en moet daarbinnen passen. */
@media (min-width: 981px) {
    .cart_product_grid_custom table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    .cart_product_grid_custom td.product-remove {
        width: 0 !important;
        padding: 0 !important;
    }
    body #cart_left_panel_custom .cart_product_grid_custom td.product-thumbnail,
    body .cart_product_grid_custom td.product-thumbnail {
        width: 18% !important;
    }
    .cart_product_grid_custom td.product-price,
    .cart_product_grid_custom td.product-subtotal {
        width: 14% !important;
    }
    .cart_product_grid_custom td.product-quantity {
        width: 22% !important;
    }
}
.cart_product_grid_custom .product-thumbnail img {
    max-width: 100% !important;
}
.cart_product_grid_custom td.product-price,
.cart_product_grid_custom td.product-subtotal {
    text-align: right !important;
}
/* Dit groepje (aantalvakje + kruisje) staat in de themastijl absoluut
   gepositioneerd met een harde left van 320 px, meegegeven aan de oude,
   bredere kaart. Bij een smaller venster stak het daardoor buiten de kaart:
   gemeten op 1024 px stond de rechterrand 79 px voorbij de cel.
   Nu vastgezet aan de rechterkant in plaats van aan een vaste linkerpositie;
   de verticale plek blijft de plek waar het van nature zou staan. */
.cart_product_grid_custom td.product-quantity .quantity_remove_custom_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 34px;
    left: auto !important;
    right: 12px !important;
    width: auto !important;
}
.cart_product_grid_custom td.product-quantity .quantity {
    order: 1;
    margin: 0;
}
.cart_product_grid_custom td.product-quantity .product_remove_custom {
    order: 2;
    width: 20px;
    min-width: 20px;
    text-align: center;
}
.cart_product_grid_custom td.product-quantity input.qty {
    width: 44px !important;
    height: 30px !important;
    min-height: 30px;
    padding: 0 2px !important;
    border: 1px solid #d7dde8 !important;
    border-radius: 8px !important;
    background: #fff;
    text-align: center;
    font-size: 14px;
    box-shadow: none;
}
.cart_product_grid_custom .product_remove_custom a.icon_trash_alt {
    color: #e81f1f !important;
    font-size: 20px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
.cart_product_grid_custom .product_remove_custom a.icon_trash_alt:hover {
    color: #b31414 !important;
}

/* --------------------------------------------------------------
   13 september 2026 - Koptekst: zoekbalk plakte tegen de onderrand.
   Tussen 769 en 980 px valt de zoekbalk onder het logo, en de
   headerrij heeft daar geen ruimte onder: de balk eindigde op 148 px
   en de blauwe balk op 149 px. Onder 768 px is er al 20 px, dus die
   breedtes laten we met rust.
   -------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 980px) {
    /* Divi zet zelf .et_pb_row_0_tb_header.et_pb_row op padding-bottom:0 !important,
       met dezelfde specificiteit en later in het bestand. Vandaar body ervoor. */
    body .et_pb_section_0_tb_header .et_pb_row_0_tb_header.et_pb_row {
        padding-bottom: 14px !important;
    }
}

/* --------------------------------------------------------------
   13 september 2026 - Afrekenen: besteloverzicht onder 980 px.
   form.checkout is een flexrij die pas bij de mobiele weergave
   stapelt. Daartussen kreeg het besteloverzicht nog maar 272 px,
   terwijl de tabel erin niet onder zijn eigen minimumbreedte van
   312 px kan: de producttegels staken dus 33 px buiten het kader,
   en de titels braken af op twee woorden per regel.
   Onder 980 px zetten we de twee kolommen daarom onder elkaar, zoals
   op mobiel. Het overzicht krijgt dan de volle breedte.
   -------------------------------------------------------------- */
@media (max-width: 980px) {
    form.checkout.woocommerce-checkout {
        display: block !important;
    }
    form.checkout.woocommerce-checkout > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    #order_review {
        margin-top: 22px;
    }
}

/* --------------------------------------------------------------
   13 september 2026 - Winkelwagen: vast aantal in hetzelfde vakje.
   Een regel met een vast aantal (een aangenomen aanbod) heeft geen
   invoerveld maar losse tekst. Snippet 23 zet daar een span omheen,
   zodat het vakje even groot is als de andere. Grijs en met een
   niet-toegestaan-cursor, zodat zichtbaar is dat het vastligt.
   -------------------------------------------------------------- */
.cart_product_grid_custom td.product-quantity .sk-vast-aantal {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    background: #eef1f6;
    color: #8a93a5;
    font-size: 14px;
    cursor: not-allowed;
}

/* --------------------------------------------------------------
   13 september 2026 - Kleine correcties.
   1. Het winkelmandje in de koptekst: het pictogram stond op 24 px en
      werd te dominant sinds de knop netjes gecentreerd staat. Nu 19 px.
   2. In de upsellkaart stond de oude prijs twee keer: een los <b> met
      "€19.99" (met een punt, Engelse notatie) en daarnaast de nette
      doorgestreepte prijs in p.cuw-product-price. Het losse blokje gaat weg.
   3. "Quantity: 1" in diezelfde kaart is Engels en zegt niets; weg.
   -------------------------------------------------------------- */
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents > i.wpmenucart-icon-shopping-cart-0,
header ul#mobile_menu2 li#wpmenucartli > a.wpmenucart-contents > i.wpmenucart-icon-shopping-cart-0 {
    font-size: 19px !important;
}
.cuw-offer div:has(> p.cuw-product-price) > b {
    display: none !important;
}
.cuw-offer .cuw-product-quantity {
    display: none !important;
}


/* --------------------------------------------------------------
   13 september 2026 - Winkelmandknop in de koptekst compacter.
   Het witte blok #header_cart_button_wrapper was 150x55 px. Dat is
   veel voor een knop die alleen een aantal en een bedrag toont.
   Nu 150x44: minder padding, regel van 30 px hoog, kleiner pictogram
   en bedrag. De verticale uitlijning uit de eerdere correctie blijft.
   -------------------------------------------------------------- */
/* De inhoud stond niet gecentreerd in het witte blok: de regel zat 11 px onder
   de bovenrand en 3 px boven de onderrand, en links bleef 20 px over tegen 9 px
   rechts. Dat kwam doordat het Divi-menu binnenin met vaste hoogtes werkt.
   Onder 800 px zit in datzelfde blok ook het mobiele menu; daar zou flexen het
   blok juist 30 px hoger maken, dus die breedtes blijven zoals ze waren. */
@media (min-width: 800px) {
    #header_cart_button_wrapper {
        padding: 5px 9px !important;
    }
    #header_cart_button_wrapper .et_pb_menu_inner_container,
    #header_cart_button_wrapper .et_pb_menu__wrap,
    #header_cart_button_wrapper .et_pb_menu__menu,
    #header_cart_button_wrapper nav.et-menu-nav,
    #header_cart_button_wrapper ul#menu-cart-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        width: 100% !important;
    }
    #header_cart_button_wrapper ul#menu-cart-menu li#wpmenucartli {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        float: none !important;
    }
}
@media (max-width: 799px) {
    #header_cart_button_wrapper {
        padding: 3px 9px !important;
    }
    #header_cart_button_wrapper ul#menu-cart-menu {
        height: auto !important;
    }
    #header_cart_button_wrapper ul#menu-cart-menu li#wpmenucartli {
        height: 30px !important;
    }
}
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents {
    min-height: 30px !important;
}
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents > i.wpmenucart-icon-shopping-cart-0 {
    font-size: 17px !important;
}
header ul#menu-cart-menu li#wpmenucartli > a.wpmenucart-contents > span.amount {
    font-size: 15px !important;
}


/* --------------------------------------------------------------
   13 september 2026 - Homepage schoof horizontaal uit beeld.
   Gemeten op 1085 px venster: scrollWidth 1145, dus 60 px overloop;
   op 792 px zelfs 353 px. De oorzaak zijn blokken met een harde
   breedte van 1080 px die niet meeschalen:
     .sk_hero_flex_container            (CSS, width: 1080px)
     .sk_hero_orange_bar_main_container (CSS, width: 1080px)
     #shop_by_bestsellers_slider        (inline style width: 1080px)
     .woocommerce.columns-5             (inline style width: 1080px)
   max-width werkt ook tegen een inline width, dus dat volstaat.
   Daarna bleef alleen de pijl van de slider over: die staat op
   right: -50px en past onder 1200 px niet meer naast de slider.
   -------------------------------------------------------------- */
.sk_hero_flex_container,
.sk_hero_orange_bar_main_container,
.sk_hero_orange_bar_flex_container,
#shop_by_bestsellers_slider,
.woocommerce.columns-5 {
    max-width: 100% !important;
}
@media (max-width: 1200px) {
    #shop_by_bestsellers_slider .slick-next {
        right: 0 !important;
    }
}
/* De zijruimte van de hero geldt NIET op telefoon: daar is de hero al smal,
   en met extra padding werd .sk_hero_content 317 px terwijl het
   WebwinkelKeur-widget een vaste 342 px is. Dat gaf 21 px overloop op 375 px. */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Zonder zijruimte liep de herotekst tot tegen de vensterrand en
       verdween het begin achter de WebwinkelKeur-badge die daar zweeft. */
    .sk_hero_flex_container {
        padding-left: 34px !important;
        padding-right: 24px !important;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------
   13 september 2026 - Koptekst: profielknop lag achter de winkelmand.
   De headerrij is display:block met vier zwevende kolommen. Tussen
   981 en 1200 px passen die niet meer naast elkaar: de kolom met de
   profielknop belandde op exact dezelfde positie als de winkelmandknop
   (beide L717). De ronde profielknop is 4 px hoger dan het mandje, dus
   er stak links onder de knop een ronding uit. Dat is wat Luuk zag.
   Als flexrij passen ze wel naast elkaar.
   -------------------------------------------------------------- */
/* Boven 980 px altijd flex: de botsing bleek niet bij 1200 px te stoppen
   (op een venster van 1210 px stonden mand en profiel nog steeds allebei op
   L828). Op 1920 px geeft flex exact dezelfde indeling als de zwevende
   kolommen, dus er is geen reden om de grens ergens te leggen. */
@media (min-width: 981px) {
    .et_pb_section_0_tb_header .et_pb_row_0_tb_header {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column {
        float: none !important;
        margin: 0 !important;
    }
    .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column_0_tb_header,
    .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column_3_tb_header {
        flex: 0 0 auto;
        width: auto !important;
    }
    .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column_1_tb_header {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }
    .et_pb_section_0_tb_header .et_pb_row_0_tb_header > .et_pb_column_2_tb_header {
        flex: 0 0 150px;
        width: 150px !important;
        display: flex !important;
        align-items: center;
    }
    /* De winkelmandknop staat position:absolute in zijn kolom, waardoor die
       kolom maar 1 px hoog is. In een flexrij met align-items:center werd dat
       1 px hoge kolom gecentreerd en hing de knop er 7 px onderuit, tot buiten
       de blauwe balk - vandaar dat de knop afgekapt leek. Relatief gepositioneerd
       vult hij zijn kolom gewoon.
       De profielknop had om dezelfde reden een handmatige top: 7px; die duwde hem
       in de flexrij 7 px te laag. Beide staan nu op dezelfde hoogte als de
       zoekbalk (midden op 58 px bij een venster van 1000 px). */
    #header_cart_button_wrapper {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
    }
    .header_my_profile_link {
        top: 0 !important;
    }
}


/* --------------------------------------------------------------
   13 september 2026 - Het dealsblok op de homepage.

   1. De aanbiedingenslider heeft in de themastijl een harde
      `#featured_home_slider { width: 640px }`. De kolom eromheen is bij een
      venster van 1010 px maar 557 px breed, dus de slider stak er 83 px
      buiten en schoof over de banner ernaast heen. Vandaar dat de twee
      elkaar overlapten.

   2. De banner ernaast (Borderlands) had een afbeelding op ware grootte
      (578x611) in een link die wel de volle kolombreedte pakt. De SALE-badge
      en de knop "Bekijk deze deal nu" staan absoluut gepositioneerd ten
      opzichte van die link, dus die zweefden los naast de afbeelding zodra
      de kolommen onder elkaar kwamen. Met width:100% valt alles weer op zijn
      plek.

   3. Onder 980 px staan de kolommen onder elkaar. De banner is bijna
      vierkant, dus op volle breedte werd hij 853x902 px - een poster van bijna
      een heel scherm hoog. Nu 400 px hoog met object-fit: cover en uitlijning
      op de bovenkant, zodat de titel heel blijft.
   -------------------------------------------------------------- */
#featured_home_slider {
    max-width: 100% !important;
}
#homepage_countdown_wrapper .et_pb_row_2 > .et_pb_column:last-child a img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
@media (max-width: 980px) {
    #homepage_countdown_wrapper .et_pb_row_2 > .et_pb_column:last-child a img {
        height: 400px !important;
        object-fit: cover;
        object-position: center top;
    }
}


/* === 13 september 2026 - winkelwagen op tablet en telefoon ===
   Drie problemen in een. 1) De winkelwagen en het totalenblok bleven tot 980 px
   naast elkaar staan, waardoor de winkelwagen op een venster van 900 px maar
   400 px breed was en lange titels over zes regels liepen. 2) Het blok met het
   aantal en de prullenbakknop stond absoluut gepositioneerd, waardoor die cel in
   de grid geen hoogte had. 3) Onder 768 px werd de hele winkelwagentabel
   verborgen en bleef alleen een uitgekleed blok over met enkel een miniatuur en
   een afgekapte titel: geen prijs, geen aantal, geen verwijderknop. Gemeten op
   356, 386, 596, 764, 816, 898, 975, 1020 en 1200 px. Boven 980 px verandert er niets. */

@media screen and (max-width: 980px) {
	body #cart_main_flex_custom_wrapper { flex-direction: column !important; gap: 24px !important; }
	body #cart_main_flex_custom_wrapper > #cart_left_panel_custom,
	body #cart_main_flex_custom_wrapper > #cart_right_panel_custom { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; }

	body #cart_left_panel_custom form.woocommerce-cart-form table.shop_table,
	body #cart_left_panel_custom form.woocommerce-cart-form table.shop_table tbody,
	body #cart_left_panel_custom form.woocommerce-cart-form tr.cart_item,
	body #cart_left_panel_custom form.woocommerce-cart-form tr.cart_item > td,
	body #cart_left_panel_custom .cart_product_grid_custom { display: block !important; width: 100% !important; max-width: none !important; }

	body #cart_left_panel_custom .cart_product_grid_custom td.product-name { width: 100% !important; max-width: 100% !important; }
	body #cart_left_panel_custom .cart_product_grid_custom td.product-name a { display: block !important; }

	body #cart_left_panel_custom .cart_product_grid_custom .product-quantity .quantity_remove_custom_wrapper { position: static !important; right: auto !important; bottom: auto !important; margin: 0 !important; }
}

@media screen and (max-width: 768px) {
	body form.woocommerce-cart-form .content { display: block !important; }
	body #cart_left_panel_custom div.woocommerce-cart-form__cart-item { display: none !important; }
	body #cart_left_panel_custom .cart_product_grid_custom .product-thumbnail,
	body #cart_left_panel_custom .cart_product_grid_custom .product-name,
	body #cart_left_panel_custom .cart_product_grid_custom .product-price { float: none !important; width: auto !important; }
}


/* === 13 september 2026 - afrekenen: winkelwagen boven het formulier ===
   Op de afrekenpagina stond de ingeklapte winkelwagen onderaan, onder het hele
   formulier. De bedoeling was er al: er stond een regel
   'flex-direction: column-reverse' op form.checkout onder 768 px, maar een regel
   'display: block !important' onder 980 px maakte die dood. Nu wordt de rij weer
   echt een flexkolom, zodat de samenvatting bovenaan komt. Ingeklapt blijft hij.
   Nagemeten op 386, 596, 896 en 996 px; boven 980 px verandert er niets. */

@media screen and (max-width: 980px) {
	body.woocommerce-checkout form.checkout.woocommerce-checkout { display: flex !important; flex-direction: column-reverse !important; gap: 24px; }
	body.woocommerce-checkout form.checkout.woocommerce-checkout > div { width: 100% !important; max-width: none !important; }
}


/* === 13 september 2026 - gelijke afstanden op winkelwagen en afrekenen ===
   De afrekenpagina had 62 px onder de koptekst waar de winkelwagen er 32 had, en
   binnen de pagina's liepen de gaten uiteen van 20 tot 64 px. Alles onder 980 px
   staat nu op een ritme van 32 px. Let op: dit thema zet veel op !important en
   sommige regels hebben hoge specificiteit (een selector met :not(:has(...))
   telde zwaarder dan verwacht), daarom staat het id hieronder dubbel - dat is
   geen typefout maar de enige manier om te winnen zonder nog meer !important.
   Nagemeten op 358, 478, 598, 738, 778, 898 en 973 px. */

@media screen and (max-width: 980px) {
	body.woocommerce-cart #main-content .et_pb_section,
	body.woocommerce-checkout #main-content .et_pb_section { padding-top: 32px !important; padding-bottom: 32px !important; }

	body.woocommerce-cart #cart_main_flex_custom_wrapper#cart_main_flex_custom_wrapper { gap: 0 !important; }
	body.woocommerce-cart #cart_left_panel_custom#cart_left_panel_custom { margin-top: 0 !important; }
	body.woocommerce-cart #cart_right_panel_custom#cart_right_panel_custom > .cart-sidebar { margin-top: 0 !important; padding-top: 0 !important; }
	body.woocommerce-cart #cart_right_panel_custom#cart_right_panel_custom .cart_set_total { margin-top: 0 !important; }

	body.woocommerce-checkout form.checkout.woocommerce-checkout { gap: 32px !important; }
	body.woocommerce-checkout form.checkout #order_review.woocommerce-checkout-review-order { margin-top: 0 !important; margin-bottom: 0 !important; }
	body.woocommerce-checkout #checkout_custom_left_section#checkout_custom_left_section h3 { margin-top: 32px !important; margin-bottom: 12px !important; }
	body.woocommerce-checkout #checkout_custom_left_section#checkout_custom_left_section > h3:first-child { margin-top: 0 !important; }
	body.woocommerce-checkout .form-row.place-order { margin-top: 32px !important; }
}

/* De e-mailbox staat onder 768 px absoluut boven de winkelwagen (hij hoort in de
   zijbalk maar wordt met position absolute naar boven getrokken). De marge
   hieronder maakt daar ruimte voor en is dus gekoppeld aan zijn hoogte: 126 px
   onder 560 px, 102 px daarboven. Wordt die tekst langer, dan moet dit getal mee. */
@media screen and (max-width: 768px) {
	body.woocommerce-cart #cart_left_panel_custom#cart_left_panel_custom { margin-top: 134px !important; }
}
@media screen and (max-width: 560px) {
	body.woocommerce-cart #cart_left_panel_custom#cart_left_panel_custom { margin-top: 158px !important; }
}


/* Afrekenen: de SSL-badge onder de bestelknop had 50 px marge onder zich, waardoor
   de pagina met een groot leeg vlak eindigde. Nu sluit hij net zo aan als de
   winkelwagen. 13 september 2026. */
@media screen and (max-width: 980px) {
	body.woocommerce-checkout .form-row.place-order div:has(> img[src*="ssl-secured-badge"]) { margin-top: 16px !important; margin-bottom: 0 !important; }
}


/* WebwinkelKeur-keurmerk bij de koopmomenten (mu-plugin
   superkeys-webwinkelkeur-koopmomenten.php): ruimte eromheen. Rendert de widget
   niet, dan blijft er alleen een lege regel over. 13 september 2026. */
.sk-wwk-keurmerk { display: flex; justify-content: center; margin: 0 0 16px; }
.sk-wwk-keurmerk:empty { display: none; }
.sk-wwk-checkout { margin-top: 8px; }


/* === 13 september 2026, late correcties op winkelwagen en productpagina ===
   1. Het label "Offer:" bij een upsell-regel is overbodig: het groene 10%-badge
      zegt het al, en op de winkelwagen staat de korting ook nog eens groot in de
      totalen. Alleen het label gaat weg, de waarde blijft.
   2. De verwijderknop en het aantalveld stonden per regel op een andere plek.
      Oorzaak: het blokje .quantity is 100 px breed terwijl het invoerveld 44 px
      is, en de wrapper lijnt rechts uit. Bij een regel met een vast aantal (de
      upsell) ontbreekt dat blokje, dus schoof alles 56 px op. Nu krimpt .quantity
      mee met zijn invoerveld en staan alle rijen gelijk.
   3. Op de productpagina was de ruimte boven het keurmerk 30 px (marge van het
      platform/systeem-blok) en eronder 16 px. Nu allebei 30. */

dl.variation dt.variation-Offer { display: none !important; }

body .quantity_remove_custom_wrapper .quantity { width: auto !important; min-width: 0 !important; }

.sk-wwk-product { margin-bottom: 30px; }


/* Productpagina op desktop: 5 px krapper rond het keurmerk dan op mobiel, waar
   30 px goed voelt. De negatieve marge boven compenseert de 30 px marge van het
   platform/systeem-blok, zodat boven en onder allebei op 25 px uitkomen zonder
   dat gedeelde klasse aan te raken. 13 september 2026. */
@media screen and (min-width: 981px) {
	.sk-wwk-product { margin-top: -5px; margin-bottom: 25px; }
}


/* --- Responsive-ronde homepage, 14 september 2026 ---
   Gemeten op 360, 414, 768, 906 en 1280 px, uitgelogd, in een iframe van die
   breedte zonder scrollbalk. Op 414 px en breder was er nul horizontale overloop:
   de ronde van 13 september houdt stand. Alleen op 360 px liep de pagina 2 px uit
   beeld, en de oorzaak is niet een vaste pixelbreedte maar het omgekeerde:
   .bottom-blue-bar (de keurmerkbalk onder de hero) staat op width: max-content.
   Die waarde negeert de beschikbare ruimte en groeit mee met de inhoud, dus op een
   smal scherm wordt hij breder dan zijn ouder: 342 px in een kolom van 320 px.
   max-width: 100% laat max-content staan waar het past en knijpt hem alleen af
   waar hij anders uit beeld zou lopen - op 414 px en breder verandert er niets
   (balk blijft 342 resp. 482 px). body ervoor omdat de oorspronkelijke regel
   dezelfde specificiteit heeft en later in de head staat. */
body .bottom-blue-bar { max-width: 100%; }


/* --- Winkelmandknop recht zetten onder 980 px, 14 september 2026 ---
   De knop hing op productpagina's 9 px lager dan de hamburger en het logo, op
   de homepage niet. Zelfde element, ander gedrag: ul#mobile_menu2 (het lijstje
   waar WP Menu Cart zijn knop in hangt - niet het navigatiemenu, dat is
   ul#mobile_menu1) krijgt van Divi position: absolute met top: 100%, en 100%
   van een ouder van 32 px is precies die 32 px verschuiving. De bestaande
   eigen regel header ul#mobile_menu2 {position:relative; top:-8px} verloor dat
   gevecht op specificiteit: Divi's selector is .et-db #et-boc .et-l
   .et_mobile_menu, dus een id en drie klassen tegen een id en twee elementen.
   Op de homepage won de eigen regel wel, en daar zag het er dus goed uit.
   Met body ervoor en !important wint hij overal, en staat de knop op elke
   pagina hetzelfde. Nagemeten op 360 en 390 px, op homepage, shop, winkelwagen
   en drie productpagina's: knop steeds op top 24, hoogte 37, nul overloop.
   Dit raakt het uitklapmenu niet - dat zit in ul#mobile_menu1. */
@media only screen and (max-width: 980px) {
	body header ul#mobile_menu2.et_mobile_menu { position: relative !important; top: -8px !important; }
}

/* --- Winkelmandknop op dezelfde plek op elke pagina, 14 september 2026 (tweede ronde) ---
   Vervolg op het blok hierboven. Dat zette de knop verticaal recht, maar hij bleef
   horizontaal verspringen: op productpagina's stond het hele mandjeblok 30 px verder
   naar links dan op de homepage. Subtiel, maar zichtbaar als je heen en weer klikt.

   Oorzaak: #main_custom_cart_for_mobile is absoluut gepositioneerd en er zijn twee
   regels die elkaar tegenspreken. Eentje op max-width 768 zet terecht right: 0, maar
   .et-db #et-boc .et-l .et_pb_column_2_tb_header zet margin-right: 30px !important
   zonder media query, en die is specifieker (een id en drie klassen tegen een id en
   twee elementen). Op de homepage matchte die tweede regel niet, daar klopte het dus
   wel - vandaar dat het verschil alleen opviel bij het vergelijken van twee pagina's.

   Het id staat hieronder dubbel om van die !important-regel te winnen zonder nog een
   laag eroverheen te stapelen; dezelfde truc als bij #checkout_custom_left_section.
   left: auto zodat right: 0 het overneemt - met left, right en een vaste breedte
   tegelijk negeert de browser right, en dat was precies het probleem.

   De tweede regel is voor de tabletband: daar staat de kolom niet absoluut maar in de
   flexrij, en daar trok hij op productpagina's naar het midden. margin-left: auto duwt
   hem naar rechts, net als op de homepage.

   Nagemeten op 360, 390, 414, 430, 768, 780 en 906 px, op homepage, shop, categorie,
   winkelwagen en twee productpagina's: knop staat overal op exact dezelfde plek, nul
   horizontale overloop, en boven 980 px verandert er niets. */
@media only screen and (max-width: 980px) {
	body header #main_custom_cart_for_mobile#main_custom_cart_for_mobile { left: auto !important; right: 0 !important; margin-right: 0 !important; }
}
@media only screen and (min-width: 769px) and (max-width: 980px) {
	body header #main_custom_cart_for_mobile#main_custom_cart_for_mobile { margin-left: auto !important; }
}

/* === 14 september - stap 1: voorwaardetekst en beoordelingscijfer === */
/* De zin zelf komt uit mu-plugin superkeys-voorwaarden-en-cijfer.php. */
body.single-product .sk-voorwaarde-tekst {
	color: #000;
}
body.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}


/* === 14 september - stap 2: beschrijving inklappen in plaats van scrollen === */
/* Gedrag komt uit mu-plugin superkeys-beschrijving-inklappen.php.               */
/* De klasse sk-inklap wordt alleen gezet als de inhoud echt niet past, dus      */
/* korte beschrijvingen houden precies wat ze nu hebben.                          */
body.single-product.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel.sk-inklap {
	height: auto !important;
	max-height: 350px;
	overflow: hidden !important;
	position: relative;
}
body.single-product.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel.sk-inklap.sk-open {
	max-height: 6000px;
}
body.single-product.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel.sk-inklap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	/* De achtergrond achter het paneel is #f8f8f8 van .woocommerce-tabs, niet wit. */
	background: linear-gradient(rgba(248,248,248,0), #f8f8f8);
	pointer-events: none;
}
body.single-product.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel.sk-inklap.sk-open::after {
	opacity: 0;
}
body.single-product .sk-lees-meer {
	display: block;
	margin: 0 20px 14px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid #0057D9;
	border-radius: 8px;
	color: #0057D9;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	width: calc(100% - 40px);
}
/* Het hidden-attribuut moet winnen van de display:block hierboven. Zonder deze
   regel bleef de knop staan op de tabbladen Aanvullende informatie en Voorwaarden. */
body.single-product .sk-lees-meer[hidden] {
	display: none !important;
}
body.single-product .sk-lees-meer:hover {
	background: #0057D9;
	color: #fff;
}
body.single-product .sk-lees-meer:focus-visible {
	outline: 2px solid #0057D9;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	body.single-product.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel.sk-inklap,
	body.single-product.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel.sk-inklap::after {
		transition: none;
	}
}


/* === 14 september - stap 3: kenmerken als chips === */
/* De rij komt uit mu-plugin superkeys-productchips.php. De oude kaarten gaan alleen  */
/* uit als die plugin echt iets te tonen had (bodyklasse sk-chips-actief).            */
body.single-product .sk-kenmerken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 6px;
}
body.single-product .sk-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	border: 1px solid #d7dde6;
	background: #f7f9fc;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 13px;
	line-height: 1.3;
	color: #1b2430;
	max-width: 100%;
}
body.single-product .sk-chip__label {
	font-size: 11px;
	color: #6c7787;
	flex: none;
}
body.single-product .sk-chip__waarde {
	font-weight: 600;
}
/* De winkelchip krijgt nadruk: daar gaat het mis als iemand niet kijkt. */
body.single-product .sk-chip--winkel {
	border-color: #f0a33c;
	background: #fff6e9;
	color: #8a5006;
}
body.single-product .sk-chip--winkel .sk-chip__label {
	color: #a3701f;
}
body.single-product .sk-chip--systeem {
	border-color: #bcd5f6;
	background: #eef5fe;
	color: #0b3f8f;
}
body.single-product .sk-chip--systeem .sk-chip__label {
	color: #4a74ad;
}
body.single-product .sk-chip--licentie {
	border-color: #0057D9;
	background: #fff;
	color: #0057D9;
}
body.single-product .sk-chip--licentie .sk-chip__label {
	color: #5484c9;
}
body.single-product .sk-chip--uitgever {
	border-color: #e3e8ef;
	background: #f6f8fb;
	color: #6c7787;
}
body.single-product.sk-chips-actief .product_page_custom_plat_sys_wrapper {
	display: none !important;
}

/* De regel 'Op voorraad' werd verborgen met .price + .stock, maar sinds de chips
   tussen prijs en voorraad staan matcht die buurregel niet meer. Nu los van de volgorde.
   Alleen 'Op voorraad' gaat uit; staat iets niet op voorraad, dan blijft dat wel staan. */
body.single-product .summary.entry-summary .stock.in-stock {
	display: none !important;
}


/* === 14 september - stap 4: twee tabbladen in plaats van drie === */
/* Aanvullende informatie en Voorwaarden zitten nu in een tabblad, met een kopje per   */
/* deel. Samenvoegen gebeurt in mu-plugin superkeys-tabbladen-samenvoegen.php.         */
body.single-product .sk-tabkop {
	font-size: 15px;
	font-weight: 600;
	color: #1b2430;
	margin: 0 0 10px;
	line-height: 1.3;
}
body.single-product .sk-tabdeel + .sk-tabdeel {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #e3e8ef;
}
body.single-product .sk-tabdeel table.shop_attributes {
	margin-bottom: 0;
}
body.single-product .sk-tabdeel ul {
	margin-bottom: 0;
}


/* === 14 september - stap 5: kolomverdeling, chipruimte en sterren === */
/* KOLOMMEN. Ze zitten in een flexrij met gap 40px en beide hebben flex: 0 1 auto.     */
/* Een percentage op width helpt daarom niet, flexbox krimpt ze toch weer; het moet    */
/* via flex-basis, met de helft van de gap eraf zodat de som precies 100% is.          */
/* En de bestaande regel voor de koopkolom bevat het id #content-area. Een id wint van */
/* elk aantal klassen, dus onze regel moet datzelfde id bevatten - dat was de reden    */
/* dat de eerste poging niet pakte.                                                    */
@media only screen and (min-width: 981px) {
	body.single-product .product .woocommerce-product-gallery {
		flex: 0 0 calc(51% - 20px) !important;
		width: calc(51% - 20px) !important;
	}
	body.woocommerce #content-area div.product div.summary.entry-summary {
		flex: 0 0 calc(49% - 20px) !important;
		width: calc(49% - 20px) !important;
	}
}

/* CHIPS. Stonden 14 px onder de prijs en maar 6 px boven de tekst; dat leest als een  */
/* losse rij in plaats van iets dat bij de prijs hoort. Nu omgedraaid.                 */
body.single-product .sk-kenmerken {
	margin: 6px 0 16px;
}

/* STERREN. 14 px was groter dan nodig naast een cijfer; 12 px oogt rustiger.          */
body.single-product .woocommerce-product-rating .star-rating {
	font-size: 12px;
}

/* Meer lucht tussen de sterrenrij en de prijs, zodat de prijs eruit springt. */
/* De regel die hier wint is de buurselector achter h1.product_title.entry-title; die
   telt vier klassen. Onze regel moet dus dezelfde vorm hebben plus eentje extra. */
body.single-product .summary.entry-summary h1.product_title.entry-title + .woocommerce-product-rating {
	margin-bottom: 20px;
}
/* Niet via de marge onder de sterren: die regel zit achter een selector met het id
   #content-area en die wint altijd. Daarom de ruimte boven de prijs zetten, met
   datzelfde id erin. */
body.woocommerce #content-area div.product div.summary.entry-summary .price {
	margin-top: 14px !important;
}


/* === 14 september - sterrenrij uitlijnen en de rechterrand van de slider === */
/* De sterren begonnen 8 px naar rechts en stonden 6 px lager dan de tekst ernaast:   */
/* .star-rating heeft margin 6px 4px 0 0 van WooCommerce. Die halen we weg en lijnen  */
/* alles op het midden uit.                                                           */
body.single-product .summary.entry-summary .woocommerce-product-rating {
	/* gap 0, anders duwt de flexruimte de sterren van de linkerrand af; de ruimte
	   naar de tekst zetten we op de link zelf. */
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	padding-left: 0;
}
body.single-product .summary.entry-summary .woocommerce-product-rating .star-rating {
	margin: 0 !important;
	left: 0 !important;
	float: none;
}
body.single-product .summary.entry-summary .woocommerce-product-rating .woocommerce-review-link {
	line-height: 1;
	font-size: 13px;
	margin-left: 8px;
}


/* === 15 september - USP-blok compacter en de FAQ in de koopkolom === */
/* USP: het blok was 84 px terwijl de vier punten samen 52 px tekst zijn. De rest was */
/* regelafstand (26 px) en 5 px marge rondom elke li.                                 */
body.single-product .custom-bottom-list-text {
	margin-top: 20px;
	padding: 2px 0;
}
body.single-product .custom-bottom-list-text ul li {
	margin: 2px 6px 2px 0;
	line-height: 22px;
}

/* FAQ: stond onderaan de pagina over de volle breedte (901 px, marge 79,5 px opzij). */
/* Nu in de koopkolom, dus die breedte en marges moeten eraf.                          */
body.single-product form.cart .accordion-container {
	width: 100% !important;
	max-width: none !important;
	margin: 18px 0 0 !important;
	clear: both;
}
body.single-product form.cart .accordion-container > h2 {
	font-size: 17px;
	line-height: 1.3;
	margin: 0 0 10px;
	text-align: left;
	padding: 0;
}

/* Volgorde in het bestelformulier. after_button_content_product() drukt de USP-regels  */
/* en Vergelijkbare producten in een keer af, dus de FAQ kan er met een hook niet tussen */
/* komen. Met flex + order zetten we het alsnog goed: FAQ direct onder de USP-regels,    */
/* carrousel daaronder. De kinderen stonden al onder elkaar, dus flex verandert niets    */
/* aan de indeling zelf.                                                                 */
body.single-product form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
body.single-product form.cart > * {
	order: 0;
}
body.single-product form.cart > .accordion-container {
	order: 1;
}
/* De knop 'Nog vragen? Contact opnemen' is het laatste div-kind van het formulier en
   hoort na de FAQ, niet ervoor. */
body.single-product form.cart > div:last-of-type {
	order: 2;
	margin-top: 6px;
}


/* === 15 september - reviewblok compacter === */
/* Het attribuut komt uit mu-plugin superkeys-reviews-compact.php: 'weinig' bij minder */
/* dan vijf beoordelingen. Een staafdiagram waarvan vier balken op 0% staan is geen    */
/* bewijs maar ruis, dus dat gaat er dan uit (144 px).                                  */
body.single-product #reviews[data-sk-reviews="weinig"] .cr-histogramTable {
	display: none !important;
}
body.single-product #reviews[data-sk-reviews="weinig"] .ivole-summaryBox {
	min-height: 0 !important;
}
/* Het gemiddelde stond op 36 px; naast een enkele beoordeling is dat te luid. */
body.single-product #reviews[data-sk-reviews="weinig"] .cr-average-rating {
	font-size: 26px !important;
	line-height: 1.2 !important;
	height: auto !important;
}
body.single-product #reviews .cr-overall-rating-wrap {
	min-height: 0 !important;
}

/* Bij weinig beoordelingen hebben zoeken, sorteren en de tellerregel geen functie:  */
/* die zijn er om door tientallen reviews te navigeren. Samen 112 px.                  */
body.single-product #reviews[data-sk-reviews="weinig"] .cr-ajax-search,
body.single-product #reviews[data-sk-reviews="weinig"] .cr-ajax-reviews-sort-div,
body.single-product #reviews[data-sk-reviews="weinig"] .cr-count-row {
	display: none !important;
}
/* De samenvatting hield een vaste hoogte aan omdat het diagram ernaast stond. */
body.single-product #reviews[data-sk-reviews="weinig"] .cr-overall-rating-wrap,
body.single-product #reviews[data-sk-reviews="weinig"] .cr-summaryBox-wrap {
	min-height: 0 !important;
	height: auto !important;
	padding-top: 0 !important;
	padding-bottom: 8px !important;
}


/* ===== 15 september, tweede ronde: strakker maken ===== */

/* 1. De waarschuwingszin onder de koopknoppen. Die leidde af en maakte het rommelig;   */
/*    het systeem staat sinds de chips al direct onder de prijs, en de voorwaarde zelf  */
/*    staat nog gewoon in het tabblad Specificaties en voorwaarden. Scheelt 48 px.      */
body.single-product form.cart .custom-add-to-cart-content {
	display: none !important;
}

/* 2. Vergelijkbare producten: raster over de volle breedte in plaats van een carrousel */
/*    in de koopkolom. Het verplaatsen en het uitzetten van slick gebeurt in mu-plugin  */
/*    superkeys-verwante-producten.php.                                                  */
body.single-product #customized_carousel_product_page {
	width: 100% !important;
	max-width: none !important;
	margin: 44px 0 0 !important;
	clear: both;
}
body.single-product #customized_carousel_product_page > h2,
body.single-product #customized_carousel_product_page > h3 {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 16px;
	padding: 0;
	text-align: left;
}
body.single-product #customized_carousel_product_page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none;
}
@media only screen and (max-width: 980px) {
	body.single-product #customized_carousel_product_page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media only screen and (max-width: 640px) {
	body.single-product #customized_carousel_product_page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}
body.single-product #customized_carousel_product_page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	height: auto !important;
	min-height: 0 !important;
	display: flex;
	flex-direction: column;
	border: 1px solid #e3e8ef !important;
	border-radius: 12px !important;
	background: #fff !important;
	padding: 16px 14px 14px !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}
body.single-product #customized_carousel_product_page ul.products li.product:hover {
	border-color: #bcd5f6 !important;
	box-shadow: 0 8px 20px -12px rgba(11, 63, 143, .45);
}
body.single-product #customized_carousel_product_page ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 10px;
	flex: 1 1 auto;
}
body.single-product #customized_carousel_product_page ul.products li.product a.woocommerce-LoopProduct-link > * {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto;
}
body.single-product #customized_carousel_product_page ul.products li.product img {
	width: auto !important;
	max-width: 100% !important;
	max-height: 116px !important;
	height: auto !important;
	margin: 0 auto !important;
}
body.single-product #customized_carousel_product_page ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px !important;
	line-height: 1.45 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #1b2430 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 38px;
}
/* De prijs stond absoluut gepositioneerd (left: 135px) uit de tijd dat de kaart        */
/* horizontaal was, en de knop 'Ga naar product' is een ::after op die prijs.           */
body.single-product #customized_carousel_product_page ul.products li.product .price {
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 100% !important;
	display: block !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0057D9 !important;
	margin: auto 0 0 !important;
	padding-top: 8px;
}
body.single-product #customized_carousel_product_page ul.products li.product .price::after {
	position: static !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 10px 0 0 !important;
	padding: 9px 8px !important;
	background: #fff !important;
	border: 1.5px solid #0057D9 !important;
	border-radius: 8px !important;
	color: #0057D9 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	height: auto !important;
}
body.single-product #customized_carousel_product_page ul.products li.product:hover .price::after {
	background: #0057D9 !important;
	color: #fff !important;
}
body.single-product #customized_carousel_product_page ul.products li.product .star-rating {
	display: none !important;
}

/* 3. Reviewblok strakker. */
/*    De knop 'Een beoordeling toevoegen' naar rechts, zodat de balk dunner wordt.      */
body.single-product #reviews .cr-summaryBox-wrap,
body.single-product #reviews .cr-overall-rating-wrap {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 14px;
	width: 100% !important;
	min-height: 0 !important;
}
body.single-product #reviews .cr-ajax-reviews-add-review {
	margin-left: auto !important;
}
body.single-product #reviews .cr-average-rating,
body.single-product #reviews .cr-average-rating-stars,
body.single-product #reviews .cr-total-rating-count {
	margin: 0 !important;
	width: auto !important;
}
/*    De profielfoto: dat is de standaard Gravatar-placeholder, want klanten koppelen   */
/*    geen foto aan hun WordPress-account.                                               */
body.single-product #reviews img.avatar,
body.single-product #reviews img.cr-std-avatar,
body.single-product #reviews .comment_container > img {
	display: none !important;
}
body.single-product #reviews .comment_container {
	padding-left: 0 !important;
	margin-left: 0 !important;
}
body.single-product #reviews .cr-comment-text {
	width: 100% !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
	border-bottom: 0 !important;
}
/*    De grijze scheidingslijn onder de laatste beoordeling: daar komt niets meer na.   */
body.single-product #reviews li.review:last-child,
body.single-product #reviews .commentlist > li:last-child {
	border-bottom: 0 !important;
}

/* De ivole-summaryBox blijft een lege kolom van 440 px als het staafdiagram eruit is; */
/* daardoor bleef de balk dik en kon de knop niet naar rechts. Bij weinig beoordelingen */
/* gaat die kolom helemaal weg en wordt de samenvatting een rij over de volle breedte.  */
body.single-product #reviews[data-sk-reviews="weinig"] .ivole-summaryBox {
	display: none !important;
}
body.single-product #reviews[data-sk-reviews="weinig"] .cr-overall-rating-wrap {
	width: 100% !important;
	flex: 1 1 100% !important;
	justify-content: flex-start !important;
}
/* De scheidingslijn onder de laatste beoordeling. De regel van de reviewplugin zit    */
/* achter een selector met een id, dus het id hier verdubbeld om ervan te winnen.      */
body.single-product #reviews#reviews ol.commentlist > li:last-child,
body.single-product #reviews#reviews ul.commentlist > li:last-child {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* De knop had van het thema een marge van 657 px links meegekregen; in een flexrij   */
/* duwde dat hem naar een eigen regel en werd de balk 205 px hoog in plaats van 48.    */
body.single-product #reviews .cr-ajax-reviews-add-review {
	margin: 0 0 0 auto !important;
	flex: 0 0 auto;
}
/* De rand komt van '.woocommerce-page #reviews #comments ol.commentlist li' met twee  */
/* id's en !important. Dezelfde twee id's plus een klasse extra wint daarvan.          */
body.woocommerce-page #reviews #comments ol.commentlist li.review:last-child,
body.woocommerce #reviews #comments ol.commentlist li.review:last-child {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* De reviewplugin zet flex-direction: column op de samenvatting, dus alles stond     */
/* onder elkaar. De flex-direction: column van de reviewplugin wordt hier een rij.     */
body.single-product #reviews[data-sk-reviews="weinig"] .cr-overall-rating-wrap,
body.single-product #reviews .cr-summaryBox-wrap {
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px;
}
body.single-product #reviews .cr-average-rating {
	font-weight: 700;
}

/* Het blok was onder 768 px verborgen, uit de tijd dat het een carrousel in de smalle */
/* koopkolom was. Als raster past het daar prima, en mobiel is juist waar mensen door   */
/* producten bladeren.                                                                  */
@media only screen and (max-width: 768px) {
	body.single-product #left-area .product #customized_carousel_product_page,
	body.single-product #customized_carousel_product_page {
		display: block !important;
	}
}
/* Altijd een volle rij: op desktop vier kaartjes, daaronder drie. De rest valt weg,   */
/* anders staat er een los kaartje op een eigen regel.                                 */
body.single-product #customized_carousel_product_page ul.products li.product:nth-child(n+5) {
	display: none !important;
}
@media only screen and (max-width: 980px) and (min-width: 641px) {
	body.single-product #customized_carousel_product_page ul.products li.product:nth-child(n+4) {
		display: none !important;
	}
}


/* ================================================================== */
/* 15 september 2026 - een vast ritme tussen de blokken                */
/* ================================================================== */
/* Onder de koopknoppen stond 50 px lucht op de plek waar de Let op!-  */
/* regel stond, tussen de kolommen en Vergelijkbare producten 161 px,  */
/* en tussen Vergelijkbare producten en de reviewtitel 10 px. Vanaf nu */
/* overal hetzelfde: 30 px tussen de blokken binnen de koopkolom,      */
/* 40 px tussen de losse blokken onder elkaar.                         */

/* --- Koopkolom ----------------------------------------------------- */
/* Het blokje waar de Let op!-regel in stond is leeg maar telde nog wel */
/* mee: 10 + 20 px eigen marge plus 20 px van de betaallogo's is 50 px. */
body.single-product div.summary form.cart > div:has(> .custom-add-to-cart-content) {
	margin: 10px 0 0 !important;
}
/* USP-regels naar Veelgestelde vragen was 18 px. */
body.single-product div.summary form.cart > .accordion-container {
	margin-top: 30px !important;
}

/* --- Einde van de koopkolom ---------------------------------------- */
/* Onder de contactknop stapelden drie marges op: 50 + 39 + 28 px.      */
body.single-product div.summary form.cart > div:last-of-type {
	margin-bottom: 0 !important;
}
body.woocommerce div.product div.summary form.cart {
	margin-bottom: 0 !important;
}
body.woocommerce #content-area div.product div.summary.entry-summary {
	margin-bottom: 0 !important;
}

/* --- De losse blokken daaronder: overal 40 px ----------------------- */
body.single-product #customized_carousel_product_page {
	margin-top: 40px !important;
}
/* Het reviewblok stond op 85% breedte en 7,5% ingesprongen, terwijl    */
/* alles erboven de volle 1060 px is. Daardoor leek alles erin zomaar   */
/* ergens te staan, de melding "nog geen beoordelingen" voorop.         */
body.single-product #reviews#reviews {
	width: auto !important;
	max-width: none !important;
	margin: 40px 0 !important;
}
/* Zelfde kop als Vergelijkbare producten, ook links. */
body.single-product #reviews#reviews::before {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	margin: 0 0 20px;
}

/* --- De grijze balk boven de reviews -------------------------------- */
/* De knop stond tegen de bovenrand aan; de balk had alleen onderin     */
/* ruimte. Nu even veel ruimte boven als onder.                         */
body.single-product #reviews#reviews .cr-summaryBox-wrap {
	align-items: center !important;
	padding: 12px 18px !important;
	margin: 0 0 28px !important;
	border-radius: 12px;
}
body.single-product #reviews#reviews .cr-overall-rating-wrap {
	align-items: center !important;
	padding: 0 !important;
	width: 100% !important;
}

/* --- Nul beoordelingen ---------------------------------------------- */
/* Dezelfde balk als hierboven, zodat de melding ergens in staat in     */
/* plaats van los links te zweven. */
body.single-product #reviews#reviews[data-sk-reviews="geen"] .woocommerce-noreviews {
	background: #f9f9f9;
	border-radius: 12px;
	padding: 18px;
	margin: 0 0 28px;
	color: #555;
	font-size: 15px;
}
/* Het formulier stond gecentreerd (marge links en rechts automatisch), */
/* de melding erboven linksuit. Nu allebei links.                       */
body.single-product #reviews#reviews .cr-review-form-wrap {
	max-width: 620px;
}
body.single-product #reviews#reviews .cr-review-form-wrap > *,
body.single-product #reviews#reviews [class^="cr-review-form-"] {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Vergelijkbare producten: de rij altijd vol --------------------- */
/* Het raster staat op vier kolommen. Heeft een product er maar drie,   */
/* dan bleef er rechts een gat over. data-sk-aantal komt uit mu-plugin  */
/* superkeys-verwante-producten.php en is het aantal zichtbare kaarten. */
@media only screen and (min-width: 981px) {
	body.single-product #customized_carousel_product_page[data-sk-aantal="3"] ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	body.single-product #customized_carousel_product_page[data-sk-aantal="2"] ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.single-product #customized_carousel_product_page[data-sk-aantal="1"] ul.products {
		grid-template-columns: minmax(0, 1fr);
		max-width: 320px;
	}
}
@media only screen and (max-width: 980px) {
	body.single-product #customized_carousel_product_page[data-sk-aantal="2"] ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.single-product #customized_carousel_product_page[data-sk-aantal="1"] ul.products {
		grid-template-columns: minmax(0, 1fr);
		max-width: 320px;
	}
}

/* Op mobiel staat het blok met beschrijving en specificaties los onder  */
/* de kolommen; daar was het 10 px erboven en 45 px eronder.             */
@media only screen and (max-width: 980px) {
	body.single-product div.product > .woocommerce-tabs {
		margin: 40px 0 !important;
	}
}


/* ================================================================== */
/* 15 september 2026, tweede ronde - zes punten uit de meeleesronde    */
/* ================================================================== */

/* 1. De kop boven de reviews stond op zwart met een andere regelhoogte */
/*    dan de kop van Vergelijkbare producten. Nu allebei 22 px, 600,    */
/*    #333, regelhoogte 22 px en 16 px eronder.                         */
body.single-product #reviews#reviews::before {
	color: #333;
	line-height: 22px;
	margin: 0 0 16px;
}

/* 2. Het reviewformulier en de inlogknop voor uitgelogde bezoekers     */
/*    weer in het midden. De linkse uitlijning van vanochtend draaien   */
/*    we dus terug; de grijze balk erboven blijft wel volle breedte.    */
body.single-product #reviews#reviews .cr-review-form-wrap {
	max-width: none;
}
body.single-product #reviews#reviews .cr-review-form-wrap > *,
body.single-product #reviews#reviews [class^="cr-review-form-"] {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3. De Lees meer-knop hoort bij zijn eigen tabblad.                   */
/*    De knop staat naast het paneel en niet erin, en uitgelogd zette   */
/*    het script hem niet altijd op tijd weg: dan stonden er twee onder */
/*    de beschrijving en een losse bovenaan de voorwaarden. WooCommerce */
/*    verbergt een inactief paneel met style="display: none", dus dat   */
/*    vangen we hier rechtstreeks af. Geen timing meer aan te pas.      */
body.single-product .woocommerce-Tabs-panel[style*="display: none"] + .sk-lees-meer,
body.single-product .woocommerce-Tabs-panel[style*="display:none"] + .sk-lees-meer {
	display: none !important;
}

/* 4. Tabbladen: even breed, even hoog, blauwe lijn altijd onderaan.    */
/*    "Specificaties en voorwaarden" loopt op smallere schermen over    */
/*    twee regels. De blauwe lijn stond in de tekststroom en schoof dus */
/*    mee naar beneden, en het actieve tabblad was 13 px hoger dan het  */
/*    andere. Nu staat de lijn vast onderaan en blijft de balk even     */
/*    hoog, ook als je van tabblad wisselt.                             */
#main-content #content-area .woocommerce-tabs ul.tabs {
	align-items: stretch !important;
}
#main-content #content-area .woocommerce-tabs ul.tabs > li {
	display: flex !important;
	flex: 1 1 0 !important;
}
#main-content #content-area .woocommerce-tabs ul.tabs > li > a {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 12px 10px 15px !important;
	line-height: 18px !important;
}
#main-content #content-area .woocommerce-tabs ul.tabs > li.active > a::after,
#main-content #content-area .woocommerce-tabs ul.tabs > li > a::after {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	margin: 0 !important;
	height: 3px !important;
}

/* 5. Koopknoppen die meeschalen.                                       */
/*    Ze stonden op hun eigen tekstbreedte met flex-shrink aan. Zodra   */
/*    de koopkolom smaller werd (op 1024 px is hij 366 in plaats van    */
/*    499) brak "In winkelwagen" over twee regels en werd de pil een    */
/*    bult. Nu een vaste verhouding 58/42 van de kolom, met 12 px       */
/*    ertussen, en de tekst breekt niet meer af.                        */
body.single-product #custom_cart_buttons_wrapper_new {
	gap: 12px !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
}
body.single-product #custom_cart_buttons_wrapper_new > a.custom_add_cart_button_new {
	flex-basis: calc(58% - 6px) !important;
}
body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button {
	flex-basis: calc(42% - 6px) !important;
}
body.single-product #custom_cart_buttons_wrapper_new > a.custom_add_cart_button_new,
body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button {
	min-width: 0 !important;
	white-space: nowrap !important;
}

/* 6. Bij hover over een vergelijkbaar product stond een plus, alsof je */
/*    het in de winkelwagen legde. De link gaat naar de productpagina,  */
/*    dus dat klopte niet. Nu de sleutel uit het logo, in dezelfde      */
/*    blauwtint als de prijs en de knoppen op de kaartjes.              */
body.single-product #customized_carousel_product_page .et_overlay {
	display: flex;
	align-items: center;
	justify-content: center;
}
body.single-product #customized_carousel_product_page .et_overlay::before {
	content: "" !important;
	display: block;
	width: 34px;
	height: 34px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%230057d9%22%20fill-rule=%22evenodd%22%20d=%22M12%201a5.5%205.5%200%201%200%200%2011%205.5%205.5%200%200%200%200-11zm0%203.4a2.1%202.1%200%201%201%200%204.2%202.1%202.1%200%200%201%200-4.2z%22/%3E%3Cpath%20fill=%22%230057d9%22%20d=%22M10.7%2011.4h2.6v11.2h-2.6z%22/%3E%3Cpath%20fill=%22%230057d9%22%20d=%22M13.3%2014.3h3.4v2.3h-3.4zM13.3%2018.2h2.6v2.3h-2.6z%22/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ================================================================== */
/* 15 september 2026, derde ronde                                      */
/* ================================================================== */

/* 1. Menu terug tussen 768 en 980 px.                                 */
/*    Er stond al een regel die de hamburger in die band terugzet      */
/*    (header.et-l .et_pb_module.et_pb_menu_0_tb_header), maar die     */
/*    werkte op de ene productpagina wel en op de andere niet: ergens  */
/*    zit een regel met meer ids en !important die hem weer verbergt.  */
/*    Gemeten: Windows 11 Pro op 900 px had de hamburger, Age of       */
/*    Empires III op dezelfde breedte niet. Met drie ids wint deze     */
/*    regel in beide gevallen. Boven 980 px neemt het megamenu het     */
/*    over (dat verbergt zichzelf onder 980), dus er valt nu nergens   */
/*    meer een gat.                                                    */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	#page-container #main-site-header #mobile_menu_custom_hamburger {
		display: block !important;
	}
}

/* 2. De sleutel over de productfoto weer weg; alleen de lichtblauwe   */
/*    waas bij hover blijft.                                           */
body.single-product #customized_carousel_product_page .et_overlay::before {
	display: none !important;
}

/* 3. Koopknoppen: winkelwagenicoon eruit en de tekst blijft binnen de */
/*    pil. Het icoon (WPMenuCart-lettertype) nam 22 px in beslag,      */
/*    waardoor "In winkelwagen" bij een smalle kolom buiten de rand    */
/*    viel - op 900 px is die kolom maar 307 px, dus de knop 123 px    */
/*    terwijl de tekst 132 px nodig had. min-width: max-content zorgt  */
/*    dat de tekst nooit meer uitsteekt; past het niet naast elkaar,   */
/*    dan zakt de tweede knop een regel.                               */
body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button::before {
	display: none !important;
}
body.single-product #custom_cart_buttons_wrapper_new {
	flex-wrap: wrap !important;
}
body.single-product #custom_cart_buttons_wrapper_new > a.custom_add_cart_button_new,
body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button {
	min-width: max-content !important;
}

/* 4. Reviewbalk op de telefoon. De knop zakt daar naar een eigen      */
/*    regel en stond dan rechts uitgelijnd onder de sterren, wat       */
/*    scheef oogde. Nu gecentreerd.                                    */
@media only screen and (max-width: 767px) {
	body.single-product #reviews#reviews .cr-ajax-reviews-add-review {
		margin: 14px auto 0 !important;
	}
}

/* 5. De afgeknipte tekst liep tegen de Lees meer-knop aan.            */
body.single-product .sk-lees-meer {
	margin-top: 14px;
}

/* 3b. Onder 981 px is de koopkolom een stuk smaller (op 900 px maar 307 */
/*     px), en dan past 58/42 net niet meer: "In winkelwagen" heeft 134  */
/*     px nodig en kreeg er 123, dus zakte de knop naar een eigen regel. */
/*     Daar dus 52/48; op de telefoon en op desktop verandert er niets   */
/*     zichtbaars.                                                       */
@media only screen and (max-width: 980px) {
	body.single-product #custom_cart_buttons_wrapper_new > a.custom_add_cart_button_new {
		flex-basis: calc(52% - 6px) !important;
	}
	body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button {
		flex-basis: calc(48% - 6px) !important;
	}
}


/* ================================================================== */
/* 15 september 2026, vierde ronde                                     */
/* ================================================================== */

/* 1. De vervaging boven de Lees meer-knop ontbrak bij producten waar   */
/*    de beschrijving met de Divi-bouwer is gemaakt. Daar zit een       */
/*    .et_builder_inner_content met z-index 1 omheen, en die schilderde */
/*    over de vervaging heen - die had geen z-index. Bij producten met  */
/*    een gewone beschrijving viel dat niet op, vandaar het verschil    */
/*    met het tabblad Specificaties en voorwaarden.                     */
body.single-product.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel.sk-inklap::after {
	z-index: 2;
}

/* 2. Winkelwagenicoon weer terug, behalve waar het niet past.          */
/*    Onder 768 px staan de knoppen onder elkaar over de volle breedte, */
/*    dus daar is ruimte zat. Vanaf 1281 px is de koopkolom minstens    */
/*    482 px en past het ook. Daartussen heeft "In winkelwagen" met     */
/*    icoon 187 px nodig terwijl er 160 beschikbaar is; dan zakte de    */
/*    knop naar een eigen regel. Daar laten we het icoon dus weg.       */
body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button::before {
	display: inline-block !important;
}
@media only screen and (max-width: 767px) {
	body.single-product #custom_cart_buttons_wrapper_new > a.custom_add_cart_button_new,
	body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button {
		flex-basis: 100% !important;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
	body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button::before {
		display: none !important;
	}
}
/* Het icoon maakt zijn knop 6 px hoger dan de andere. Allebei even hoog. */
body.single-product #custom_cart_buttons_wrapper_new > a.custom_add_cart_button_new,
body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button {
	min-height: 52px !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 3. De zoekbalk in de koptekst.                                       */
/*    Onder 981 px zakt hij naar een eigen regel, maar hij bleef een    */
/*    kolom van een kwart breed: op 900 px 340 px in een rij van 708.   */
/*    Nu de volle breedte, net als op de telefoon. En op de telefoon    */
/*    stak hij 8 px links en 10 px rechts buiten de rij uit, terwijl    */
/*    het hamburgermenu er 15 px links buiten hing. Nu beginnen het     */
/*    menu en de zoekbalk op dezelfde lijn en eindigen de zoekbalk en   */
/*    de winkelwagenknop op dezelfde lijn.                              */
@media only screen and (max-width: 980px) {
	#main-site-header #header_mobile_search_custom {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}
@media only screen and (max-width: 767px) {
	/* Niet met left: dan schuift het hele menublok mee - dat is 745 px    */
	/* breed - en krijg je een horizontale scrollbalk. Alleen het icoontje. */
	#main-site-header #mobile_menu_custom_hamburger .mobile_menu_bar {
		margin-left: 15px !important;
	}
	/* Het logo stond 30 px van de rand; met het menu 15 px naar rechts   */
	/* raakten ze elkaar bijna. Nu weer 16 px ertussen.                   */
	#main-site-header #mobile_logo_custom_header {
		margin-left: 48px !important;
	}
}

/* 4. In de mobiele indeling stond de productfoto links in een kader    */
/*    over de volle breedte.                                            */
body.single-product .mobile_productpage_image {
	text-align: center !important;
}
body.single-product .mobile_productpage_image img {
	display: inline-block;
}


/* ================================================================== */
/* 15 september 2026, vijfde ronde - ruimte winnen boven de vouw       */
/* ================================================================== */

/* 1. Op de telefoon viel de prijs precies buiten beeld: hij begon op   */
/*    827 px bij een vouw van 844. Twee dingen aten die ruimte op.      */
/*    Het kruimelpad nam 95 px over drie regels (de productnaam stond   */
/*    er helemaal in; die haalt mu-plugin superkeys-productpagina-      */
/*    teksten.php er nu af) en de foto 342 px. Samen goed voor 148 px.  */
/*    Gemeten na afloop: prijs op 679, chips tot 801, allebei ruim      */
/*    binnen het eerste scherm.                                        */
@media only screen and (max-width: 767px) {
	body.single-product .woocommerce-breadcrumb {
		font-size: 13px !important;
		line-height: 1.45 !important;
	}
	body.single-product .mobile_productpage_image img {
		max-height: 260px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* 2. Het USB-keuzeblok stond in twee regels onder elkaar en was 198 px */
/*    hoog. Daardoor zakten de koopknoppen op een laptop van 1440x820   */
/*    net onder de vouw (849). Naast elkaar is het blok 137 px en staan */
/*    de knoppen op 788: wel in beeld. De twee vakjes worden even hoog  */
/*    gehouden, anders oogt het scheef.                                 */
@media only screen and (min-width: 981px) {
	body.single-product .sk-usb-choice {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
		align-items: stretch !important;
	}
	body.single-product .sk-usb-choice__title {
		grid-column: 1 / -1 !important;
		margin-bottom: 0 !important;
	}
	body.single-product .sk-usb-choice__option {
		margin: 0 !important;
	}
}

/* 3. Koopknoppen weer naast elkaar op de telefoon.                     */
/*    Dat scheelt 64 px precies waar het krap is. Het lukte niet met    */
/*    flex: de winkelwagenknop negeert elke regel over flex-basis,      */
/*    flex-grow, padding en font-size - ook met vier ids en !important. */
/*    Met display:grid op de wikkel doet dat er niet meer toe, want dan */
/*    komt de breedte van de kolom en niet van de knop zelf. De tekst   */
/*    is ingekort tot "Winkelwagen" (zie de mu-plugin); daarmee past    */
/*    het icoontje er vanaf 360 px bij. Daaronder gaat het icoon weg.   */
@media only screen and (max-width: 767px) {
	/* Even breed leek "Winkelwagen" groter dan "Nu kopen": een witte knop met
	   een rand en een icoontje oogt zwaarder dan een gevulde. Daarom krijgt de
	   hoofdknop 15% meer breedte. */
	body.single-product #custom_cart_buttons_wrapper_new {
		display: grid !important;
		grid-template-columns: 1.15fr 1fr !important;
		gap: 10px !important;
	}
	body.single-product #custom_cart_buttons_wrapper_new > a.custom_add_cart_button_new,
	body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button {
		min-width: 0 !important;
	}
}
@media only screen and (max-width: 359px) {
	body.single-product #custom_cart_buttons_wrapper_new > button.single_add_to_cart_button::before {
		display: none !important;
	}
}


/* ================================================================== */
/* 15 september 2026, zesde ronde - dode ruimte boven de foto          */
/* ================================================================== */
/* Luuk zag op zijn telefoon de prijs nog net wegvallen, terwijl mijn  */
/* meting zei dat hij paste. Verschil: ik mat tegen een kale 844 px    */
/* hoge viewport, maar Safari houdt boven en onder een balk, dus in    */
/* de praktijk is er ongeveer 715 px zichtbaar. Zijn schermafbeelding  */
/* klopt precies met de meting: prijs op 691-738, dus de onderkant     */
/* viel eraf.                                                          */
/*                                                                     */
/* De ruimte tussen het kruimelpad en het blauwe fotokader was 40 px,  */
/* en het kader had zelf 20 px lucht boven en onder de foto plus 20 px */
/* eronder. Dat is dode ruimte; de foto hoeft er niet kleiner voor.    */
/* Na het inkorten staat de prijs op 649-696, dus met bijna 20 px      */
/* speling binnen beeld - ook op een product met beoordelingsregel.    */
@media only screen and (max-width: 767px) {
	body.single-product .woocommerce-breadcrumb {
		margin-bottom: 12px !important;
	}
	body.single-product .mobile_productpage_image {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		margin-bottom: 12px !important;
	}
}


/* Productpagina: bij producten met maar een foto zat er 30 px extra tussen
   de foto en het beschrijvingsblok. Met meerdere foto's haalt de slider dat weg. */
.woocommerce-product-gallery__wrapper > .woocommerce-tabs:nth-child(2):last-child {
	margin-top: 0;
}


/* Mobiel: de winkelwagen rechts uitlijnen met de zoekbalk. Zonder dit staat de knop
   links in zijn kolom en steekt hij bij een volle mand rechts uit. */
@media (max-width: 980px) {
	.et_pb_menu_1_tb_header ul.et_mobile_menu,
	ul.et_mobile_menu:has(> li > a.wpmenucart-contents) {
		width: 100% !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: right !important;
	}
	.et_pb_menu_1_tb_header .et_mobile_nav_menu,
	.et_pb_menu .et_mobile_nav_menu:has(a.wpmenucart-contents) {
		margin-right: 0 !important;
	}
}


/* De voettekst brengt zijn eigen blauwe balk en binnenmarge mee. De Divi-sectie en rij
   eromheen moeten dus kaal staan, anders zit er wit boven en onder de balk. */
.et_pb_section:has(.sk-voet),
.et_pb_row:has(.sk-voet),
.et_pb_column:has(.sk-voet),
.et_pb_module:has(.sk-voet) {
	padding: 0 !important;
	margin: 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
}


/* Voettekst: op productpagina's overschrijft WooCommerce de breedte van afbeeldingen,
   waardoor de betaallogo's paginabreed werden. Daarom hier met voorrang. */
.sk-voet img.sk-voet-betaal {
	max-width: 300px !important;
	width: 100% !important;
	height: auto !important;
}
.sk-voet .sk-voet-merk img {
	width: 158px !important;
	max-width: 158px !important;
	height: auto !important;
}
.sk-voet .sk-voet-rechts {
	min-width: 270px;
}

/* Mobiel: het beoordelingskaartje staat rechts uitgelijnd, met deze breedte komt het
   op een telefoon links uit in plaats van ergens in het midden. */
@media (max-width: 980px) {
	.sk-voet .sk-voet-keur {
		width: 250px;
		max-width: 100%;
	}
}


/* Kortingslabels zijn overal oranje in plaats van rood. Het label in de koptekst zit
   in de codemodule van het template, dus die zetten we hier om. */
#sk-menu .sk-tag {
	background: #FF8100 !important;
	color: #1B2430 !important;
}


/* Eén oranje op de hele site. Deze regels staan in het Divi-integratieveld (de 91 KB)
   dat we bewust niet aanraken, dus de kleur wordt hier overschreven. */
#shop_by_bestsellers_slider button.slick-prev,
#shop_by_bestsellers_slider button.slick-next {
	background: #FF8100 !important;
	color: #1B2430 !important;
}
.cart_update_button_custom_wrapper > button.button {
	border-color: #FF8100 !important;
	color: #1B2430 !important;
}
body.page-id-61 #thank_you_buttons #contact_us {
	border-color: #FF8100 !important;
	color: #1B2430 !important;
}
body.page-id-61 #thank_you_buttons #contact_us:before {
	color: #1B2430 !important;
}
body.single-product #customized_carousel_product_page ul.products li.product.type-product > a > span.price:after {
	border-color: #0057D9 !important;
}

/* === 16 september 2026 - categoriepagina's, stap 1: productkaartjes zoals op de homepage ===
De kaartjes op categorie- en winkelpagina's krijgen dezelfde opmaak als .sk-prodgrid op de
homepage (pagina 44425): witte kaart, rand #E3E8EF, radius 12, titel op twee regels, blauwe
prijs met rond pijltje, oranje hover. De HTML is op beide plekken dezelfde WooCommerce-lus,
dus dit is alleen CSS. De oude regels voor deze tegels (grijze fotorand, hoogte 230 px, zwarte
prijs) staan deels in het Divi-integratieveld met #left-area en !important; daarom staan hier
twee id's in de selector (#main-content #left-area) - dat wint zonder dat veld aan te raken.
Ook meegenomen: op precies 768 px was een tegel maar 45% van zijn kolom breed (161 van 359 px),
door een oude float-regel in het integratieveld die de reparatie van 9 september (tot 767 px)
net miste. width:auto op de tegel lost dat op.
Terugdraaien: dit hele blok weghalen. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products {
gap: 16px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 14px !important;
border: 1px solid #E3E8EF !important;
border-radius: 12px !important;
background: #fff !important;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover {
border-color: #FF8100 !important;
box-shadow: 0 6px 18px rgba(255,129,0,.14);
transform: translateY(-2px);
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product > a.woocommerce-loop-product__link {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto;
gap: 0;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .et_shop_image {
display: block !important;
margin: 0 0 14px !important;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .et_overlay,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product span.onsale {
display: none !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product a img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #fff;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product h2.woocommerce-loop-product__title {
margin: 0 0 10px !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
color: #1B2430 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .star-rating {
margin: 0 0 12px !important;
font-size: 12px !important;
}
/* De prijs zakt met margin-top:auto naar de onderkant, zodat prijzen in een rij op dezelfde
lijn staan, ook als het ene product sterren heeft en het andere niet. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price {
position: relative;
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: auto 0 0 !important;
padding: 12px 40px 0 0 !important;
border-top: 1px solid #F0F3F8;
line-height: 1.2 !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price span,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price ins,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price bdi {
color: #0057D9 !important;
font-size: 18px !important;
font-weight: 800 !important;
text-decoration: none !important;
background: none !important;
transition: color .15s;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price del,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price del span,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price del bdi {
display: inline-block !important;
color: #98A2B3 !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: line-through !important;
opacity: 1 !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price::after {
content: "\2192";
position: absolute;
right: 0;
top: calc(50% + 6px);
transform: translateY(-50%);
width: 30px;
height: 30px;
margin: 0;
border-radius: 50%;
background: #EEF5FE;
color: #0057D9;
font-size: 16px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .15s, color .15s;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price span,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price ins,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price bdi {
color: #0057D9 !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price del,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price del span,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price del bdi {
color: #98A2B3 !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product:hover .price::after {
background: #FF8100;
color: #1B2430;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .sk-bespaart-kaart {
align-self: flex-start;
margin-top: 8px !important;
}
@media (max-width: 980px) {
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products {
gap: 10px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products > li.product {
padding: 12px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .et_shop_image {
margin: 0 0 10px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product h2.woocommerce-loop-product__title {
font-size: 13px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price span,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price ins,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price bdi {
font-size: 16px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price del,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price del span,
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price del bdi {
font-size: 12px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price {
padding-right: 34px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .price::after {
width: 26px;
height: 26px;
font-size: 14px;
}
}
/* Twee kleurfouten op dezelfde pagina's. De resultaattelling was #999 op wit (contrast 2,85);
#667085 haalt 4,8. De knop Toepassen van het prijsfilter was wit op #FF7E00 (contrast 2,55);
volgens de afspraak van 16 september is oranje als vlak #FF8100 met tekst #1B2430 (6,3).
Die knopregel staat in het Divi-integratieveld; html ervoor maakt deze zwaarder. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content p.woocommerce-result-count {
color: #667085 !important;
}
html body.tax-product_cat #sidebar button.wp-block-button__link.wc-block-filter-submit-button,
html body.post-type-archive-product #sidebar button.wp-block-button__link.wc-block-filter-submit-button {
background: #FF8100 !important;
color: #1B2430 !important;
}
/* === einde 16 september, stap 1 === */

/* === 16 september 2026 - categoriepagina's, stap 2: paginering in de huisstijl ===
Oneindig scrollen (WooCommerce Load More Products van BeRocket) is uitgezet; er staan nu
24 producten per pagina (mu-plugin superkeys-categorie-paginering.php) en daaronder de gewone
paginering van WooCommerce. Die had nog de paarse standaardkleuren van WooCommerce. Nu ronde
vakjes van 40 px zoals de chips op de homepage: huidige pagina blauw, hover oranje.
Terugdraaien: dit blok weghalen. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination {
margin: 32px 0 8px !important;
text-align: center;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers {
display: inline-flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
list-style: none;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers::before,
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers::after {
display: none !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers li {
display: block !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: visible !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers li .page-numbers {
display: flex !important;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box;
border: 1px solid #E3E8EF !important;
border-radius: 10px;
background: #fff !important;
color: #1B2430 !important;
font-size: 15px !important;
font-weight: 700;
line-height: 1 !important;
text-decoration: none !important;
transition: border-color .15s, color .15s, background-color .15s;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
border-color: #FF8100 !important;
color: #1B2430 !important;
background: #fff !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
border-color: #0057D9 !important;
background: #0057D9 !important;
color: #fff !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
border-color: transparent !important;
background: transparent !important;
color: #667085 !important;
min-width: 24px;
padding: 0 !important;
}
/* Op 320 px passen zeven vakjes van 40 px niet naast elkaar; daar 34 px met 6 px ertussen. */
@media (max-width: 359px) {
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers {
gap: 6px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content nav.woocommerce-pagination ul.page-numbers li .page-numbers {
min-width: 34px;
height: 34px;
padding: 0 8px !important;
font-size: 14px !important;
}
}
/* === einde 16 september, stap 2 === */

/* === 16 september 2026 - categoriepagina's, stap 3: korte intro boven, beschrijving onder ===
De HTML komt uit mu-plugin superkeys-categorie-intro.php: p.sk-cat-intro onder de H1 en
section.sk-cat-over onder de paginering. Terugdraaien: dit blok en dat bestand weghalen. */
body.tax-product_cat #main-content p.sk-cat-intro {
max-width: 900px;
margin: 0 0 18px !important;
padding: 0 !important;
font-size: 15px;
line-height: 1.55;
color: #667085;
}
body.tax-product_cat #main-content section.sk-cat-over {
margin: 48px 0 8px;
padding: 24px 28px;
background: #F7F9FC;
border: 1px solid #E3E8EF;
border-radius: 12px;
}
body.tax-product_cat #main-content section.sk-cat-over h2.sk-cat-over__kop {
margin: 0 0 12px !important;
padding: 0 !important;
font-size: 22px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
letter-spacing: -.4px;
color: #1B2430 !important;
}
body.tax-product_cat #main-content section.sk-cat-over .sk-cat-over__tekst p {
margin: 0 0 12px !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: #667085 !important;
}
body.tax-product_cat #main-content section.sk-cat-over .sk-cat-over__tekst p:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 980px) {
body.tax-product_cat #main-content p.sk-cat-intro {
font-size: 14px;
margin-bottom: 14px !important;
}
body.tax-product_cat #main-content section.sk-cat-over {
margin-top: 36px;
padding: 18px 18px;
}
body.tax-product_cat #main-content section.sk-cat-over h2.sk-cat-over__kop {
font-size: 19px !important;
}
}
/* === einde 16 september, stap 3 === */

/* === 16 september 2026 (avond) - laatste afwijkende oranjes, en Vergelijkbare producten met korting ===
Gevonden met een scan van alle zichtbare kleuren op home, categorie, product, winkelwagen,
afrekenen, account en contact (390 en 1440 px). Afspraak: oranje als vlak = #FF8100 met tekst
#1B2430, oranje als tekst komt niet meer voor (zie het blok eronder). Sterren (#F9BF3B, #FFBC00) blijven geel.
Terugdraaien: dit blok weghalen. */

/* 1. Productpagina: knop "Nog vragen? Contact opnemen" was wit op #FF7E00 (contrast 2,55).
De kleur staat inline op de link, vandaar !important. */
body.single-product .summary a[style*="FF7E00"],
body.single-product .summary a[style*="ff7e00"] {
background: #FF8100 !important;
color: #1B2430 !important;
}
/* 2. Reviews (Customer Reviews): knoppen en balkjes stonden op #FF7E00 in het integratieveld. */
html body.single-product #reviews.cr-reviews-ajax-reviews .cr-overall-rating-wrap button.cr-ajax-reviews-add-review,
html body.single-product #reviews.cr-reviews-ajax-reviews .cr-review-form-not-logged-in > a.cr-review-form-continue,
html body.single-product #reviews.cr-reviews-ajax-reviews #review_form_wrapper button.cr-review-form-submit,
html body.single-product #reviews.cr-reviews-ajax-reviews .cr-review-form-result button.cr-review-form-continue.cr-review-form-success {
background: #FF8100 !important;
color: #1B2430 !important;
}
html body.single-product #reviews.cr-reviews-ajax-reviews .ivole-summaryBox.cr-summaryBox-ajax .ivole-meter .ivole-meter-bar,
html body #ratings_bars_reviews_wrapper_products .glsr-summary .glsr-bar-background-percent {
background: #FF8100 !important;
background-color: #FF8100 !important;
}
/* 3. USB-stick-keuze op de productpagina: gekozen optie had rand #FF7E00 op #FFF8F1. */
html body .sk-usb-choice__option:has(input:checked) {
border-color: #FF8100 !important;
background: #FFF7EF !important;
}
/* 4. Winkelchip op de productpagina (superkeys-productchips.php) had eigen tinten
(#F0A33C, #FFF6E9, #8A5006). Nu de lichte huisstijltinten met donkere tekst. */
body.single-product .sk-chip.sk-chip--winkel {
border-color: #FFD2A6 !important;
background: #FFF7EF !important;
color: #1B2430 !important;
}
body.single-product .sk-chip.sk-chip--winkel .sk-chip__label {
color: #667085 !important;
}
/* 5. Afrekenen: de knop "Profiteer van deal!" van UpsellWP had inline oranje tekst #FF8100 op
#F9E8D6 (contrast 2,2). Nu een oranje vlak met donkere tekst. */
body.woocommerce-checkout .cuw-offer-cta-section button.cuw-button {
background: #FF8100 !important;
border-color: #FF8100 !important;
color: #1B2430 !important;
}
body.woocommerce-checkout .cuw-offer-cta-section button.cuw-button .cuw-offer-cta-text {
color: #1B2430 !important;
}
/* 6. Cookie-icoon linksonder (CookieConfirm) stond op #FFA602. */
#cc-icon svg path[fill="#ffa602"],
#cc-icon svg path[fill="#FFA602"] {
fill: #FF8100 !important;
}

/* 7. Vergelijkbare producten (productpagina), knop "Ga naar product": de rand was bruin-oranje terwijl
tekst en hovervlak blauw zijn. Bruin-oranje om een blauwe knop oogde fout; rand nu ook blauw. */
body.single-product #customized_carousel_product_page ul.products li.product.type-product > a > span.price::after {
border-color: #0057D9 !important;
}
/* 8. Vergelijkbare producten met korting. Op mobiel pasten de oude en de nieuwe prijs niet naast
elkaar (de oude prijs had dezelfde grootte als de nieuwe), en het label "Je bespaart" stond onder
de knop, omdat de knop een ::after van de prijs is en het label pas daarna komt. Nu: oude prijs
klein en grijs naast de nieuwe, en het label boven de prijs. Het label krijgt margin-top:auto,
zodat prijs en knop onderaan blijven staan zoals bij de kaartjes zonder korting. Het dubbele id
is nodig om van de regel met margin:auto !important uit het integratieveld te winnen. */
body.single-product #customized_carousel_product_page#customized_carousel_product_page ul.products li.product.type-product > a > span.price del,
body.single-product #customized_carousel_product_page#customized_carousel_product_page ul.products li.product.type-product > a > span.price del * {
font-size: 14px !important;
font-weight: 600 !important;
color: #98A2B3 !important;
opacity: 1 !important;
}
body.single-product #customized_carousel_product_page#customized_carousel_product_page ul.products li.product.type-product > a > span.price del {
margin-right: 6px !important;
vertical-align: baseline;
}
body.single-product #customized_carousel_product_page#customized_carousel_product_page ul.products li.product.type-product > a > .sk-bespaart-kaart {
order: 1;
align-self: center;
width: auto !important;
margin: auto 0 0 !important;
}
body.single-product #customized_carousel_product_page#customized_carousel_product_page ul.products li.product.type-product > a:has(> .sk-bespaart-kaart) > span.price {
order: 2;
margin: 6px 0 0 !important;
}
/* === einde 16 september (avond), oranje en Vergelijkbare producten === */

/* === 16 september 2026 (avond, 2) - geen bruin-oranje meer, en het bespaarlabel boven de prijs ===
Luuk vond #C65E00 bruin ogen. Nieuwe afspraak, 16 september: oranje bestaat alleen nog als
#FF8100, als vlak of rand, met donkere tekst of een donker icoon (#1B2430) erop. Oranje TEKST
komt niet meer voor, want #FF8100 op wit haalt maar contrast 2,6. Lichte tinten (#FFF7EF,
#FFE0BF, #FFD2A6) blijven voor achtergronden. In de blokken hierboven zijn de #C65E00-waarden
omgezet; de regels hieronder overschrijven wat in de CSS van de homepage (pagina 44425) staat,
zodat die pagina zelf niet open hoeft.
Hover op een productkaartje is nu overal: oranje rand, prijs blijft blauw, pijlrondje oranje. */
body .sk-prodgrid ul.products li.product:hover {
border-color: #FF8100 !important;
box-shadow: 0 6px 18px rgba(255,129,0,.14) !important;
}
body .sk-prodgrid ul.products li.product:hover .price,
body .sk-prodgrid ul.products li.product:hover .price span,
body .sk-prodgrid ul.products li.product:hover .price bdi,
body .sk-prodgrid ul.products li.product:hover .price ins {
color: #0057D9 !important;
}
body .sk-prodgrid ul.products li.product:hover .price del,
body .sk-prodgrid ul.products li.product:hover .price del span,
body .sk-prodgrid ul.products li.product:hover .price del bdi {
color: #98A2B3 !important;
}
body .sk-prodgrid ul.products li.product:hover .price::after {
background: #FF8100 !important;
color: #1B2430 !important;
}
/* Stapnummers en vinkjes op de homepage: oranje rondje met donker cijfer of vinkje. */
body .sk-nh .sk-stap-nr {
background: #FF8100 !important;
color: #1B2430 !important;
}
body .sk-nh .sk-seo-vink {
background: #FF8100 !important;
}
body .sk-nh .sk-seo-vink svg {
stroke: #1B2430 !important;
}
/* Links in het SEO-blok: bij hover een oranje rand, tekst donker. */
body .sk-nh a.sk-seo-link:hover {
border-color: #FF8100 !important;
color: #1B2430 !important;
}

/* Het bespaarlabel boven de prijs, op categoriepagina's en op de homepage. Stond het eronder,
dan lag de prijs van een kaartje met korting hoger dan die van de buren. Nu zakt het label met
margin-top:auto mee naar beneden en staan de prijzen in een rij op dezelfde hoogte. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product > a > .sk-bespaart-kaart,
body .sk-prodgrid ul.products li.product > a > .sk-bespaart-kaart {
order: 1;
align-self: flex-start;
margin: auto 0 10px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product > a:has(> .sk-bespaart-kaart) > .price,
body .sk-prodgrid ul.products li.product > a:has(> .sk-bespaart-kaart) > .price {
order: 2;
margin-top: 0 !important;
}
/* Op de homepage vulde de link het kaartje niet, dus zakte de prijs niet naar de onderkant. De link
was bovendien display:block (een WooCommerce-regel won van de flex uit de homepage-CSS), waardoor
de volgorde van label en prijs niet om te draaien was. */
body .sk-prodgrid ul.products li.product {
display: flex !important;
flex-direction: column;
}
body .sk-prodgrid ul.products li.product > a.woocommerce-loop-product__link {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
}
body .sk-prodgrid ul.products li.product > a > .price {
margin-top: auto !important;
}
/* === einde 16 september (avond, 2) === */

/* === 16 september 2026 - categoriepagina's, stap 4 en 5: volle breedte, filters, werkbalk ===
HTML uit mu-plugin superkeys-categorie-filters.php. De zijbalk is weg (Divi krijgt daar
et_full_width_page door), dus vier kolommen op desktop, drie op tablet en twee op telefoon.
Terugdraaien: dit blok en dat bestand weghalen. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 980px) {
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 767px) {
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* De productkolom was 75% breed (regel met !important uit het integratieveld, voor de zijbalk).
Zonder zijbalk de volle breedte; html ervoor om die regel te overtroeven. */
html body:is(.tax-product_cat,.post-type-archive-product).et_full_width_page #main-content #left-area {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
float: none !important;
}
@media (min-width: 981px) {
html body:is(.tax-product_cat,.post-type-archive-product).et_full_width_page #main-content #left-area {
padding-right: 0 !important;
}
}
/* Kop zoals op de homepage: donker, zwaar, zonder grijze lijn eronder. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content h1.page-title,
body:is(.tax-product_cat,.post-type-archive-product) #main-content .woocommerce-products-header__title {
margin: 0 0 10px !important;
padding: 0 !important;
border: 0 !important;
font-size: 32px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: -.6px;
color: #1B2430 !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .woocommerce-products-header {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 980px) {
body:is(.tax-product_cat,.post-type-archive-product) #main-content h1.page-title,
body:is(.tax-product_cat,.post-type-archive-product) #main-content .woocommerce-products-header__title {
font-size: 26px !important;
letter-spacing: -.4px;
}
}

/* Werkbalk: [Filters] telling ........ sorteermenu */
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-werkbalk {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 10px;
clear: both;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-werkbalk p.sk-telling {
margin: 0 !important;
padding: 0 !important;
float: none !important;
font-size: 14px !important;
color: #667085 !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-werkbalk form.woocommerce-ordering {
float: none !important;
margin: 0 0 0 auto !important;
width: auto !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-werkbalk form.woocommerce-ordering select {
height: 40px !important;
line-height: 38px !important;
padding: 0 34px 0 12px !important;
border: 1px solid #E3E8EF !important;
border-radius: 10px !important;
background-color: #fff !important;
color: #1B2430 !important;
font-size: 14px !important;
font-weight: 600;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-ftoggle {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content label.sk-fknop {
display: none;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
margin: 0;
border: 1px solid #E3E8EF;
border-radius: 10px;
background: #fff;
color: #1B2430;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fknop__icoon {
width: 16px;
height: 12px;
background:
linear-gradient(#1B2430, #1B2430) 0 0 / 16px 2px no-repeat,
linear-gradient(#1B2430, #1B2430) 3px 5px / 10px 2px no-repeat,
linear-gradient(#1B2430, #1B2430) 6px 10px / 4px 2px no-repeat;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fknop__n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #0057D9;
color: #fff;
font-size: 12px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-ftoggle:focus-visible + .sk-werkbalk label.sk-fknop {
outline: 2px solid #0057D9;
outline-offset: 2px;
}

/* Filterpaneel: op desktop altijd open, een rij per groep. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fpaneel {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 14px;
padding: 12px 14px;
background: #F7F9FC;
border: 1px solid #E3E8EF;
border-radius: 12px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fgroep {
display: flex;
align-items: flex-start;
gap: 12px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fgroep__kop {
flex: 0 0 84px;
padding-top: 7px;
font-size: 12px;
font-weight: 700;
letter-spacing: .6px;
text-transform: uppercase;
color: #667085;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fgroep__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid #E3E8EF;
border-radius: 999px;
background: #fff;
color: #1B2430 !important;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-decoration: none !important;
white-space: nowrap;
transition: border-color .15s, background-color .15s;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip:hover,
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip:focus-visible {
border-color: #FF8100;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip .sk-fchip__n {
color: #667085;
font-weight: 500;
font-size: 12px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip.is-actief {
border-color: #0057D9;
background: #0057D9;
color: #fff !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip.is-actief .sk-fchip__n {
color: rgba(255,255,255,.85);
}
/* "Meer" klapt open in dezelfde rij (vinkje + label i.p.v. details), 16 sept. 2026 (nacht). */
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fgroep__chips {
position: relative;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-fmeer-t {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip.is-extra {
display: none;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-fmeer-t:checked ~ a.sk-fchip.is-extra {
display: inline-flex;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content label.sk-fmeer {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 999px;
color: #0057D9;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content label.sk-fmeer:hover {
border-color: #E3E8EF;
background: #fff;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content label.sk-fmeer .sk-fchip__n {
color: #667085;
font-weight: 500;
font-size: 12px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-fmeer-t:checked ~ label.sk-fmeer {
display: none;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-fmeer-t:focus-visible ~ label.sk-fmeer {
outline: 2px solid #0057D9;
outline-offset: 2px;
}

/* Actieve filters boven de producten. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-factief {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 16px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fchip--weg {
border-color: #0057D9;
background: #EEF5FE;
color: #0B3F8F !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fchip__x {
font-size: 15px;
line-height: 1;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content a.sk-fwis {
font-size: 13px;
font-weight: 700;
color: #0057D9 !important;
text-decoration: underline !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content p.sk-fleeg {
margin: 8px 0 12px !important;
font-size: 15px;
color: #1B2430;
}

/* Regel onder de titel op het kaartje: platform, looptijd, apparaten. */
body:is(.tax-product_cat,.post-type-archive-product) #main-content #left-area ul.products li.product .sk-kaart-regel {
display: block;
margin: -4px 0 10px;
font-size: 12px;
line-height: 1.3;
font-weight: 600;
color: #667085;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Telefoon en tablet: paneel achter de knop Filters. */
@media (max-width: 980px) {
body:is(.tax-product_cat,.post-type-archive-product) #main-content label.sk-fknop {
display: inline-flex;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-werkbalk p.sk-telling {
order: -1;
flex: 1 0 100%;
font-size: 13px !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-werkbalk form.woocommerce-ordering {
flex: 1 1 0;
min-width: 0;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-werkbalk form.woocommerce-ordering select {
width: 100% !important;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fpaneel {
display: none;
padding: 14px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-ftoggle:checked ~ .sk-fpaneel {
display: flex;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content input.sk-ftoggle:checked ~ .sk-werkbalk label.sk-fknop {
border-color: #0057D9;
background: #EEF5FE;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fgroep {
flex-direction: column;
gap: 6px;
}
body:is(.tax-product_cat,.post-type-archive-product) #main-content .sk-fgroep__kop {
flex: none;
padding-top: 0;
}
}
/* === einde 16 september, stap 4 en 5 === */