/* ========================================================================== Geus 2026 — vormgeving Kleuren, letters en onderdelen uit de productontwerpen (zalmolie, paardenlong, Kivo rund compleet, kant-en-klaar vers vlees). Alle eigen klassen beginnen met g26-. ========================================================================== */ /* ---------- lettertypes (variabel, van de eigen server; alle diktes in één bestand) ---------- */ @font-face { font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/wp-content/fonts/quicksand/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/wp-content/fonts/baloo-2/wXK0E3kTposypRydzVT08TS3JnAmtdj9yppo_lc.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- kleuren en maten ---------- */ :root { --grond: #f7f3ef; --vlak: #ffffff; --vlak-2: #fbf8f2; --inkt: #1f2a2e; --inkt-zacht: #5c6a70; --lijn: #e5dfd3; --kopbalk: #ede6d9; --merk: #12789f; --merk-diep: #0e5f7e; --merk-licht: #e3f0f5; --accent: #b94a22; --accent-licht: #f6e2d6; --accent-vlak: #f3d9c9; --goed: #2f7a4b; --goed-licht: #e4f2e8; --ster: #e8a23a; --voet: #00719e; --voet-diep: #005f86; --schaduw: 0 10px 30px rgba(31, 42, 46, .08); --schaduw-klein: 0 4px 14px rgba(31, 42, 46, .07); --radius: 18px; --foto-licht: #fff8f3; --knop-tekst: #ffffff; --usp-grond: #12789f; --usp-tekst: #ffffff; --breedte: 1440px; --kop-letter: "Baloo 2", "Segoe UI", system-ui, sans-serif; --tekst-letter: "Quicksand", "Segoe UI", system-ui, sans-serif; } /* ---------- basis ---------- */ html { -webkit-text-size-adjust: 100%; } /* Het Geus-patroon (pootjes, botjes, visjes, hondjes) 1,6 keer zo sterk als eerst: op 3,5% dekking * leek de achtergrond op een gewoon scherm wit (Mike, 2 nov 2026: "ik mis mn geus achtergrond"), * drie keer was hem te donker en bij twee keer was de tekst "net niet lekker leesbaar". Elke sterkte * een eigen bestandsnaam, want afbeeldingen blijven 30 dagen in de browser staan. */ body.g26 { background: var(--grond) url(../img/patroon-16.png) repeat; color: var(--inkt); font-family: var(--tekst-letter); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .g26 #wrapper, .g26 #main { background: transparent; } .g26 h1, .g26 h2, .g26 h3, .g26 h4, .g26 .g26-display { font-family: var(--kop-letter); color: var(--inkt); letter-spacing: -.005em; text-wrap: balance; } /* :where() houdt dit op één klasse zwaar, zodat knoppen van de modules (.geus-vk-bewaarknop * e.d., wit op een kleur) hun eigen tekstkleur houden zoals onder Flatsome. * Knoppen (a.button) vallen erbuiten (0.5.1): hun tekstkleur hoort bij hun achtergrond, en die * staan samen in de knopregel van g26-los.css. Die regel weegt nul (:where), dus deze won het * van de tekstkleur en niet van de achtergrond: merkkleur op merkkleur, o.a. "Bekijk winkelwagen" * in de melding na "in winkelwagen", "Terug naar de winkel" en [button] in pagina's. */ .g26 :where(a:not(.button)) { color: var(--merk); } .g26 :where(a:not(.button):hover) { color: var(--merk-diep); } /* Creditnota-knoppen van de module documenten (Mijn account → bestelling): de module geeft ze een * vaste witte achtergrond (inline) zonder tekstkleur, dus de knopregel maakte ze wit op wit (0.5.1). * Vaste kleuren, want de achtergrond blijft ook in donker wit. */ .g26 .geus-customer-creditnotes a.button { color: #12789f; } .g26 .geus-customer-creditnotes a.button:is(:hover, :focus-visible) { color: #0d5f80; } .g26 :focus-visible { outline: 3px solid var(--merk); outline-offset: 2px; } .g26 .g26-i { width: 20px; height: 20px; flex: none; } .g26-wrap { width: 100%; max-width: var(--breedte); margin-inline: auto; padding-inline: 16px; } .g26 .prijs, .g26 .g26-num, .g26 .amount { font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } /* ---------- kop ---------- */ .g26-kop { background: var(--vlak); border-bottom: 1px solid var(--lijn); position: relative; z-index: 40; } .g26-kop-rij { display: flex; align-items: center; gap: 22px; padding-block: 12px; } .g26-logo-link { flex: none; display: block; line-height: 0; } .g26-logo { height: 46px; width: auto; display: block; } .g26-zoek { flex: 1; min-width: 0; max-width: 680px; } .g26-iconen { display: flex; gap: 6px; align-items: center; margin-left: auto; } .g26 .g26-icoonknop { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--inkt-zacht); text-decoration: none; transition: background .15s, color .15s; } .g26 .g26-icoonknop:hover { background: var(--merk-licht); color: var(--merk); } .g26 .g26-icoonknop .g26-i { width: 24px; height: 24px; } .g26-mand-teller { position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 11.5px/20px var(--tekst-letter); text-align: center; box-shadow: 0 0 0 2px var(--vlak); } .g26-hamburger { display: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak-2); color: var(--inkt); place-items: center; cursor: pointer; } .g26-hamburger .g26-i { width: 22px; height: 22px; } /* zoeken: FiboSearch in de vorm van het ontwerp (een pil) */ .g26-zoek .dgwt-wcas-search-wrapp { width: 100% !important; max-width: none !important; margin: 0; } /* FiboSearch zet zelf width: 90% */ .g26-zoek .dgwt-wcas-sf-wrapp { background: transparent !important; padding: 0 !important; } .g26-zoek input[type="search"].dgwt-wcas-search-input { height: 46px !important; margin: 0 !important; border-radius: 999px !important; background: var(--vlak-2) !important; border: 1px solid var(--lijn) !important; box-shadow: none !important; padding: 0 48px 0 46px !important; font: 500 15px var(--tekst-letter) !important; color: var(--inkt) !important; } .g26-zoek input[type="search"].dgwt-wcas-search-input:focus { border-color: var(--merk) !important; background: var(--vlak) !important; box-shadow: 0 0 0 3px var(--merk-licht) !important; } .g26-zoek .dgwt-wcas-ico-magnifier { left: 16px !important; right: auto !important; width: 18px !important; height: 18px !important; opacity: .6; } .g26-zoek .dgwt-wcas-search-submit { right: 4px !important; left: auto !important; top: 4px !important; width: 38px !important; height: 38px !important; min-height: 0 !important; padding: 0 !important; border-radius: 999px !important; background: var(--merk) !important; } .g26-zoek .dgwt-wcas-search-submit:before { display: none !important; } .g26-zoek .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); opacity: 1; fill: #fff; } /* hoofdmenu */ .g26-menu { border-top: 1px solid var(--lijn); } .g26-menu-rij { display: flex; align-items: center; gap: 4px; } .g26 .g26-menu-lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; } .g26 .g26-menu-lijst > li { position: relative; margin: 0; list-style: none; } .g26 .g26-menu-item { display: flex; align-items: center; gap: 6px; padding: 12px 14px; font: 700 16px/1.25 var(--kop-letter); color: var(--inkt); text-decoration: none; border-radius: 10px; } .g26 .g26-menu-item .g26-i { width: 14px; height: 14px; opacity: .6; stroke-width: 2.5; } .g26 .g26-menu-item:hover, .g26 .g26-menu-lijst > li:focus-within > .g26-menu-item { background: var(--merk-licht); color: var(--merk); } .g26 .g26-menu-item.is-actief { color: var(--merk); box-shadow: inset 0 -3px 0 var(--merk); border-radius: 10px 10px 0 0; } .g26 .g26-menu-item.is-los { color: var(--accent); } .g26-uitklap { position: absolute; left: 0; top: 100%; min-width: 250px; z-index: 50; padding: 8px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: var(--schaduw); display: flex; flex-direction: column; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility 0s .15s; } .g26 .g26-menu-lijst > li:hover > .g26-uitklap, .g26 .g26-menu-lijst > li:focus-within > .g26-uitklap { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; } .g26 .g26-uitklap a { padding: 9px 12px; border-radius: 8px; color: var(--inkt); text-decoration: none; font-size: 15px; font-weight: 500; } .g26 .g26-uitklap a:hover { background: var(--vlak-2); color: var(--merk); } .g26 .g26-uitklap a.g26-sub-alles { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--lijn); border-radius: 0; color: var(--merk); font-weight: 700; } /* Uitklap met de merken erin (A/B-test, 11 okt 2026: "lastiger te vinden wat ik zoek"). Een kolom per categorie, de merken eronder -- zoals het oude menu ze ook liet zien. */ /* De regel naar de merkenpagina onderin de uitklap. */ .g26 .g26-uitklap a.g26-sub-merken { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--lijn); border-radius: 0; color: var(--merk); font-weight: 700; } .g26 .g26-uitklap a.g26-sub-merken + a.g26-sub-alles { margin-top: 0; padding-top: 2px; border-top: 0; } /* En in de lade op de telefoon: de merken in een klapje onder hun categorie. */ .g26-lade-merken > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .g26-lade-merken > summary::-webkit-details-marker { display: none; } .g26-lade-merken > summary::after { content: "+"; font-size: 17px; line-height: 1; color: var(--inkt-zacht); } .g26-lade-merken[open] > summary::after { content: "\2013"; } .g26-lade-merken > div { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--lijn); margin: 2px 0 6px; } /* Het menu-item staat links in de balk; een brede uitklap mag niet buiten beeld vallen. */ .g26-klein { margin-left: auto; display: flex; gap: 4px; } .g26 .g26-klein a { padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--inkt-zacht); text-decoration: none; border-radius: 8px; } .g26 .g26-klein a:hover { color: var(--merk); background: var(--merk-licht); } /* beloftebalk: één regel; past er een niet meer bij, dan valt hij weg */ .g26-usp { background: var(--usp-grond); color: var(--usp-tekst); font-size: 13.5px; font-weight: 600; } .g26-usp-rij { display: flex; gap: 28px; justify-content: center; padding-block: 7px; flex-wrap: nowrap; } .g26-usp span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .g26-usp .g26-i { width: 16px; height: 16px; } /* uitschuiflade (telefoon) */ .g26-lade-achter { position: fixed; inset: 0; z-index: 60; background: rgba(31, 42, 46, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; } .g26-lade { position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(88vw, 370px); overflow-y: auto; overscroll-behavior: contain; background: var(--vlak); box-shadow: var(--schaduw); transform: translateX(-104%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); } body.g26-lade-open { overflow: hidden; } body.g26-lade-open .g26-lade { transform: none; visibility: visible; transition: transform .28s ease; } body.g26-lade-open .g26-lade-achter { opacity: 1; visibility: visible; transition: opacity .25s; } /* Open menulade boven de cookiemelding van Complianz (z-index 99999; op de telefoon onderaan over de volle * breedte), anders liggen de kleine links en het contactblok onderaan de lade eronder (0.5.1). Zelfde * aanpak als de zijwagen (zie "zijwagen" verderop); de melding #g26-toast blijft erboven, zoals eerst. */ body.g26-lade-open .g26-lade-achter { z-index: 100000; } body.g26-lade-open .g26-lade { z-index: 100001; } body.g26-lade-open .g26-toast { z-index: 100002; } .g26-lade-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .g26-lade-logo { height: 38px; width: auto; } .g26-lade-sluit { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--vlak-2); color: var(--inkt); display: grid; place-items: center; padding: 0; margin: 0; } .g26-lade details { border-bottom: 1px solid var(--lijn); } .g26-lade summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; font: 700 18px/1.3 var(--kop-letter); color: var(--inkt); } .g26-lade summary::-webkit-details-marker { display: none; } .g26-lade summary::after { content: "+"; color: var(--merk); font-size: 22px; } .g26-lade details[open] summary::after { content: "–"; } .g26 .g26-lade-groep a { display: block; padding: 10px 4px 10px 16px; color: var(--inkt); text-decoration: none; font-size: 15.5px; } .g26 .g26-lade-groep a.g26-lade-alles { color: var(--merk); font-weight: 700; padding-bottom: 14px; } .g26 .g26-lade-enkel { display: block; padding: 14px 4px; font: 700 18px/1.3 var(--kop-letter); color: var(--inkt); text-decoration: none; border-bottom: 1px solid var(--lijn); } .g26 .g26-lade-enkel.is-los { color: var(--accent); } .g26-lade-klein { margin-top: 16px; display: grid; gap: 2px; } .g26 .g26-lade-klein a { color: var(--inkt-zacht); text-decoration: none; padding: 8px 4px; font-size: 14.5px; font-weight: 600; } .g26-lade-contact { margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--merk-licht); font-size: 14px; line-height: 1.6; } .g26-lade-contact b { display: block; font-family: var(--kop-letter); font-size: 16px; } @media (prefers-reduced-motion: reduce) { .g26-lade, .g26-lade-achter, .g26-uitklap { transition: none !important; } } /* ---------- voettekst ---------- */ .g26-voet { margin-top: 48px; background: var(--voet); color: #fff; } .g26-voet-kolommen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 38px 32px; font-size: 14.5px; } .g26 .g26-voet-kop { font: 700 15px/1.3 var(--kop-letter); letter-spacing: .06em; text-transform: uppercase; color: #fff; margin: 0 0 12px; } .g26 .g26-voet-lijst { list-style: none; margin: 0; padding: 0; } .g26 .g26-voet-lijst li { margin: 0; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); list-style: none; } .g26 .g26-voet-lijst li:last-child { border-bottom: 0; } .g26 .g26-voet a { color: #fff; text-decoration: none; } .g26 .g26-voet a:hover { text-decoration: underline; } .g26-voet-uren p { margin: 0 0 10px; line-height: 1.75; } .g26-voet-adres { opacity: .9; } .g26 .g26-voet-adres a { display: inline-flex; gap: 8px; align-items: flex-start; line-height: 1.6; } .g26-voet-adres .g26-i { flex: none; width: 18px; height: 18px; margin-top: 3px; } .g26 .g26-keur { display: block; background: rgba(255, 255, 255, .12); border-radius: 14px; padding: 16px; } .g26 .g26-keur:hover { background: rgba(255, 255, 255, .18); text-decoration: none; } .g26-keur b { font: 800 40px/1 var(--kop-letter); display: block; } .g26-keur-sterren { display: flex; gap: 2px; margin: 8px 0 6px; color: var(--ster); } .g26-keur-sterren .g26-i { width: 16px; height: 16px; } .g26-keur span:last-child { display: block; font-size: 13px; opacity: .92; } .g26-copy { background: var(--voet-diep); text-align: center; font-size: 13px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } /* Info en Service zijn
: op de computer open (scriptje in voet.php) en niet dicht te klappen. */ .g26-voet-blok > summary { list-style: none; pointer-events: none; } .g26-voet-blok > summary::-webkit-details-marker { display: none; } .g26-voet-contact, .g26-voet-adres-kort { display: none; } /* Telefoon: contactkaart met knoppen, Info en Service uitklapbaar, tijden en recensies niet dubbel. */ @media (max-width: 560px) { .g26-voet { margin-top: 28px; } .g26-voet-contact { display: block; padding-block: 22px 8px; } .g26-voet-contact-tekst b { display: block; font: 700 18px/1.3 var(--kop-letter); } .g26-voet-contact-tekst span { display: block; margin-top: 2px; font-size: 14px; } .g26-voet-knoppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .g26 .g26-voet-knoppen a { display: block; padding: 11px 6px; border-radius: 999px; background: var(--voet-diep); text-align: center; font-weight: 700; font-size: 14.5px; } .g26 .g26-voet-knoppen a:hover { background: var(--voet-diep); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); text-decoration: none; } .g26-voet-kolommen { gap: 0; padding-block: 8px 14px; } .g26-voet-blok { border-bottom: 1px solid rgba(255, 255, 255, .18); } .g26 .g26-voet-blok > summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 15px 0; } .g26-voet-blok > summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; } .g26-voet-blok[open] > summary::after { content: "−"; } .g26 .g26-voet-blok .g26-voet-lijst { padding-bottom: 10px; } .g26 .g26-voet-blok .g26-voet-lijst li { padding: 6px 0; border: 0; } .g26-voet-uren, .g26-voet-recensies { display: none; } .g26-voet-adres-kort { display: inline; } .g26-copy { font-size: 12.5px; opacity: .95; } } /* melding na "in winkelwagen" */ .g26-toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; display: flex; align-items: center; gap: 12px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; background: var(--inkt); color: #fff; padding: 12px 16px 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); } .g26-toast.is-zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .g26 .g26-toast a { color: #fff; background: rgba(255, 255, 255, .14); padding: 6px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; } .g26 .g26-toast a:hover { background: rgba(255, 255, 255, .24); } /* ---------- algemene onderdelen van WooCommerce en Flatsome in de nieuwe stijl ---------- */ .g26 .button, .g26 button.button, .g26 input[type="submit"].button, .g26 .woocommerce-button { font-family: var(--kop-letter); font-weight: 700; text-transform: none; letter-spacing: 0; border-radius: 12px; min-height: 44px; line-height: 1.2; padding: 11px 20px; } .g26 .button.primary:not(.is-outline), .g26 .button.alt, .g26 button.alt, .g26 .single_add_to_cart_button, .g26 .checkout-button, .g26 #place_order { background-color: var(--merk); color: var(--knop-tekst); border-color: var(--merk); box-shadow: 0 8px 20px rgba(18, 120, 159, .22); } .g26 .button.primary:not(.is-outline):hover, .g26 .button.alt:hover, .g26 .single_add_to_cart_button:hover, .g26 .checkout-button:hover, .g26 #place_order:hover { background-color: var(--merk-diep); border-color: var(--merk-diep); } .g26 input[type="text"], .g26 input[type="email"], .g26 input[type="tel"], .g26 input[type="number"], .g26 input[type="password"], .g26 input[type="search"]:not(.dgwt-wcas-search-input), .g26 input[type="date"], .g26 select, .g26 textarea { border-radius: 10px; border: 1.5px solid var(--lijn); box-shadow: none; background-color: var(--vlak); color: var(--inkt); font-family: var(--tekst-letter); font-size: 15px; } .g26 input:focus, .g26 select:focus, .g26 textarea:focus { border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-licht); } .g26 .woocommerce-message, .g26 .woocommerce-info, .g26 .woocommerce-error, .g26 .message-container { border-radius: 14px; border: 1px solid var(--lijn); background: var(--vlak); box-shadow: var(--schaduw-klein); } .g26 .woocommerce-breadcrumb, .g26 .breadcrumbs { font-family: var(--tekst-letter); font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--inkt-zacht); } .g26 .woocommerce-breadcrumb a, .g26 .breadcrumbs a { color: var(--inkt-zacht); } .g26 .woocommerce-breadcrumb a:hover, .g26 .breadcrumbs a:hover { color: var(--merk); } /* ---------- smaller scherm ---------- */ @media (max-width: 1080px) { .g26-klein { display: none; } .g26 .g26-menu-item { padding: 12px 11px; font-size: 15.5px; } } @media (max-width: 980px) { .g26-usp span:nth-child(3) { display: none; } } @media (max-width: 860px) { .g26-menu { display: none; } .g26-hamburger { display: grid; } .g26-kop-rij { flex-wrap: wrap; gap: 10px 12px; padding-block: 10px; } .g26-logo { height: 40px; } .g26-zoek { order: 5; flex: 1 1 100%; max-width: none; } .g26-zoek input[type="search"].dgwt-wcas-search-input { height: 42px !important; } .g26-usp-rij { gap: 14px; font-size: 12.5px; } .g26-voet-kolommen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 400px) { /* Vier knoppen in de kop (licht/donker, account, verlanglijst, wagen): iets kleiner. */ .g26-iconen { gap: 2px; } .g26 .g26-icoonknop { width: 38px; height: 38px; } } @media (max-width: 560px) { .g26-usp span:nth-child(2) { display: none; } .g26-voet-kolommen { grid-template-columns: minmax(0, 1fr); } .g26-toast { bottom: 90px; } } /* ========================================================================== Gedeelde onderdelen: koppen, knoppen, kaarten, productkaartjes ========================================================================== */ .g26-eyebrow { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--accent); } .g26 .g26-eyebrow a { color: inherit; text-decoration: none; } .g26 .g26-eyebrow a:hover, .g26 .g26-eyebrow a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .g26 .g26-kop2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.15; margin: 0; } .g26 .g26-sub { color: var(--inkt-zacht); margin: 6px 0 0; max-width: 62ch; } .g26-blok { padding-block: 34px; } .g26-blok + .g26-blok { border-top: 1px solid var(--lijn); } .g26-blok-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .g26 .g26-meer { font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--merk); } .g26 .g26-meer:hover { text-decoration: underline; } .g26 .g26-knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border: 2px solid var(--merk); border-radius: 12px; background: var(--merk); color: var(--knop-tekst); text-decoration: none; font: 700 19px/1.1 var(--kop-letter); box-shadow: 0 8px 20px rgba(18, 120, 159, .26); transition: background .15s, transform .1s, box-shadow .15s; } .g26 .g26-knop:hover { background: var(--merk-diep); border-color: var(--merk-diep); color: var(--knop-tekst); } .g26 .g26-knop:active { transform: translateY(1px); } .g26 .g26-knop .g26-i { width: 22px; height: 22px; } .g26 .g26-knop.is-licht { background: transparent; color: var(--merk); box-shadow: none; } .g26 .g26-knop.is-licht:hover { background: var(--merk-licht); } .g26-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; max-width: 520px; } .g26-feit { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px; } .g26-feit b { display: block; font: 700 22px/1.1 var(--kop-letter); color: var(--accent); } .g26-feit span { font-size: 12.5px; color: var(--inkt-zacht); } .g26-sterren { display: inline-flex; gap: 2px; color: var(--ster); vertical-align: middle; } .g26-sterren .g26-i { width: 16px; height: 16px; } .g26-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-content: start; align-items: center; } .g26-kaart .g26-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-licht); color: var(--accent); display: grid; place-items: center; } .g26-kaart .g26-ico .g26-i { width: 24px; height: 24px; } .g26 .g26-kaart h3 { font-size: 19px; font-weight: 700; line-height: 1.2; margin: 0; } .g26 .g26-kaart > p, .g26 .g26-kaart > ul { grid-column: 1 / -1; margin: 0; color: var(--inkt-zacht); font-size: 15px; } /* productkaartje */ .g26-rij { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1280px) { .g26-rij { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g26-rij > .g26-kaartje:nth-child(n+9) { display: none; } } .g26-kaartje { position: relative; display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; transition: transform .15s, box-shadow .15s; } .g26-kaartje:hover { transform: translateY(-3px); box-shadow: var(--schaduw); } .g26 .g26-kaartje-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; } /* Het label (Nieuw, −19%) valt over de foto heen in plaats van in een witte strook erboven * (Mike, 9 okt 2026). * Vierkant, met de link absoluut in het vak (25 okt 2026). Met 5:4 en een link op height:100% * groeide het vak in Chrome toch naar vierkant (de foto bepaalde de hoogte), maar Safari hield * 5:4 aan en tekende de vierkante foto eroverheen: merk en eerste regel van de productnaam * verdwenen onder de foto (feedback #100, iPhone). Nu rekent de foto met een vaste maat. */ .g26-kf { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; min-width: 0; background: #fff; } .g26 .g26-kf-link { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; } /* Rondom 8px wit, ook onderaan: in de nachtstand grenst het fotovak aan het donkere tekstvak * en ontbrak de witte rand onder de foto (Mike, 19 okt 2026). */ .g26-kf img { width: 100%; height: 100%; padding: 8px; object-fit: contain; } .g26-badge { position: absolute; left: 10px; top: 10px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; } .g26-badge.is-actie { background: var(--accent); } .g26-badge.is-nieuw { background: rgba(30, 115, 190, .85); } .g26-badge.is-uit { background: var(--inkt-zacht); color: var(--vlak); } /* "Nieuwe voorraad rond 5 november" als balk onder over de foto (5 nov 2026, Mike: "valt wat meer op"). */ .g26-kf-balk { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 6px 8px; background: var(--merk); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; pointer-events: none; } .g26 .g26-kf:has(.g26-kf-balk) .g26-snelkijk { bottom: 42px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kf-balk { padding: 3px 4px; font-size: 10.5px; } /* Het waarschuwingsdriehoekje van "Mijn dieren" als badge op de foto, rechtsboven (de gewone badges staan linksboven). De module zet zijn maten in style-attributen omdat WP Rocket ingeschreven CSS kan opruimen, vandaar !important. */ .g26 .g26-foto-waarschuwing { position: absolute; top: 12px; right: 12px; z-index: 4; } .g26 .g26-foto-waarschuwing .geus-allergie-tip { align-self: auto !important; } .g26 .g26-foto-waarschuwing .geus-allergie-tip__knop { width: 36px !important; min-height: 36px !important; height: 36px; border-radius: 999px !important; background: #fff !important; color: #c0392b !important; border-color: rgba(0, 0, 0, .08) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); } .g26 .g26-foto-waarschuwing .geus-allergie-tip__knop:hover { background: #fff5f4 !important; } /* Uitverkocht: foto en prijs gedempt, zodat het kaartje er niet als koopwaar uitziet. */ .g26-kaartje.is-uitverkocht .g26-kf img { opacity: .55; } .g26-kaartje.is-uitverkocht .g26-prijs, .g26-kaartje.is-uitverkocht .g26-prijs ins { color: var(--inkt-zacht); font-weight: 600; } .g26-kt { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 0; } /* "100% lamshuid" en "Bestelartikel" onderaan het tekstvak, vlak boven de prijs, even hoog: in een * rij op één lijn, hoe lang de naam ook is (Mike, 5 nov 2026: "kunnen we daar rust in krijgen"). */ .g26 .g26-kaartje-link > .g26-kt { flex: 1; } .g26 .g26-kt-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; } .g26 .g26-kt-labels > .g26-kaart-puur, .g26 .g26-kt-labels > .geus-gh-loop-badge { margin: 0; padding-top: 2px; padding-bottom: 2px; border: 1px solid transparent; } .g26 .g26-kt-labels > .geus-gh-loop-badge { border-color: var(--merk); } .g26-kt small { color: var(--inkt-zacht); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } /* zonder merk een lege merkregel, zodat de namen in een rij op dezelfde hoogte beginnen */ .g26-kt:not(:has(> small))::before { content: "\00a0"; font-size: 11.5px; } /* Hooguit twee regels: zo is het gat tussen naam en prijs in een rij ook hooguit één regel. */ .g26 .g26-kaartje-naam { font: 600 15.5px/1.3 var(--tekst-letter); color: var(--inkt); margin: 0; letter-spacing: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* "16,5% vet · 15,5% eiwit" onder de naam, alleen bij vers vlees (27 okt 2026). */ .g26-kaart-analyse { display: block; font-size: 12.5px; font-weight: 500; color: var(--inkt-zacht); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "100% paard" onder de naam van een pure snack (1 nov 2026). Groen met een vinkje, niet in de * accentkleur: die is van korting en actie. */ .g26 .g26-kaart-puur { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; margin: 4px 0 0; padding: 2px 9px 2px 6px; border-radius: 999px; background: var(--goed-licht); color: var(--goed); font: 700 12px/1.3 var(--tekst-letter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g26 .g26-kaart-puur::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Sneeuwvlokje achter de naam bij diepvries. */ .g26-vries { display: inline-flex; align-items: center; margin-left: 5px; vertical-align: -2px; color: var(--merk); } .g26-vries .g26-i { width: 15px; height: 15px; } .g26 .product_title .g26-vries { margin-left: 8px; vertical-align: 1px; } .g26 .product_title .g26-vries .g26-i { width: 24px; height: 24px; } /* Op het kaartje (18 okt 2026) staat het vlokje als rond knopje op de foto, links van het hartje. Staat daar ook het driehoekje van Mijn dieren (right: 48px, uit die module), dan schuift het een plek op. */ .g26 .g26-vries-knop { position: absolute; top: 10px; right: 48px; z-index: 3; width: 34px; height: 34px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); color: var(--merk); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(31, 42, 46, .12); cursor: help; } .g26 .g26-vries-knop .g26-i { width: 17px; height: 17px; } .g26-kaartje:has(.geus-dieren-loop-allergie) .g26-vries-knop { right: 86px; } /* Het allergiedriehoekje van Mijn dieren net zo groot en hoog als het hartje en het sneeuwvlokje: * 34 px op 10 px van de rand, met rand en schaduw. De module zet hem op 32 px en 8 px, waardoor * hij naast het hartje kleiner was en hoger stond (Mike, 1 nov 2026: "niet uitgelijnd"). */ .g26 .g26-kaartje > .geus-dieren-loop-allergie { top: 10px; right: 48px; } .g26 .g26-kaartje .geus-dieren-allergie-icoon { width: 34px; height: 34px; background: var(--vlak); border: 1px solid var(--lijn); box-shadow: 0 3px 10px rgba(31, 42, 46, .12); } .geus-vlag { display: inline-flex; margin-left: 6px; vertical-align: -1px; } .geus-vlag svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); } .g26 .product_title .geus-vlag { margin-left: 10px; vertical-align: 2px; } .g26 .product_title .geus-vlag svg { height: 20px; width: auto; } .g26-kp { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 14px 12px; margin-top: auto; } .g26-prijs { font-weight: 700; font-size: 16px; color: var(--inkt); line-height: 1.25; } .g26-prijs del { color: var(--inkt-zacht); font-weight: 500; font-size: 13px; opacity: 1; margin-right: 4px; } .g26-prijs ins { text-decoration: none; color: var(--accent); } .g26-kaart-inhoud { display: block; font-size: 12.5px; font-weight: 500; color: var(--inkt-zacht); margin-top: 1px; } .g26-vanaf { font-weight: 500; font-size: 13px; color: var(--inkt-zacht); } .g26 .g26-plus { flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--merk); color: var(--knop-tekst); display: grid; place-items: center; text-decoration: none; transition: background .15s, transform .1s; padding: 0; min-height: 0; } .g26 .g26-plus:hover { background: var(--merk-diep); color: var(--knop-tekst); } .g26 .g26-plus .g26-i { width: 19px; height: 19px; } .g26 .g26-plus.is-kies { background: var(--merk-licht); color: var(--merk); } .g26 .g26-plus.loading { opacity: .6; } .g26 .g26-plus.added { background: var(--goed); } .g26-kaartje .added_to_cart { display: none !important; } /* ========================================================================== Startpagina ========================================================================== */ .g26-held { padding-block: 34px 38px; } .g26-held-rij { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: center; } .g26 .g26-held-titel { font-size: clamp(36px, 5.2vw, 58px); font-weight: 800; line-height: 1.05; margin: 8px 0 0; } .g26 .g26-belofte { font-size: 19px; color: var(--inkt-zacht); margin: 14px 0 0; max-width: 46ch; } .g26-held-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .g26-held-foto { position: relative; } .g26-foto { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--schaduw); background: radial-gradient(120% 90% at 30% 20%, var(--foto-licht) 0%, var(--accent-licht) 55%, var(--accent-vlak) 100%); } .g26-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .g26 .g26-held-score { position: absolute; left: -18px; bottom: 28px; display: flex; align-items: center; gap: 12px; background: var(--vlak); color: var(--inkt); border-radius: 16px; padding: 12px 16px; box-shadow: var(--schaduw); text-decoration: none; } .g26-held-score b { font: 800 30px/1 var(--kop-letter); color: var(--inkt); } .g26-held-score > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--inkt-zacht); font-weight: 600; } .g26-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .g26 .g26-tegel { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: 12px; text-decoration: none; color: var(--inkt); transition: transform .15s, box-shadow .15s, border-color .15s; } .g26 .g26-tegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw); border-color: var(--merk); } .g26-tegel-foto { grid-row: 1 / 3; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--vlak-2); display: grid; place-items: center; } .g26-tegel-foto img { width: 100%; height: 100%; object-fit: cover; } .g26-tegel.is-product .g26-tegel-foto { background: #fff; } .g26-tegel.is-product .g26-tegel-foto img { width: 86%; height: 86%; object-fit: contain; } .g26-tegel-naam { font: 700 18px/1.15 var(--kop-letter); align-self: end; } .g26-tegel small { align-self: start; color: var(--inkt-zacht); font-size: 13px; } .g26-diensten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .g26 .g26-routes { list-style: none; padding: 0; display: grid; gap: 6px; margin: 4px 0 2px; } .g26 .g26-routes li { display: flex; gap: 10px; margin: 0; color: var(--inkt); font-size: 15px; } .g26-routes b { width: 26px; flex: none; color: var(--merk); font-family: var(--kop-letter); } .g26-routes small { color: var(--inkt-zacht); } /* afhaaltijden en pakketten: bredere eerste kolom ("di–do", "DPD", vlaggetje) */ .g26 .g26-routes.is-breed b { width: 44px; } .g26 .g26-routes.is-vervoerders b { width: 74px; display: flex; align-items: center; min-height: 22px; } .g26-vervoerder { display: block; width: auto; } .g26-vervoerder.is-dpd { height: 20px; } .g26-vervoerder.is-dhl { height: 15px; border-radius: 2px; } :root[data-theme="dark"] .g26-vervoerder.is-dpd { background: #fff; border-radius: 4px; padding: 2px 3px; height: 24px; } .g26-vlag { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); vertical-align: -2px; } .g26 .g26-kaart > .g26-kaart-adres { display: flex; gap: 8px; align-items: flex-start; color: var(--inkt); } .g26-kaart-adres .g26-i { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--merk); } .g26-contactlinks { display: flex; flex-direction: column; gap: 4px; } .g26 .g26-contactlinks a { font-weight: 700; text-decoration: none; } .g26-merken { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .g26 .g26-merk { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 10px; transition: transform .15s, box-shadow .15s; } .g26 .g26-merk:hover { transform: translateY(-2px); box-shadow: var(--schaduw); } .g26-merk img { width: 100%; max-width: 110px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; background: #fff; } .g26-merk span { font-weight: 700; font-size: 14px; } /* Overzicht van alle merken (template-merken.php): zoveel kolommen als er passen, naam-tegel zonder logo. */ .g26-merken.is-alle { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; } .g26-merken.is-alle .g26-merk { padding: 16px 12px 14px; } .g26-merken.is-alle .g26-merk small { color: var(--inkt-zacht); font-size: 13px; margin-top: -4px; } .g26-merk-letter { width: 100%; max-width: 110px; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--merk-licht); color: var(--merk); display: grid; place-items: center; font: 700 38px/1 var(--kop-letter); } .g26-recensies { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; } .g26 .g26-score { display: block; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 24px; color: var(--inkt); text-decoration: none; box-shadow: var(--schaduw-klein); } .g26 .g26-score:hover { border-color: var(--merk); } .g26-cijfer { font: 800 60px/1 var(--kop-letter); } .g26-cijfer small { font-size: 22px; color: var(--inkt-zacht); font-weight: 700; } .g26-score .g26-sterren { margin-top: 10px; } .g26-score .g26-sterren .g26-i { width: 20px; height: 20px; } .g26-score p { margin: 10px 0 14px; color: var(--inkt-zacht); font-size: 15px; } .g26-quotes { display: grid; gap: 12px; } .g26-quote { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 16px 18px; margin: 0; } .g26-quote blockquote { margin: 6px 0 0; padding: 0; border: 0; font-style: normal; } .g26-quote blockquote p { margin: 0; font-size: 15px; color: var(--inkt); } .g26-quote figcaption { margin-top: 10px; font-size: 13px; color: var(--inkt-zacht); display: flex; align-items: center; gap: 8px; } /* Beoordelingen van het product zelf (WooCommerce-sjabloon single-product-reviews.php), boven WebwinkelKeur. */ .g26-productrecensies { margin-top: 20px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 22px 24px; } .g26-productrecensies .woocommerce-Reviews-title { font: 700 20px/1.2 var(--kop-letter); margin: 0 0 6px; } .g26-productrecensies .commentlist { list-style: none; margin: 0; padding: 0; } .g26-productrecensies .commentlist .comment_container { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lijn); } .g26-productrecensies .commentlist img.avatar { display: none; } /* Gravatar is hier altijd een leeg vlak */ .g26-productrecensies .comment-text { flex: 1; min-width: 0; } .g26-productrecensies .comment-text .meta { margin: 4px 0 0; font-size: 13px; color: var(--inkt-zacht); } .g26-productrecensies .comment-text .description p { margin: 6px 0 0; font-size: 15px; } .g26-productrecensies .woocommerce-review__verified { font-style: normal; color: var(--goed); } .g26-productrecensies .woocommerce-noreviews, .g26-productrecensies .woocommerce-verification-required { margin: 0; color: var(--inkt-zacht); } .g26-productrecensies .star-rating { position: relative; display: inline-block; overflow: hidden; width: 5.4em; height: 1.1em; line-height: 1; font-size: 14px; color: var(--ster); } .g26-productrecensies .star-rating::before { content: "★★★★★"; position: absolute; top: 0; left: 0; color: var(--lijn); letter-spacing: .08em; } .g26-productrecensies .star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; padding-top: 1.5em; } .g26-productrecensies .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; letter-spacing: .08em; color: var(--ster); } .g26-productrecensies #review_form_wrapper { margin-top: 18px; } .g26-productrecensies .comment-reply-title { display: block; font: 700 20px/1.2 var(--kop-letter); margin-bottom: 10px; } .g26-productrecensies .comment-form > p { margin: 0 0 12px; } .g26-productrecensies .comment-form textarea { width: 100%; } .g26-productrecensies p.stars { margin: 0; line-height: 1; } /* Breedte in px: met font-size 0 is 1em nul, en dan lagen de vijf sterren over elkaar (klik op 5 gaf soms 2). */ .g26-productrecensies p.stars a { display: inline-block; width: 34px; height: 34px; font-size: 0; color: var(--lijn); text-decoration: none; } .g26-productrecensies p.stars a::before { content: "★"; font-size: 30px; line-height: 1; } .g26-productrecensies p.stars:hover a, .g26-productrecensies p.stars.selected a { color: var(--ster); } .g26-productrecensies p.stars a:hover ~ a, .g26-productrecensies p.stars.selected a.active ~ a { color: var(--lijn); } .g26-productrecensies p.stars:hover a:hover ~ a { color: var(--lijn); } .g26-quote figcaption i { width: 26px; height: 26px; border-radius: 999px; background: var(--accent-licht); color: var(--accent); font-style: normal; font-weight: 700; font-size: 12px; display: grid; place-items: center; } .g26-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .g26 .g26-blogkaart { display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; color: var(--inkt); text-decoration: none; transition: transform .15s, box-shadow .15s; } .g26 .g26-blogkaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw); } .g26-blogfoto { aspect-ratio: 16 / 10; background: var(--vlak-2); overflow: hidden; } .g26-blogfoto img { width: 100%; height: 100%; object-fit: cover; } .g26-blogtekst { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; } .g26-blogtekst small { color: var(--inkt-zacht); font-size: 12.5px; } .g26-blogtekst b { font: 700 18px/1.25 var(--kop-letter); } .g26-blogtekst span { color: var(--inkt-zacht); font-size: 14.5px; } @media (max-width: 1000px) { .g26-tegels, .g26-diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g26-merken { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g26-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .g26-held { padding-block: 20px 28px; } .g26-held-rij { grid-template-columns: minmax(0, 1fr); gap: 26px; } .g26-held-foto { order: -1; } .g26-foto { aspect-ratio: 4 / 3; border-radius: 22px; } .g26 .g26-held-score { left: 12px; bottom: 12px; padding: 10px 14px; } .g26-recensies { grid-template-columns: minmax(0, 1fr); } .g26-blog { grid-template-columns: minmax(0, 1fr); } .g26-blok-kop { align-items: flex-start; flex-direction: column; gap: 8px; } /* productrijen schuiven op de telefoon horizontaal; dan blijft de pagina kort */ .g26-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; } .g26-rij::-webkit-scrollbar { display: none; } .g26-rij > .g26-kaartje { flex: 0 0 min(64vw, 240px); scroll-snap-align: start; } } @media (max-width: 560px) { .g26-tegels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .g26 .g26-tegel { grid-template-columns: minmax(0, 1fr); padding: 10px; row-gap: 6px; } .g26-tegel-foto { grid-row: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; } .g26-tegel-naam { font-size: 16.5px; } .g26-diensten { grid-template-columns: minmax(0, 1fr); } .g26-merken { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g26-feiten { gap: 8px; } .g26-feit { padding: 10px; } .g26-feit b { font-size: 19px; } .g26-feit span { font-size: 11.5px; } .g26 .g26-knop { flex: 1 1 100%; } } /* ========================================================================== Productpagina ========================================================================== */ .g26-productpagina .product-container, .g26-productpagina .product-main, .g26-productpagina #main > .container { max-width: none; padding: 0; } .g26-kruimel { font-size: 13.5px; color: var(--inkt-zacht); padding-block: 16px 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .g26 .g26-kruimel a { color: inherit; text-decoration: none; } .g26 .g26-kruimel a:hover { color: var(--merk); } .g26-kruimel-streep { opacity: .5; } /* Telefoon: het kruimelpad wordt één terugkoppeling naar de stap erboven ("‹ Snacks") in plaats van * het hele pad over twee of drie regels, en boven de categorietitel geen losse regel met dezelfde * bovencategorie (Mike, 1 nov 2026: "Is dat niet wat veel?"). font-size 0 verbergt ook de * huidige pagina, die als losse tekst achteraan staat; de titel zegt het al. */ @media (max-width: 640px) { .g26-kruimel { font-size: 0; gap: 0; padding-block: 12px 2px; } .g26-kruimel > * { display: none; } .g26 .g26-kruimel > a:last-of-type { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--merk); } .g26 .g26-kruimel > a:last-of-type::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } .g26-cat-kop .g26-eyebrow { display: none; } } .g26-product-rij { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 10px 36px; } .g26-podium { position: sticky; top: 16px; max-width: 720px; } .g26 .g26-fotos { border: 0; padding: 0; margin: 0; background: none; } /* productfoto: vult het hele vak (geen gekleurde rand eromheen), op wit zodat losse productfoto's naadloos aansluiten */ .g26 .g26-productfoto { aspect-ratio: 1 / 1; display: grid; place-items: center; background: #fff; border: 1px solid var(--lijn); } .g26 .g26-productfoto img { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; cursor: zoom-in; filter: none; transition: transform .5s ease; } .g26-productfoto:hover img { transform: scale(1.03); } .g26-productfoto .g26-nieuw { position: absolute; z-index: 2; left: 16px; top: 16px; width: 54px; height: 54px; border-radius: 999px; background: rgba(30, 115, 190, .82); color: #fff; font: 700 14px/1 var(--kop-letter); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(30, 115, 190, .3); } .g26-productfoto .g26-stempel { position: absolute; z-index: 2; right: 20px; top: 20px; background: var(--vlak); color: var(--accent); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13.5px; box-shadow: var(--schaduw); } /* Met het allergiedriehoekje van "Mijn dieren" rechtsboven (36 px op 12 px van de rand) schuift het stempel ernaast; anders viel de driehoek over "100% kip" (Mike, 26 okt 2026). */ .g26-productfoto:has(> .g26-foto-waarschuwing) .g26-stempel { top: 15px; right: 56px; } .g26-herkomst { position: absolute; z-index: 2; right: 20px; bottom: 20px; display: flex; gap: 6px; align-items: center; background: rgba(255, 255, 255, .88); color: #5a2f1c; border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; } .g26-herkomst .g26-i { width: 16px; height: 16px; } /* Vergrootglas en hartje naast elkaar, linksonder op de foto. */ .g26-foto-knoppen { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; gap: 8px; align-items: center; } .g26 .g26-vergroot { position: static; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--inkt); display: grid; place-items: center; box-shadow: var(--schaduw-klein); } .g26-foto-wens { display: inline-flex; } .g26 .g26-foto-wens .geus-wishlist-btn-container { position: static; margin: 0; display: inline-flex !important; } .g26 .g26-foto-wens .geus-wishlist-btn { position: static; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--inkt); display: grid; place-items: center; box-shadow: var(--schaduw-klein); } .g26 .g26-foto-wens .geus-wishlist-btn.geus-wishlist-active { color: var(--accent); } /* Even groot als het vergrootglas ernaast: dezelfde tekening (24x24, lijn 2), alleen had het hartje geen maat meegekregen en viel het daardoor uit de toon. */ /* De module tekent het hartje als tekstteken (een Arial-hartje van 23px) en verbergt zijn eigen icoon. Naast het getekende vergrootglas vloekt dat. Hier omgekeerd: het teken weg, het icoon zichtbaar en even groot. */ .g26 .g26-foto-wens .geus-wishlist-btn { width: 40px !important; height: 40px !important; } .g26 .g26-foto-wens .geus-wishlist-btn::before { content: none !important; } .g26 .g26-foto-wens .geus-wishlist-icon { display: block !important; width: 18px !important; height: 18px !important; } .g26-vergroot .g26-i { width: 18px; height: 18px; } .g26-duimen { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; } .g26 .g26-duim { flex: none; width: 66px; height: 66px; margin: 0; padding: 4px; min-height: 0; border: 2px solid var(--lijn); border-radius: 12px; background: #fff; cursor: pointer; } .g26 .g26-duim.is-actief, .g26 .g26-duim:hover { border-color: var(--merk); } .g26-duim img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } .g26-product-feiten { margin-top: 14px; max-width: none; } /* iPhone/Safari: een enkele 1fr-kolom rekt op naar de breedte van zijn inhoud (de miniaturenstrook), waardoor de pagina te breed werd. */ .g26-podium, .g26-product-info, .g26-fotos { min-width: 0; } .g26-duimen { max-width: 100%; } .g26 .g26-product-info .product_title { font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; line-height: 1.08; margin: 6px 0 0; letter-spacing: -.01em; } .g26-product-info .g26-belofte { font-size: 18px; color: var(--inkt-zacht); margin-top: 10px; max-width: none; } .g26-product-info .g26-belofte p { margin: 0 0 8px; } .g26-koop { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 22px; margin-top: 22px; box-shadow: var(--schaduw); } .g26 .g26-koop > .price, .g26 .g26-koop .woocommerce-variation-price .price { font: 700 28px/1.1 var(--kop-letter); color: var(--inkt); margin: 0 0 12px; } .g26 .g26-koop .price del { font-size: 18px; color: var(--inkt-zacht); font-weight: 500; } .g26 .g26-koop .price ins { text-decoration: none; color: var(--accent); } .g26 .g26-koop > .price:has(+ .g26-inhoud-regel) { margin-bottom: 4px; } .g26-inhoud-regel { margin: 0 0 12px; font-size: 15px; color: var(--inkt-zacht); } .g26-inhoud-regel b { color: var(--inkt); font-weight: 700; } .g26 .g26-koop:has(.g26-maten) > .price, .g26 .g26-koop:has(.g26-maten) > .price-wrapper { display: none; } .g26 .g26-koop > .price-wrapper .price { font: 700 28px/1.1 var(--kop-letter); color: var(--inkt); margin: 0 0 12px; } /* Uitverkocht zonder bestelformulier, met een levering onderweg: de melding van "Binnenkort verwacht" rechts naast prijs en maat in plaats van eronder (Mike, 26 okt 2026). De module zet hem dan direct na .g26-voorraad. Op de telefoon blijft hij eronder. */ @media (min-width: 561px) { .g26 .g26-koop:has(> .g26-voorraad + #geus-inbound-box) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; } .g26 .g26-koop:has(> .g26-voorraad + #geus-inbound-box) > * { grid-column: 1 / -1; } .g26 .g26-koop:has(> .g26-voorraad + #geus-inbound-box) > .price { grid-column: 1; grid-row: 1; } .g26 .g26-koop:has(> .g26-voorraad + #geus-inbound-box) > .g26-inhoud-regel { grid-column: 1; grid-row: 2; } .g26 .g26-koop:has(> .g26-voorraad + #geus-inbound-box) > #geus-inbound-box { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 12px; } } .g26-koop-kop { font: 700 15px/1.3 var(--kop-letter); color: var(--inkt-zacht); margin-bottom: 10px; } .g26-maten-blok { margin-bottom: 14px; } .g26-maten { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; border-radius: 16px; transition: box-shadow .2s; } .g26-maten.is-let-op { box-shadow: 0 0 0 3px var(--accent-licht); } .g26 .g26-maat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; margin: 0; min-height: 0; background: var(--vlak-2); border: 2px solid var(--lijn); border-radius: 14px; padding: 14px 14px 12px; color: var(--inkt); font-family: var(--tekst-letter); text-transform: none; letter-spacing: 0; cursor: pointer; transition: border-color .15s, background .15s; } .g26 .g26-maat:hover { border-color: var(--merk); } .g26 .g26-maat[aria-pressed="true"] { border-color: var(--merk); background: var(--merk-licht); } .g26 .g26-maat[data-niet-leverbaar] { opacity: .55; } .g26-maat-naam { font: 700 20px/1.15 var(--kop-letter); } .g26-maat-prijs { font-weight: 700; font-size: 17px; } .g26-maat-prijs del { font-weight: 500; font-size: 13px; color: var(--inkt-zacht); } .g26-maat-per { font-size: 12.5px; color: var(--inkt-zacht); font-weight: 500; } /* Ruimte voor het label "8% voordeliger" bij álle maten zodra één maat het heeft, anders staat de * naam van die maat lager dan die ernaast (Mike, 1 nov 2026: "200 gr en 1 kilo niet op dezelfde hoogte"). */ .g26 .g26-maten:has(.g26-maat-tip) .g26-maat { padding-top: 22px; } .g26-maat-tip { position: absolute; top: -10px; right: 10px; background: var(--goed); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; } /* de keuzelijst (en Flatsome's knopjes) blijven in het formulier, maar de kaarten zijn de bediening. Verbergen met CSS (niet met JS): WP Rocket laadt de scripts pas na de eerste interactie. */ .g26 .g26-maten-blok ~ table.variations { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .g26 .g26-maten-blok ~ table.variations .reset_variations, .g26 .g26-maten-blok ~ .single_variation_wrap .reset_variations { display: none !important; } /* aantal + knop */ .g26 .g26-koop form.cart { margin: 0; } .g26 .g26-koop .woocommerce-variation-add-to-cart, .g26 .g26-koop form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .g26 .g26-koop .quantity { margin: 0; display: inline-flex; align-items: stretch; border: 2px solid var(--lijn); border-radius: 12px; overflow: hidden; background: var(--vlak-2); height: 54px; } .g26 .g26-koop .quantity input.qty { width: 48px; height: 100%; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 17px; box-shadow: none; padding: 0; } .g26 .g26-koop .quantity .button, .g26 .g26-koop .quantity .ux-quantity__button { width: 40px; min-height: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--inkt); font-size: 20px; box-shadow: none; } .g26 .g26-koop .quantity .button:hover { background: var(--merk-licht); } .g26 .g26-koop .single_add_to_cart_button { flex: 1; min-width: 0; height: 54px; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-radius: 12px; font: 700 20px/1 var(--kop-letter); padding: 0 18px; text-transform: none; } .g26 .g26-koop .single_add_to_cart_button.disabled { opacity: .55; } .g26-knop-bedrag { font: 700 17px/1 var(--tekst-letter); opacity: .95; white-space: nowrap; } .g26-knop-bedrag:empty { display: none; } .g26 .g26-koop .single_add_to_cart_button:has(.g26-knop-bedrag:empty) { justify-content: center; } .g26 .g26-koop .ux-buy-now-button, .g26 .g26-koop .geus-buy-now { flex: 1 1 100%; margin: 0; } /* voorraad en meldingen van de modules */ .g26 .g26-koop .stock { display: block; position: relative; padding-left: 18px; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--goed); } .g26 .g26-koop .stock::before { content: ""; position: absolute; left: 1px; top: .5em; width: 9px; height: 9px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 4px var(--goed-licht); } .g26 .g26-koop .stock.out-of-stock { color: #b32d2e; } .g26 .g26-koop .stock.available-on-backorder { color: var(--accent); } .g26 .g26-koop .stock.available-on-backorder::before { box-shadow: 0 0 0 4px var(--accent-licht); } .g26 .g26-koop .woocommerce-variation-description p, .g26 .g26-koop .woocommerce-variation-availability p:not(.stock) { font-size: 14px; color: var(--inkt-zacht); } .g26 .g26-koop .woocommerce-variation { margin-bottom: 12px; } .g26 .g26-levering { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--lijn); list-style: none; display: grid; gap: 10px; font-size: 14px; } .g26 .g26-levering li { display: flex; gap: 10px; align-items: flex-start; margin: 0; } .g26-levering .g26-i { width: 18px; height: 18px; flex: none; color: var(--merk); margin-top: 2px; } .g26-levering b { font-weight: 700; display: block; } .g26-levering small { color: var(--inkt-zacht); display: block; font-size: 13px; } /* secties onder het product */ .g26-sectie { border-top: 1px solid var(--lijn); } .g26-tabinhoud { margin-top: 18px; font-size: 16px; } .g26-tabinhoud > *:first-child { margin-top: 0; } /* 18 okt 2026: één breedte voor alle pagina's (Mike): tekstvakken lopen net zo breed als de kaartenrij. */ .g26-sectie-description .g26-tabinhoud, .g26-cat-omschrijving .g26-tabinhoud { max-width: none; } .g26 .g26-tabinhoud h2, .g26 .g26-tabinhoud h3, .g26 .g26-tabinhoud h4 { font-family: var(--kop-letter); line-height: 1.2; margin: 1.3em 0 .4em; } .g26 .g26-tabinhoud h2 { font-size: 24px; } .g26 .g26-tabinhoud h3 { font-size: 20px; } .g26 .g26-tabinhoud h4, .g26 .g26-tabinhoud h5 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .g26-tabinhoud p, .g26-tabinhoud li { color: var(--inkt); } .g26-tabinhoud .geus-product-analyse, .g26-tabinhoud .geus-product-samenstelling { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 16px 18px; margin: 12px 0; } .g26-tabinhoud .geus-product-analyse ul { columns: 2; column-gap: 28px; margin: 0; padding-left: 18px; } .g26-tabinhoud table.woocommerce-product-attributes { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } .g26-tabinhoud table.woocommerce-product-attributes th, .g26-tabinhoud table.woocommerce-product-attributes td { padding: 12px 16px; border-bottom: 1px solid var(--lijn); font-size: 15px; } .g26-tabinhoud table.woocommerce-product-attributes tr:last-child th, .g26-tabinhoud table.woocommerce-product-attributes tr:last-child td { border-bottom: 0; } .g26-tabinhoud table.woocommerce-product-attributes th { color: var(--inkt-zacht); font-weight: 600; width: 40%; } .g26-spec { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; } .g26-spec th, .g26-spec td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--lijn); font-size: 15px; vertical-align: middle; } .g26-spec tr:last-child th, .g26-spec tr:last-child td { border-bottom: 0; } .g26 .g26-spec th { width: 42%; color: var(--inkt-zacht); font-weight: 600; text-transform: none; letter-spacing: 0; } .g26-spec td { font-weight: 600; } .g26-spec .g26-spec-groep td { background: var(--vlak-2); color: var(--accent); font: 700 16px/1.2 var(--kop-letter); } .g26-staaf { display: flex; align-items: center; gap: 10px; } .g26-staaf i { flex: 1; height: 8px; background: var(--lijn); border-radius: 999px; overflow: hidden; display: block; max-width: 260px; } .g26-staaf i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: var(--accent); border-radius: 999px; } .g26-spec-noot { margin-top: 10px; font-size: 13.5px; color: var(--inkt-zacht); } /* koopbalk (telefoon) */ .g26-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; gap: 12px; align-items: center; background: var(--vlak); border-top: 1px solid var(--lijn); box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .25s; } .g26-balk.is-zichtbaar { transform: none; } .g26-balk-prijs { display: flex; flex-direction: column; min-width: 0; } .g26-balk-bedrag { font-weight: 700; font-size: 17px; } .g26-balk-tekst { color: var(--inkt-zacht); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g26 .g26-balk .g26-knop { margin-left: auto; min-height: 46px; padding: 10px 16px; font-size: 17px; } /* fotovenster */ .g26-fotovenster { border: 0; border-radius: 20px; padding: 0; max-width: min(92vw, 900px); max-height: 92vh; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } .g26-fotovenster::backdrop { background: rgba(31, 42, 46, .6); } .g26-fotovenster img { display: block; max-width: 100%; max-height: 92vh; object-fit: contain; } .g26 .g26-fotovenster-sluit { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--vlak-2); font-size: 24px; line-height: 1; color: var(--inkt); } @media (max-width: 1000px) { .g26-knop-bedrag { display: none; } .g26 .g26-koop .single_add_to_cart_button { justify-content: center; } } @media (max-width: 860px) { .g26-product-rij { grid-template-columns: minmax(0, 1fr); gap: 20px; } .g26-podium { position: static; } } @media (max-width: 560px) { .g26-balk { display: flex; } .g26-productpagina .g26-voet { padding-bottom: 76px; } .g26-koop { padding: 16px; } .g26 .g26-product-info .product_title { font-size: 34px; } .g26 .g26-maat { padding: 12px 12px 10px; } .g26-maat-naam { font-size: 18px; } .g26-productfoto .g26-nieuw { left: 12px; top: 12px; width: 46px; height: 46px; font-size: 12.5px; } .g26-spec th, .g26-spec td { padding: 10px 12px; font-size: 14px; } .g26-tabinhoud .geus-product-analyse ul { columns: 1; } } @media (max-width: 460px) { .g26 .g26-koop .woocommerce-variation-add-to-cart, .g26 .g26-koop form.cart:not(.variations_form) { flex-wrap: wrap; } .g26 .g26-koop .quantity { flex: 1; justify-content: center; } .g26 .g26-koop .single_add_to_cart_button { flex: 1 1 100%; } } /* ========================================================================== Categorie- en winkelpagina ========================================================================== */ .g26-categoriepagina #main > .container, .g26-categoriepagina .shop-container { max-width: none; padding: 0; } .g26-kop3 { font: 700 19px/1.2 var(--kop-letter); margin: 0; } .g26-cat-kop { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 32px; align-items: start; padding-block: 10px 6px; } .g26 .g26-cat-kop .geus-cat-title { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; line-height: 1.08; margin: 6px 0 0; } .g26-cat-kop .g26-belofte { margin-top: 10px; font-size: 17.5px; max-width: 56ch; } .g26-cat-feiten { display: flex; gap: 26px; margin-top: 20px; flex-wrap: wrap; } .g26-cat-feiten div { border-left: 3px solid var(--accent); padding-left: 12px; } .g26-cat-feiten b { display: block; font: 700 28px/1 var(--kop-letter); color: var(--inkt); } .g26-cat-feiten span { font-size: 13px; color: var(--inkt-zacht); } .g26-cat-lever { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--schaduw); } .g26 .g26-cat-lever-kop { font: 700 16px/1.2 var(--kop-letter); margin: 0; } .g26 .g26-cat-lever .g26-levering { margin-top: 12px; padding-top: 0; border-top: 0; } .g26-subcats { padding-block: 26px 4px; } .g26-subcats-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 12px; } .g26 .g26-subcat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 8px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; color: var(--inkt); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; } .g26 .g26-subcat:hover { transform: translateY(-2px); box-shadow: var(--schaduw); border-color: var(--merk); } .g26-subcat-beeld { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; margin-bottom: 6px; } .g26-subcat-beeld img { width: 88%; height: 88%; object-fit: contain; } .g26-subcat.is-categorie .g26-subcat-beeld img { width: 100%; height: 100%; object-fit: cover; } .g26-subcat.is-logo .g26-subcat-beeld { aspect-ratio: 16 / 9; } /* logo's zijn breed: lagere merktegels (Mike, 30 okt 2026) */ /* Diericonen bij snacks (inc/diericonen.php), in de merkkleur. */ .g26-subcat.is-icoon .g26-subcat-beeld { aspect-ratio: 16 / 9; background: var(--merk-licht); color: var(--merk); } .g26-subcat.is-icoon .g26-subcat-beeld svg { width: 52%; height: 72%; } .g26 .g26-subcat.is-icoon:hover .g26-subcat-beeld { color: var(--merk-diep); } .g26 .g26-subcat.is-krap .g26-subcat-beeld img { width: 70%; height: 70%; object-fit: contain; } /* logo zonder witruimte in het plaatje (Tammenga), zie g26_krappe_logos() */ .g26-subcat-naam { font-weight: 700; font-size: 14px; line-height: 1.25; } .g26-subcat small { color: var(--inkt-zacht); font-size: 12px; } /* Bubbel "Nieuw" op een tegel (g26_nieuwe_tegels() in inc/categorie.php), kleiner dan op de productkaartjes. */ .g26 .g26-subcat { position: relative; } .g26-subcat .g26-badge { left: 6px; top: 6px; padding: 2px 8px; font-size: 11px; } /* Twee rijen: de lijstkop (telling + sortering) bovenaan rechts, daaronder de filterkolom naast de kaartjes. Zo beginnen de kolom en de eerste rij kaartjes op dezelfde hoogte (Mike, 18 okt 2026); eerder stond de kop in de lijst en begon de kolom een kopregel (58 px) te hoog. */ .g26-catalogus { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; row-gap: 0; align-items: start; padding-block: 24px 10px; } /* De telling begint links, boven de filters; sorteren en raster/lijst blijven rechts (Mike, 2 nov 2026). */ .g26-catalogus > .g26-lijst-kop { grid-column: 1 / -1; grid-row: 1; } .g26-catalogus > .g26-filters { grid-column: 1; grid-row: 2; } .g26-catalogus > .g26-lijst { grid-column: 2; grid-row: 2; } .g26-filters { position: sticky; top: 16px; } .g26-catalogus.is-zonder-filters { grid-template-columns: minmax(0, 1fr); } .g26-catalogus.is-zonder-filters > .g26-lijst-kop, .g26-catalogus.is-zonder-filters > .g26-lijst { grid-column: 1; } .g26-lijst-kop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .g26 .g26-lijst-kop .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--inkt-zacht); } .g26 .g26-lijst-kop .woocommerce-ordering { margin: 0; min-width: 0; } .g26 .g26-lijst-kop .woocommerce-ordering select { max-width: 100%; min-height: 42px; padding: 8px 36px 8px 12px; border-radius: 10px; font-size: 14px; } .g26 .g26-lijst-kop .woocommerce-notices-wrapper { flex: 1 1 100%; } /* ---------- raster of lijst (Mike, 2 nov 2026) ---------- Twee knopjes naast "Sorteer op", samen met de sortering in .g26-lijst-acties rechts in de lijstkop. De keuze zit als data-weergave="lijst" op (g26_weergave_keuze() in inc/categorie.php, het kopscriptje in inc/vormgeving.php en g26.js), dus de AJAX-filter, de paginering en de paginacache hoeven er niets van te weten. Alleen de lijst naast de knopjes (.g26-lijst-kop ~ .g26-lijst) wisselt: de rijen op de startpagina, "Past hierbij" en de merkenpagina blijven altijd een raster. */ .g26-lijst-acties { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; } .g26-weergave { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); } .g26 .g26-weergave-knop { display: grid; place-items: center; width: 36px; height: 34px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--inkt-zacht); box-shadow: none; cursor: pointer; transition: background-color .15s, color .15s; } .g26 .g26-weergave-knop .g26-i { width: 19px; height: 19px; } .g26 .g26-weergave-knop:hover { background: var(--vlak-2); color: var(--merk); } .g26 .g26-weergave-knop:focus-visible { outline: 2px solid var(--merk); outline-offset: 1px; } /* De gekozen knop volgt en niet aria-pressed: g26.js draait pas na de eerste aanraking (WP Rocket). */ :root:not([data-weergave="lijst"]) .g26 .g26-weergave-knop[data-g26-weergave="raster"], :root[data-weergave="lijst"] .g26 .g26-weergave-knop[data-g26-weergave="lijst"] { background: var(--merk-licht); color: var(--merk); } /* De lijst: per product een rij met de foto links, daarnaast merk, naam en gegevens, rechts prijs, hartje en knop. Het kaartje wordt zelf een raster; .g26-kp valt weg (display: contents), zodat prijs en knop een eigen kolom krijgen. Het fotovak loopt over de hele hoogte van de rij. */ :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto auto auto; grid-template-rows: auto; align-items: center; column-gap: 14px; padding: 0 14px 0 0; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kf { grid-column: 1; grid-row: 1; align-self: stretch; min-height: 132px; aspect-ratio: auto; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kf img { padding: 6px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-badge { left: 6px; top: 6px; padding: 3px 8px; font-size: 11px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-vries-knop { top: auto; right: 6px; bottom: 6px; width: 28px; height: 28px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-vries-knop .g26-i { width: 14px; height: 14px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-snelkijk { display: none; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje-link { grid-column: 2; grid-row: 1; padding: 12px 0; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kt { padding: 0; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kt::before { content: none; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje-naam { min-height: 0; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kp { display: contents; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-prijs { grid-column: 3; grid-row: 1; margin-right: 4px; text-align: right; font-size: 17px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje > .geus-wishlist-btn-container { position: static; grid-column: 4; grid-row: 1; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-plus { grid-column: 5; grid-row: 1; } /* Het allergiedriehoekje van Mijn dieren linksonder op de foto (rechtsonder staat het sneeuwvlokje). */ :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje > .geus-dieren-loop-allergie { top: auto; right: auto; bottom: 6px; left: 6px; } @media (max-width: 560px) { /* Telefoon: foto 96 px breed; naam en gegevens bovenaan, prijs, hartje en knop eronder. */ :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje { grid-template-columns: 96px minmax(0, 1fr) auto auto; grid-template-rows: 1fr auto; column-gap: 10px; row-gap: 6px; padding: 0 10px 10px 0; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kf { grid-row: 1 / -1; min-height: 106px; margin-bottom: -10px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje-link { grid-column: 2 / -1; grid-row: 1; align-self: start; padding: 10px 0 0; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-prijs { grid-column: 2; grid-row: 2; margin: 0; text-align: left; font-size: 15px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje > .geus-wishlist-btn-container { grid-column: 3; grid-row: 2; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-plus { grid-column: 4; grid-row: 2; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-badge { left: 4px; top: 4px; padding: 2px 7px; font-size: 10.5px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-vries-knop { right: 4px; bottom: 4px; width: 26px; height: 26px; } :root[data-weergave="lijst"] .g26-lijst-kop ~ .g26-lijst .g26-kaartje > .geus-dieren-loop-allergie { bottom: 4px; left: 4px; } } .g26-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .g26 .g26-grid > .g26-kaartje { width: auto; max-width: none; padding: 0; margin: 0; } /* ---------- paginering: producten, blog en de AJAX-filter (16 okt 2026) ---------- De