/* =========================================================================
   restyle.css — voorstel restyling augustus 2026
   =========================================================================

   Deze laag wordt ná style.css ingeladen en overschrijft daar waar nodig.
   Bewust een apart bestand:

   - terugdraaien = één regel weghalen in site/snippets/header.php
   - style.less / style.css blijven onaangeraakt, dus een Prepros-run kan
     dit bestand niet overschrijven (Prepros compileert enkel style.less)

   Handgeschreven CSS, geen LESS-compilaat. Wordt de restyling goedgekeurd,
   dan kan dit alsnog in style.less opgenomen worden.

   De selectors zijn even specifiek als die in style.css, zodat er nergens
   !important nodig is.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  --rs-rood:        #e31c19;   /* huiskleur, ongewijzigd */
  --rs-rood-diep:   #b31512;   /* voor hover en focus */

  /* Neutralen, verankerd op het donker dat de site zelf al gebruikt.
     style.css had #2c2b2a (9x), #000 (9x), #3a3a3a, #111 en #333 door elkaar,
     en voor grijs #f0f0f0, #ccc en #999. Hieronder loopt alles langs één
     ladder. De twee tussenwaarden zijn afgeleid van #2c2b2a, zodat ze
     dezelfde warme ondertoon houden; #999 was te licht voor tekst op wit
     (contrast 2,8:1, onvoldoende leesbaar). */
  --rs-inkt:        #2c2b2a;   /* huisdonker: mandje, totaalblok, footer, knoppen */
  --rs-inkt-zacht:  #6f6d6b;   /* secundaire tekst */
  --rs-lijn:        #d8d5d2;   /* randen en scheidingen */
  --rs-vlak:        #ffffff;
  --rs-papier:      #f4f3f1;

  /* Eén afrondingsschaal voor de hele site. style.css gebruikte 5px, 6px en
     0 door elkaar; hieronder wordt dat gelijkgetrokken.
       s    knoppen, velden, keuzelijsten, kleine vlakken
       m    kaarten en panelen
       pil  navigatieknop en categorieknoppen
     Cirkels (50%) blijven cirkels. */
  --rs-radius-s:   8px;
  --rs-radius-m:   14px;
  --rs-radius-pil: 999px;

  --rs-schaduw:     0 1px 2px rgba(44, 43, 42, .05), 0 10px 26px -14px rgba(44, 43, 42, .22);
  --rs-schaduw-op:  0 2px 4px rgba(44, 43, 42, .06), 0 18px 38px -16px rgba(44, 43, 42, .28);
}


/* -------------------------------------------------------------------------
   2. Typografie — was 15px/24px, overal even groot
   ------------------------------------------------------------------------- */

body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rs-inkt);
}

/* Titels stonden op dezelfde 15px als de lopende tekst. */
h1 { font-size: 2.1rem;  line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: 1.55rem; line-height: 1.25; }
h3 { font-size: 1.2rem;  line-height: 1.3; }

h1, h2, h3 { text-wrap: balance; }


/* -------------------------------------------------------------------------
   3. Menu — "Shop Online!" krijgt het gewicht van een winkeldeur

   Er is geen aparte class op dat menu-item (nav.php genereert alle items
   gelijk), dus haken we aan de url. Zo blijft dit puur stijl.
   ------------------------------------------------------------------------- */

/* De menubalk houdt zijn oorspronkelijke tekstgrootte: de header is vast
   gepositioneerd en style.css compenseert dat met een .headerspacer van
   127px. Groeit het menu, dan schuift de inhoud eronder onder de header. */
.header .right .nav ul li a {
  font-size: 15px;
  line-height: 24px;
}

.header .right .nav ul li a[href$="/producten"] {
  background: var(--rs-rood);
  color: #fff;
  border-radius: var(--rs-radius-pil);
  /* Even veel lucht boven als onder de tekst, en met de negatieve marge
     erbovenop komt de tekst weer op dezelfde regel als de andere items.
     Zo groeit de knop naar buiten toe en niet naar beneden. */
  padding: 8px 18px;
  margin-top: -8px;
  margin-bottom: -8px;
  transition: background .2s ease, transform .2s ease;
}

/* De shopknop hoort achteraan, naast het winkelmandje: een oproep tot actie
   staat aan het einde van een menu, niet in het midden tussen de gewone
   paginalinks. De volgorde in het panel blijft ongewijzigd — dit is enkel de
   weergave, via flex-order. */
.header .right .nav ul li:has(a[href$="/producten"]) {
  order: 1;
}

/* De overige menu-items krijgen bij hover/actief een rood streepje via ::after.
   Onder een gevulde knop hoort dat niet thuis. */
header .header .right .nav ul li a[href$="/producten"]::after,
header .header .right .nav ul li a[href$="/producten"]:hover::after,
header .header .right .nav ul li a[href$="/producten"].active::after {
  display: none;
}

/* Actief = dezelfde rode tint als de categorieknoppen eronder; alleen bij
   hover wordt het donkerder. Anders staan er twee verschillende roden naast
   elkaar. */
.header .right .nav ul li a[href$="/producten"].active {
  background: var(--rs-rood);
  color: #fff;
}

.header .right .nav ul li a[href$="/producten"]:hover {
  background: var(--rs-rood-diep);
  color: #fff;
  transform: translateY(-1px);
}


/* -------------------------------------------------------------------------
   4. Categoriebalk — van grijze opsomming naar keuzeknoppen
   ------------------------------------------------------------------------- */

.prodnav .prodnavitem {
  border-radius: var(--rs-radius-pil);
  padding: 8px 16px;
  border: 1px solid var(--rs-lijn);
  background: var(--rs-vlak);
  color: var(--rs-inkt);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.prodnav .prodnavitem:hover {
  border-color: var(--rs-rood);
  color: var(--rs-rood);
}

.prodnav .prodnavitem.active {
  background: var(--rs-rood);
  border-color: var(--rs-rood);
  color: #fff;
}


/* -------------------------------------------------------------------------
   5. Webshop — meer producten in beeld

   Was: 50% (twee kolommen) tot 1300px, wat op een gewone laptop twee
   producten naast elkaar geeft in een kader dat er vier aankan.
   ------------------------------------------------------------------------- */

.proditemsgrid .prodgriditem {
  width: calc(25% - 40px);
  border-color: var(--rs-lijn);
  border-radius: var(--rs-radius-m);
  background: var(--rs-vlak);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.proditemsgrid .prodgriditem:hover {
  box-shadow: var(--rs-schaduw-op);
  transform: translateY(-2px);
  border-color: var(--rs-lijn);
}

@media only screen and (max-width: 1500px) {
  .proditemsgrid .prodgriditem { width: calc(33.333% - 40px); }
}

@media only screen and (max-width: 1100px) {
  .proditemsgrid .prodgriditem { width: calc(50% - 40px); }
}

@media only screen and (max-width: 620px) {
  .proditemsgrid .prodgriditem { width: calc(100% - 40px); }
}


/* -------------------------------------------------------------------------
   6. De bestelknop — het rood stond er al, maar pas bij hover
   ------------------------------------------------------------------------- */

.proditemsgrid .prodgriditem .addtocart {
  background: var(--rs-rood);
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: var(--rs-radius-s);
  box-shadow: 0 2px 10px -3px rgba(227, 28, 25, .55);
}

.proditemsgrid .prodgriditem .addtocart:hover {
  background: var(--rs-rood-diep);
  color: #fff;
}

.proditemsgrid .prodgriditem .addtocart .addprice,
.proditemsgrid .prodgriditem .addtocart:hover .addprice {
  color: #fff;
  opacity: .85;
}

/* "Enkel in winkel beschikbaar" is geen actie — dus ook niet als knop tonen.
   Voorheen zag dat er identiek uit als de bestelknop. */
.proditemsgrid .prodgriditem .addtocart.onlyshop,
.proditemsgrid .prodgriditem .addtocart.onlyshop:hover {
  background: transparent;
  color: var(--rs-inkt-zacht);
  border: 1px dashed var(--rs-lijn);
  font-weight: 400;
  box-shadow: none;
}

/* De prijs mag zwaarder wegen dan de omschrijving. */
.proditemsgrid .prodgriditem .txtholder .flexpricerow .right .price {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------------
   7. Nieuwskaarten op de homepage
   ------------------------------------------------------------------------- */

.section_masonry .masonryitem .wrap {
  background: var(--rs-vlak);
  border: 1px solid var(--rs-lijn);
  border-radius: var(--rs-radius-m);
  box-shadow: var(--rs-schaduw);
  transition: box-shadow .25s ease, transform .25s ease;
}

.section_masonry .masonryitem .wrap:hover {
  box-shadow: var(--rs-schaduw-op);
  transform: translateY(-2px);
}

/* Titel en tekst waren allebei 15px — geen enkel verschil. */
.section_masonry .masonryitem .tekst_holder .title {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.section_masonry .masonryitem .tekst_holder .txt {
  color: var(--rs-inkt-zacht);
}

/* Beelden houden hun eigen verhouding.

   Ik had ze eerst op 4:3 bijgesneden voor een rustiger raster, maar dat is
   hier fout: de nieuwsbeelden hebben tekst in het beeld gebrand (promo's,
   aankondigingen) en die viel bij het bijsnijden weg. Inhoud gaat voor
   regelmaat — de masonry-opbouw is trouwens net gemaakt voor beelden van
   ongelijke hoogte. */
.section_masonry .masonryitem .wrap .imgholder figure img {
  width: 100%;
  height: auto;
  border-radius: var(--rs-radius-s);
}


/* -------------------------------------------------------------------------
   8. Knoppen — één vormtaal

   "Meer info" was zwart met scherpe hoeken, in een kaart met afgeronde hoeken.
   ------------------------------------------------------------------------- */

.section_masonry .masonryitem .wrap .tekst_holder .moreinfo,
a.moreinfo {
  display: inline-block;
  background: var(--rs-inkt);
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--rs-radius-s);
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}

.section_masonry .masonryitem .wrap .tekst_holder .moreinfo:hover,
a.moreinfo:hover {
  background: var(--rs-rood);
  color: #fff;
  transform: translateY(-1px);
}


/* -------------------------------------------------------------------------
   9. Bestelblok op de homepage (snippet: shop-cta)
   ------------------------------------------------------------------------- */

.shopcta {
  background: var(--rs-inkt);
  color: #fff;
  border-radius: var(--rs-radius-m);
  padding: 42px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.shopcta__tekst { flex: 1 1 380px; }

.shopcta__titel {
  font-size: 1.8rem;
  line-height: 1.15;
  margin: 0 0 8px;
  color: #fff;
  text-wrap: balance;
}

.shopcta__onder {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  max-width: 52ch;
}

.shopcta__knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

.shopcta__knop {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--rs-radius-s);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.shopcta__knop--primair {
  background: var(--rs-rood);
  color: #fff;
}

.shopcta__knop--primair:hover {
  background: #ff2e2a;
  color: #fff;
  transform: translateY(-1px);
}

.shopcta__knop--tweede {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.shopcta__knop--tweede:hover {
  border-color: #fff;
  color: #fff;
  transform: translateY(-1px);
}

@media only screen and (max-width: 700px) {
  .shopcta { padding: 30px 24px; }
  .shopcta__titel { font-size: 1.5rem; }
  .shopcta__knop { width: 100%; text-align: center; }
}


/* -------------------------------------------------------------------------
   10. Mobiel — de winkelingang was een uitklaplijst die op een leeg
       invulveld leek
   ------------------------------------------------------------------------- */

/* style.css verbergt .mobile_prodnav standaard en toont die pas onder 1100px;
   de knop volgt diezelfde regel, anders staat hij dubbel naast "Shop Online!". */
.mobile_shopknop {
  display: none;
  background: var(--rs-rood);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: var(--rs-radius-s);
  text-decoration: none;
  margin: 12px 0;
}

.mobile_shopknop:hover,
.mobile_shopknop:active {
  background: var(--rs-rood-diep);
  color: #fff;
}

@media only screen and (max-width: 1100px) {
  .mobile_shopknop { display: block; }
}


/* -------------------------------------------------------------------------
   11. Zichtbaarheid boven animatie

   De site verbergt blokken tot een scroll-animatie ze toont. Gaat die niet
   af (trage verbinding, snel scrollen, JavaScript geblokkeerd), dan blijft
   het scherm leeg terwijl de inhoud er wel staat. Zichtbaar is voortaan de
   uitgangspositie; de animatie blijft een extraatje.
   ------------------------------------------------------------------------- */

.animated,
._animated,
.animatedFadeInUp {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .animated,
  ._animated,
  .animatedFadeInUp,
  .masonryitem .wrap,
  .proditemsgrid .prodgriditem,
  a.moreinfo {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}


/* -------------------------------------------------------------------------
   12. Toegankelijkheid — zichtbare focus voor toetsenbordgebruik
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
.addtocart:focus-visible {
  outline: 3px solid var(--rs-rood);
  outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   13. Doorklik onder het nieuwsoverzicht
   ------------------------------------------------------------------------- */

.nieuws_meer {
  display: flex;
  justify-content: center;
  padding: 26px 0 8px;
}


/* -------------------------------------------------------------------------
   14. Productnaam leest als een titel, niet als een invulveld

   De naam zit in een <select> omdat sommige producten varianten hebben.
   Zonder varianten heeft dat vakje geen functie — de markup zet dan ook geen
   class 'arrow'. Alleen de echte keuzelijsten houden dus het uitzicht van een
   keuzelijst; de rest wordt gewoon een titel.
   ------------------------------------------------------------------------- */

/* Zonder varianten toont de template een echte <h3>; de keuzelijst blijft in
   de pagina staan omdat de winkelmandje-JS er het id uit leest. */
.proditemsgrid .prodgriditem .txtholder select {
  display: none;
}

.proditemsgrid .prodgriditem .txtholder .prodtitel {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rs-inkt);
  margin: 0 0 12px;
  text-wrap: balance;
}

/* Wél varianten: blijft zichtbaar als keuzelijst, met een rand die dat aankondigt. */
.proditemsgrid .prodgriditem .txtholder select.arrow {
  display: block;
  border: 1px solid var(--rs-lijn);
  border-radius: var(--rs-radius-s);
  padding: 11px 34px 11px 14px;
  font-size: 1rem;
  cursor: pointer;
  pointer-events: auto;
}

.proditemsgrid .prodgriditem .txtholder select.arrow:hover {
  border-color: var(--rs-rood);
}


/* -------------------------------------------------------------------------
   15. Mobiel: de keuzelijst onder de bestelknop is de tweede keuze

   De lijst had een rood kader en concurreerde daardoor met de knop erboven.
   Ze blijft nuttig om rechtstreeks naar een categorie te springen, maar mag
   er niet uitzien als de hoofdactie.

   Let op: het label van die lijst staat in het panel (site → "Titel selectbox
   mobiel") en zegt nu nog "Bestel hier online!". Dat leest dubbel naast de
   knop; "Kies een categorie" past beter. Dat is een tekstje in het panel,
   geen code.
   ------------------------------------------------------------------------- */

.mobile_prodnav form select {
  background: var(--rs-vlak);
  border: 1px solid var(--rs-lijn);
  color: var(--rs-inkt-zacht);
  border-radius: var(--rs-radius-s);
  padding: 12px 14px;
  font-size: 16px;
}


/* -------------------------------------------------------------------------
   16. Sticky elementen volgen de echte header

   style.css zet .tags op top:128px en het zijmenu op top:150px — waarden die
   afgestemd waren op een header van exact 127px. Zodra de header hoger wordt
   (bredere categorieknoppen, of een categoriebalk over twee regels) blijven
   die elementen achter de header hangen. De variabele --rs-headerhoogte wordt
   in header.php gezet en volgt de werkelijke hoogte; de waarde hieronder is
   de terugvalwaarde als het script niet draait.
   ------------------------------------------------------------------------- */

/* Sluit aan tegen de header: elke kier laat de scrollende pagina erdoor zien.
   De lucht rond de knoppen zit dus binnen de balk (padding), niet erboven.
   Ook de achtergrond moet dekkend zijn — style.css gebruikt rgba(...,0.9),
   waardoor de inhoud er dwars doorheen schuift. */
.menu_grid .colgrid .tags {
  top: var(--rs-headerhoogte, 127px);
  /* Wit, net als de header eronder waar hij tegenaan sluit; de haarlijn
     scheidt hem van de productlijst die eronder doorschuift. */
  background: var(--rs-vlak);
  border-bottom: 1px solid var(--rs-lijn);
  padding: 12px 0;
  margin-bottom: 24px;
}

.menu_grid .colmenu .sidemenu.sticky {
  top: calc(var(--rs-headerhoogte, 127px) + 24px);
}

.proditemsgrid.sticky {
  top: var(--rs-headerhoogte, 127px);
}


/* -------------------------------------------------------------------------
   17. Afrondingen gelijkgetrokken

   style.css gebruikte 5px (18×), 6px (3×) en 0 door elkaar, plus 10px en 40px
   in code die niet meer meedoet. Hieronder loopt alles langs dezelfde schaal,
   zodat knoppen, velden en kaarten dezelfde taal spreken.
   ------------------------------------------------------------------------- */

/* Knoppen, velden en kleine vlakken */
input,
textarea,
.mobile_prodnav form select,
.pagebanner .inner h1,
.cart_holder .cartitem .flexrow .prodprice input,
.prodgrid .prodgriditem .txtholder .addtocart,
.proditemsgrid .prodgriditem .txtholder .flexpricerow .left input,
.adminmenu ul li a,
#receptinput,
.receptenmenu ul li a,
.calltoaction,
.layoutpage .column-grid .block-type-button a {
  border-radius: var(--rs-radius-s);
}

/* Kaarten en grotere vlakken */
.prodgrid .prodgriditem,
.catgrid .catgriditem,
.homebanner figure,
.layoutpage .column-grid .block-type-gallery .gallery .griditem figure {
  border-radius: var(--rs-radius-m);
}

/* Het winkelmandje rechtsonder is een knop, geen kaart */
.shoppingcart_nav {
  border-radius: var(--rs-radius-pil);
}

/* De categoriebalk zelf heeft geen eigen vlak meer nodig: de knoppen erin
   dragen de vorm. */
.prodnav {
  border-radius: 0;
  border: 0;
  /* Het grijze vlak (#f0f0f0) eronder is niet meer nodig: de categorieknoppen
     dragen zelf hun vorm. */
  background: transparent;
  padding: 0;
}

/* Losse filterknopjes volgen de categorieknoppen */
.menu_grid .colgrid .tags ul li {
  border-radius: var(--rs-radius-pil);
}


/* -------------------------------------------------------------------------
   18. Het zwevende winkelmandje

   Het was rood — maar sinds de bestelknoppen óók rood zijn, verdwijnt het
   ertussen. Rood betekent nu "doe dit", donker betekent "dit is van jou".
   Het aantal krijgt een rood schildje, zodat het oog daar landt zodra er
   iets in het mandje zit. Leeg mandje = rustiger, want dan valt er niets
   te doen.
   ------------------------------------------------------------------------- */

.shoppingcart_nav {
  background: var(--rs-inkt);
  color: #fff;
  font-weight: 600;
  /* Zachte lichte rand: op de witte pagina onzichtbaar, op de donkere footer
     net genoeg om de vorm te houden. Zonder die rand verdween het mandje daar
     volledig — donker op donker. Bewust geen vol wit en maar 2px: een harde
     witte lijn trekt meer aandacht dan het mandje zelf. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .38),
              0 6px 18px -5px rgba(44, 43, 42, .5);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.shoppingcart_nav:hover {
  background: #1c1b1a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55),
              0 10px 26px -6px rgba(44, 43, 42, .6);
}

.shoppingcart_nav .itemsincart {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  margin-right: 8px;
  border-radius: var(--rs-radius-pil);
  background: var(--rs-rood);
  color: #fff;
  font-size: .85em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.shoppingcart_nav.leeg {
  background: var(--rs-inkt-zacht);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .3),
              0 4px 12px -4px rgba(44, 43, 42, .4);
}

.shoppingcart_nav.leeg .itemsincart {
  background: rgba(255, 255, 255, .22);
}


/* -------------------------------------------------------------------------
   19. Afrekenen

   De laatste knop van de webshop stond op 11px zonder gewicht, terwijl de
   rest van de site op 17px staat. De basiskleur was wél het huisrood; het
   crimson dat je ziet is de disabled-staat (voorwaarden nog niet aangevinkt).
   Selector is 'form #submit', want style.css gebruikt diezelfde en die weegt
   zwaarder dan een losse #submit.
   ------------------------------------------------------------------------- */

form #submit {
  background: var(--rs-rood);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 16px 32px;
  border: none;
  border-radius: var(--rs-radius-s);
  box-shadow: 0 3px 12px -3px rgba(227, 28, 25, .55);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

form #submit:hover {
  background: var(--rs-rood-diep);
  transform: translateY(-1px);
}

/* Zolang de voorwaarden niet aangevinkt zijn, moet de knop er ook echt
   onbeschikbaar uitzien — niet gewoon iets bleker rood. */
form #submit.disabled {
  background: var(--rs-papier);
  color: var(--rs-inkt-zacht);
  border: 1px solid var(--rs-lijn);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.cart_totaal {
  border-radius: var(--rs-radius-m);
  font-variant-numeric: tabular-nums;
}

.cart_holder .cartitem {
  border-radius: var(--rs-radius-m);
}


/* -------------------------------------------------------------------------
   20. Mandje-items: één vorm i.p.v. om en om grijs

   style.css gaf oneven regels #f0f0f0 en even regels wit. Met afgeronde
   hoeken oogt dat als een fout in plaats van als een streepjespatroon.
   ------------------------------------------------------------------------- */

.cart_holder .cartitem,
.cart_holder .cartitem:nth-child(even) {
  background: var(--rs-vlak);
  border: 1px solid var(--rs-lijn);
  margin-bottom: 12px;
}

.cart_holder .cartitem .flexrow .prodprice input {
  border: 1px solid var(--rs-lijn);
  background: var(--rs-vlak);
}


/* -------------------------------------------------------------------------
   21. Donkere vlakken op één tint

   style.css zette het totaalblok op #111, de footer op #3a3a3a en losse
   knoppen op #000, terwijl de site als huisdonker #2c2b2a gebruikt. Naast
   elkaar leest dat als drie bijna-zwarten in plaats van één. Alles staat nu
   op dezelfde tint.
   ------------------------------------------------------------------------- */

.cart_totaal,
footer,
.shopcta {
  background: var(--rs-inkt);
}

/* Tekst op die donkere vlakken blijft leesbaar wit. */
.cart_totaal,
.cart_totaal * {
  color: #fff;
}


/* -------------------------------------------------------------------------
   22. Laatste losse kleuren

   Twee plekken hielden nog een eigen kleur aan: de filterknopjes stonden op
   puur zwart en het aantalveld op #999. Allebei nu uit dezelfde ladder.
   ------------------------------------------------------------------------- */

.menu_grid .colgrid .tags ul li {
  background: var(--rs-inkt);
  color: #fff;
  font-size: 14px;
  padding: 7px 14px;
}

.menu_grid .colgrid .tags ul li:hover {
  background: var(--rs-rood-diep);
}

/* Een invoerveld hoort als invoerveld te lezen, niet als grijs blok. */
.proditemsgrid .prodgriditem .txtholder .flexpricerow .left input {
  background: var(--rs-vlak);
  color: var(--rs-inkt);
  border: 1px solid var(--rs-lijn);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------------
   23. Footer

   Kleine ingrepen, de opbouw blijft. Wat opviel: elke link stond permanent
   onderstreept (vier onder elkaar in de adreskolom), de winkelfoto had als
   enige beeld op de site scherpe hoeken, en de tekst stond op bijna 19px.
   ------------------------------------------------------------------------- */

footer {
  font-size: 16px;
  line-height: 1.6;
}

/* Onderstrepen pas bij hover: rustiger, en de link blijft herkenbaar. */
footer a {
  text-decoration: none;
  transition: color .2s ease;
}

footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* De winkelfoto volgt de kaartafronding van de rest van de site. */
footer .col img,
footer .col figure {
  border-radius: var(--rs-radius-m);
}

/* Openingsuren onder elkaar uitlijnen. */
footer .openingsuren {
  font-variant-numeric: tabular-nums;
}

footer .footertitel {
  letter-spacing: .06em;
}

/* Sociale iconen: groter aanraakvlak en een duidelijke hover.

   Het icoonlettertype geeft de glyph een eigen regelhoogte, waardoor die
   24x57 groot werd en dus uit een rond vlak van 44px stak. Met line-height 1
   klopt de hoogte weer met wat je ziet, en centreert het grid hem netjes. */
/* De tussenruimte zat als padding-right IN de link (15px uit style.css),
   waardoor het icoon links in de cirkel hing. De ruimte hoort tussen de
   knoppen, niet erin. */
footer .flexrow .col2 .subcol .social {
  display: flex;
  gap: 4px;
}

footer .flexrow .col2 .subcol .social a {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border-radius: var(--rs-radius-pil);
  transition: background .2s ease, transform .2s ease;
}

footer .flexrow .col2 .subcol .social a .icon {
  display: block;
  line-height: 1;
}

footer .flexrow .col2 .subcol .social a:hover {
  background: rgba(255, 255, 255, .14);
  text-decoration: none;
  transform: translateY(-1px);
}

footer .majortom {
  opacity: .7;
  font-size: 14px;
}

footer .majortom:hover {
  opacity: 1;
}


/* -------------------------------------------------------------------------
   24. Zijmenu: tweede regel lijnt uit met de tekst, niet met de pijl

   Het pijltje en de titel zijn één doorlopende tekstregel, dus bij het
   afbreken begon regel twee onder de pijl. Als flex-rij krijgt de tekst een
   eigen kolom en springt hij netjes in.
   ------------------------------------------------------------------------- */

.menu_grid .colmenu .sidemenu li a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.menu_grid .colmenu .sidemenu li a .icon {
  flex: 0 0 auto;
  line-height: inherit;
}


/* -------------------------------------------------------------------------
   25. Openingsuren: vandaag springt eruit

   De overige dagen blijven leesbaar, alleen iets rustiger, zodat het oog
   meteen op de juiste regel landt zonder dat de rest wegvalt.
   ------------------------------------------------------------------------- */

/* style.css zet ELKE span in de openingsuren op width:100px (bedoeld voor de
   dagnaam). Mijn wrapper om de rij erfde die breedte, waardoor de hele
   kolom in 100px geperst werd. Alleen de dagnaam houdt die maat. */
footer .flexrow .col2 .subcol .openingsuren .uurregel {
  width: auto;
  display: inline-block;
  color: rgba(255, 255, 255, .72);
}

footer .flexrow .col2 .subcol .openingsuren .uurregel .dag {
  width: 100px;
  display: inline-block;
}

footer .flexrow .col2 .subcol .openingsuren .uurregel.vandaag {
  color: #fff;
  font-weight: 700;
}

footer .flexrow .col2 .subcol .openingsuren .vandaaglabel {
  width: auto;
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: var(--rs-radius-pil);
  background: var(--rs-rood);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 2px;
}


/* -------------------------------------------------------------------------
   26. Mobiele header compacter

   De bestelknop kwam boven de categorielijst te staan, waardoor de header op
   een telefoon 210px werd — een kwart van het scherm voor je iets van de site
   ziet. Ze passen samen op één rij: de knop houdt zijn gewicht, de lijst
   vult de rest.
   ------------------------------------------------------------------------- */

@media only screen and (max-width: 1100px) {
  .mobile_shopbalk {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 10px 0;
  }

  .mobile_shopbalk .mobile_shopknop {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 18px;
    white-space: nowrap;
  }

  .mobile_shopbalk .mobile_prodnav {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .mobile_shopbalk .mobile_prodnav form,
  .mobile_shopbalk .mobile_prodnav form select {
    height: 100%;
    margin: 0;
    width: 100%;
  }
}


/* -------------------------------------------------------------------------
   27. Mobiel nalopen

   Vijf dingen die op een telefoon niet klopten. De pil-vorm en de ring van
   het mandje hoorden bij de zwevende knop op desktop; op een telefoon is het
   een volle balk onderaan, en daar past dat niet bij.
   ------------------------------------------------------------------------- */

/* Onder 800px zet style.css de filterbalk op position:relative met top:0.
   Mijn top-waarde werd daar dus een verschuiving i.p.v. een kleefpunt,
   waardoor de balk 131px naar beneden over de eerste productkaart schoof. */
@media only screen and (max-width: 800px) {
  .menu_grid .colgrid .tags {
    position: relative;
    top: 0;
    border-bottom: 0;
    padding: 0 0 5px;
  }
}

@media only screen and (max-width: 1000px) {

  /* Het mandje is hier een balk tegen de onderrand, geen zwevende knop. */
  .shoppingcart_nav,
  .shoppingcart_nav.leeg {
    border-radius: 0;
    box-shadow: 0 -2px 12px -4px rgba(44, 43, 42, .45);
    /* ruimte voor de home-indicator van een iPhone */
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
  }

  /* Uitklapmenu: zwart vlak op de huistint, en items die je met een duim
     raakt. 29px was te klein. */
  header .header .right .nav {
    background: var(--rs-inkt);
  }

  header .header .right .nav ul li a {
    display: inline-grid;
    place-items: center;
    min-height: 44px;
    padding: 8px 16px;
  }

  /* De negatieve marges van de shopknop zijn bedoeld om hem in een
     horizontale menubalk uit te lijnen; in dit verticale menu niet. */
  .header .right .nav ul li a[href$="/producten"] {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Plus en min waren 26x34 — te klein om te mikken. */
  .plusmin .plus,
  .plusmin .min {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
  }

  /* De laatste knop van de bestelling verdient de volle breedte. */
  form #submit {
    width: 100%;
  }
}


/* -------------------------------------------------------------------------
   28. Ruimte onder de banner

   .mb is een generieke klasse met 75px ondermarge, die ook onder de
   productrasters zit. Onder een paginabanner is dat te veel: de titel komt
   daardoor los te staan van het beeld waar hij bij hoort. Nu 48px, en de
   titel heeft sinds de restyling zelf meer gewicht, dus hij heeft minder
   lucht nodig om op te vallen. Alleen de banners, de rasters blijven zoals
   ze waren.
   ------------------------------------------------------------------------- */

.pagebanner.mb,
.homebanner.mb {
  margin-bottom: 48px;
}

@media only screen and (max-width: 1000px) {
  .pagebanner.mb,
  .homebanner.mb {
    margin-bottom: 28px;
  }
}