/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* Add your custom styles here */
/* =====================================================================
Primecook - header & footer, 1:1 waarden van de oude QSTool-site.
Gemeten op primecook.nl bij viewport 1500px, 30-07-2026.
Referentiematen origineel (document 1485px breed) - allemaal gehaald:
header zichtbaar ......... 141px
groene contactbar ......... 40px (55px hoog, margin-top:-15px)
menubalk ................. 100px (menu line-height 100px)
contactbar content ...... 1080px (+13px padding l/r = 1106 totaal)
contentcontainer ........ 1080px
logoblok ............. 302 x 78px (logo max-height 80px)
footer groene rij ....... 1080px padding 4% 1% (border-box)
footer kolom ............. 350px (1050,3 / 3)
Drie Elementor-eigenaardigheden zijn hier verwerkt. Wie deze CSS aanpast
moet ze kennen, anders breekt de layout opnieuw:
1. Container-padding loopt via de custom properties --padding-block-*
en --padding-inline-*. Elementor schrijft die per element weg met drie
klassen, dus met hogere specificiteit dan een enkele klasse hier.
Daarom staan de variabelen hieronder met !important.
2. Een "boxed" container bestaat uit twee elementen: .e-con met de
max-width, en daarbinnen .e-con-inner. Zet je width:95% op beide, dan
krimpt de content dubbel (1080 -> 1026) en valt het menu op twee
regels. Breedte hoort dus op de container, de inner blijft 100%.
3. Gebruik NOOIT een universele selector voor font-family. `.pc-header *`
overschrijft ook de font-family van icoon-fonts, waardoor alle iconen
verdwijnen. Roboto wordt hier alleen op de wrapper gezet en geerfd.
===================================================================== */
:root {
--pc-green: #7F9C90;
--pc-green-hover: #19C55D;
--pc-text: #3D3D3C;
--pc-white: #FFFFFF;
--pc-border: #DDDDDD;
--pc-content: 1080px;
}
.pc-header,
.pc-footer { font-family: Roboto, sans-serif; }
/* ============================================ container-padding (zie 1) == */
.pc-header,
.pc-contactbar,
.pc-mainbar,
.pc-mobilebar,
.pc-mob-left,
.pc-mob-right,
.pc-mainbar-inner,
.pc-logocontainer,
.pc-menucontainer,
.pc-mobilelogocontainer,
.pc-footer,
.pc-footerwhite,
.pc-footergreen,
.pc-bomenbordertop,
.pc-footercol,
.pc-logobox-images {
--padding-block-start: 0px !important;
--padding-block-end: 0px !important;
--padding-inline-start: 0px !important;
--padding-inline-end: 0px !important;
}
.pc-contactbar-inner {
--padding-block-start: 0px !important;
--padding-block-end: 0px !important;
--padding-inline-start: 13px !important;
--padding-inline-end: 13px !important;
}
/* Padding hoort op de container zelf, niet op .e-con-inner. Een procentuele
padding rekent namelijk tegen de breedte van het OUDERELEMENT. Zet je hem op
.e-con-inner, dan is die ouder de boxed container (916px) in plaats van de
volle breedte (985px) - en valt de footer smaller uit dan op het origineel. */
.pc-footergreen-inner {
--padding-block-start: 0px !important;
--padding-block-end: 0px !important;
--padding-inline-start: 0px !important;
--padding-inline-end: 0px !important;
padding: 4% 1% !important;
}
.pc-footergreen-inner > .e-con-inner { padding: 0 !important; }
/* ================================================= breedtes (zie 2) ===== */
.pc-contactbar-inner,
.pc-mainbar-inner,
.pc-bomenbordertop,
.pc-footergreen-inner { margin-inline: auto !important; }
.pc-contactbar-inner { max-width: 1106px !important; width: 95% !important; }
.pc-mainbar-inner,
.pc-bomenbordertop,
.pc-footergreen-inner { max-width: var(--pc-content) !important; width: 95% !important; }
.pc-contactbar-inner > .e-con-inner,
.pc-mainbar-inner > .e-con-inner,
.pc-bomenbordertop > .e-con-inner,
.pc-footergreen-inner > .e-con-inner {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
/* ================================================== HEADER: contactbar == */
.pc-contactbar { background: var(--pc-green); min-height: 40px; }
.pc-contactbar-inner { min-height: 40px; }
.pc-contactbar-inner,
.pc-contactbar-inner > .e-con-inner {
display: flex; flex-direction: row;
justify-content: space-between; align-items: center;
}
.pc-headercontact .elementor-icon-list-item,
.pc-headercontact .elementor-icon-list-item > a,
.pc-headercontact .elementor-icon-list-text,
.pc-headersocials .elementor-icon-list-item > a {
color: var(--pc-white); font-size: 16px; font-weight: 300;
line-height: 28.8px; text-decoration: none;
}
.pc-headercontact .elementor-icon-list-icon svg,
.pc-headersocials .elementor-icon-list-icon svg { fill: var(--pc-white); }
.pc-headercontact .elementor-icon-list-icon svg { height: 16px; width: 16px; }
.pc-headersocials .elementor-icon-list-icon svg { height: 18px; width: 18px; }
.pc-headersocials .elementor-icon-list-items { gap: 20px; }
.pc-headercontact .elementor-icon-list-items,
.pc-headercontact .elementor-icon-list-item { margin: 0; padding: 0; }
/* ================================================== HEADER: hoofdbalk === */
.pc-header { border-bottom: 0 !important; }
.pc-mainbar {
background: var(--pc-white);
border-bottom: 1px solid var(--pc-border);
min-height: 100px;
}
.pc-mainbar-inner,
.pc-mainbar-inner > .e-con-inner {
display: flex; flex-direction: row;
justify-content: space-between; align-items: center;
min-height: 100px;
}
.pc-logocontainer { width: 28%; margin: 0 !important; }
.pc-logocontainer,
.pc-logocontainer > .e-con-inner {
display: flex; flex-direction: row; align-items: center; gap: 10px;
}
.pc-logocontainer .elementor-widget-image,
.pc-mobilelogocontainer .elementor-widget-image { line-height: 0; }
.pc-logocontainer .pc-logo img,
.pc-logocontainer .pc-logo-second img {
max-height: 80px; height: auto; width: auto; display: block;
}
.pc-menucontainer { width: 72%; }
.pc-menucontainer,
.pc-menucontainer > .e-con-inner {
display: flex; flex-direction: row; align-items: center;
justify-content: flex-end; gap: 0;
}
/* hoofdmenu: item-hoogte 100px, krimpt naar 80px zodra de header sticky is.
De template heeft sticky_effects_offset = 1, zodat het krimpen pas na de
eerste pixel scroll gebeurt - net als .menufixed op het origineel. */
.pc-mainmenu .elementor-nav-menu--main { flex-wrap: nowrap; }
.pc-mainmenu .elementor-nav-menu > li > a {
color: var(--pc-text); font-family: Roboto, sans-serif; font-size: 16px;
font-weight: 300; line-height: 100px; padding: 0 10px;
white-space: nowrap; text-decoration: none;
transition: color .5s ease-out, line-height .5s ease-out;
}
.pc-mainmenu .elementor-nav-menu > li > a:hover,
.pc-mainmenu .elementor-nav-menu > li > a:focus,
.pc-mainmenu .elementor-nav-menu > li > a.elementor-item-active:hover {
color: var(--pc-green-hover);
}
.pc-header.elementor-sticky--effects .pc-mainmenu .elementor-nav-menu > li > a {
line-height: 80px;
}
.pc-mainmenu .elementor-nav-menu--dropdown {
background: var(--pc-white); box-shadow: none; border: 0;
border-radius: 0; text-align: left; min-width: 0;
}
.pc-mainmenu .elementor-nav-menu--dropdown a {
color: var(--pc-text); font-size: 15px; font-weight: 300;
line-height: 35px; padding: 4px 25px 4px 15px; white-space: nowrap;
}
.pc-mainmenu .elementor-nav-menu--dropdown a:hover {
background: var(--pc-white); color: var(--pc-green-hover);
}
/* ================================================== HEADER: mobiel ====== */
.pc-mobilebar { min-height: 80px; background: var(--pc-white); }
.pc-mobilelogocontainer { width: 200px; margin: 0 auto; }
.pc-mobilelogocontainer,
.pc-mobilelogocontainer > .e-con-inner {
display: flex; align-items: center; gap: 10px; justify-content: center;
}
.pc-mobilebar .pc-logo img,
.pc-mobilebar .pc-logo-second img { max-height: 65px; width: auto; }
.pc-mobilemenu .elementor-menu-toggle {
color: var(--pc-text); font-size: 35px; background: transparent;
}
.pc-mobilemenu .elementor-nav-menu--dropdown a {
color: var(--pc-text); font-size: 18px; font-weight: 400;
line-height: 50px; padding: 0 0 0 20px;
}
/* ================================================== FOOTER: witte blok == */
.pc-footerwhite { background: var(--pc-white); }
.pc-bomenbordertop { border-top: 1px solid var(--pc-border); }
.pc-logoboxkop .elementor-heading-title {
color: var(--pc-text); font-size: 20px; font-weight: 500;
line-height: 180%; margin: 0; padding-bottom: 0; text-align: center;
}
.pc-bomentekst,
.pc-bomentekst p {
color: var(--pc-text); font-size: 18px; font-weight: 300;
line-height: 32.4px; text-align: center; margin: 0;
}
.pc-bomentekst strong { font-weight: 400; }
/* let op: op de oude site is deze link niet gestyled (browser-blauw).
Wil je hem in de huisstijl? Vervang #0000EE door var(--pc-green). */
.pc-bomentekst a { color: #0000EE; }
.pc-bomenlink img { max-width: 225px; margin: 10px 0; }
.pc-boom img { max-width: 100%; height: auto; }
.pc-logobox-images { margin-top: 50px; }
.pc-logobox-images,
.pc-logobox-images > .e-con-inner {
display: flex; flex-direction: row;
justify-content: space-between; align-items: flex-start;
}
.pc-logobox-images .pc-partnerlogo img { max-width: 216px; height: auto; }
/* ================================================== FOOTER: groene blok = */
.pc-footergreen { background: var(--pc-green); }
.pc-footergreen-inner,
.pc-footergreen-inner > .e-con-inner {
display: flex; flex-direction: row; align-items: flex-start;
box-sizing: border-box;
}
.pc-footercol { width: 33.333%; }
.pc-footerkop .elementor-heading-title {
color: var(--pc-white); font-size: 16px; font-weight: 400;
line-height: 150%; margin: 0; padding-bottom: .4em;
}
.pc-footerkop-spaced .elementor-heading-title { padding-top: 1.5em; }
.pc-footerlist .elementor-icon-list-item,
.pc-footerlist .elementor-icon-list-item > a,
.pc-footerlist .elementor-icon-list-text {
color: var(--pc-white); font-size: 16px; font-weight: 300;
line-height: 150%; text-decoration: none;
}
.pc-footerlist .elementor-icon-list-item > a:hover { text-decoration: underline; }
.pc-footerlist .elementor-icon-list-icon svg {
fill: var(--pc-white); height: 16px; width: 16px;
}
.pc-footerlist .elementor-icon-list-item { padding-bottom: 0; margin: 0; }
.pc-climpos img { width: 225px; max-width: 230px; height: auto; }
.pc-prod-tekst p.kop {
color: #3d3d3c;
font-family: 'Roboto', sans-serif;
font-weight: 500 !important;
font-size: 24px !important;
margin: 0 !important;
line-height: 140% !important;
padding-bottom: .6em;
}
/* ------------------------------------------------------- responsive ----- */
/* Omslagpunt 1199px = identiek aan de oude site. Werkt ook als de
Elementor-breakpoints nog op de standaardwaarde 1024 staan. */
@media screen and (max-width: 1199px) {
.pc-contactbar,
.pc-mainbar { display: none !important; }
.pc-mobilebar { display: flex !important; }
}
@media screen and (min-width: 1200px) {
.pc-mobilebar { display: none !important; }
}
@media screen and (max-width: 767px) {
.pc-footergreen-inner,
.pc-footergreen-inner > .e-con-inner { flex-direction: column; }
.pc-footercol { width: 100%; }
.pc-footercol + .pc-footercol { margin-top: 30px; }
.pc-logobox-images,
.pc-logobox-images > .e-con-inner {
flex-wrap: wrap; justify-content: center; gap: 20px;
}
.pc-logobox-images .pc-partnerlogo { width: 45%; }
}
/* ================================================== winkelmand ==========
Elementor Menu Cart, teruggebracht naar de maten van het origineel:
link 38x100, icoon 18x16, teller 30x30 op top:20px / left:25px.
Het icoon is het custom icoon "fas fa-shopping-cart"; Elementor rendert
dat als inline SVG (e-fas-shopping-cart), precies dezelfde glyph als op
primecook.nl. FontAwesome-CSS is dus niet nodig.
!important is hier nodig: de widget-CSS van Elementor heeft dezelfde
specificiteit maar wordt na style.css ingeladen.
======================================================================= */
.pc-cartwrap .elementor-menu-cart__container { display: none !important; }
.pc-cartwrap .elementor-menu-cart__wrapper,
.pc-cartwrap .elementor-menu-cart__toggle_wrapper,
.pc-cartwrap .elementor-menu-cart__toggle { display: block; }
.pc-cartwrap .elementor-menu-cart__toggle_button {
position: relative !important;
display: block;
box-sizing: border-box;
width: 38px;
padding: 0 10px !important;
margin: 0;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--pc-text) !important;
line-height: 100px;
text-align: right;
text-decoration: none;
transition: line-height .5s ease-out;
}
.pc-header.elementor-sticky--effects .pc-cartwrap .elementor-menu-cart__toggle_button {
line-height: 80px;
}
/* geen subtotaal naast het icoon, net als op het origineel */
.pc-cartwrap .elementor-button-text,
.pc-cartwrap .elementor-screen-only { display: none !important; }
/* de teller hangt aan de link, niet aan het icoon */
.pc-cartwrap .elementor-button-icon { position: static !important; }
/* Het lettertype-icoon van het origineel staat op de basislijn, een SVG
wordt op het midden uitgelijnd. Dat scheelt 2px; met top:-2px staat het
icoon op exact dezelfde hoogte in de balk (41px vanaf de bovenkant). */
.pc-cartwrap svg.e-fas-shopping-cart {
width: 18px !important;
height: 16px !important;
fill: var(--pc-text) !important;
vertical-align: middle;
position: relative;
top: -2px;
}
.pc-cartwrap .elementor-button-icon-qty {
position: absolute !important;
top: 20px !important;
left: 25px !important;
right: auto !important;
width: 30px !important;
height: 30px !important;
min-width: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
background-color: var(--pc-green) !important;
color: var(--pc-white) !important;
font-family: Roboto, sans-serif !important;
font-size: 14px !important;
font-weight: 300 !important;
line-height: 30px !important;
text-align: center !important;
}
/* mobiel: balk van 80px, groter icoon, teller linksboven */
.pc-cartwrap-mobile .elementor-menu-cart__toggle_button {
width: auto;
line-height: normal;
text-align: center;
}
.pc-cartwrap-mobile svg.e-fas-shopping-cart {
width: 23px !important;
height: 20px !important;
}
.pc-cartwrap-mobile .elementor-button-icon-qty {
top: -20px !important;
left: 15px !important;
}
/* ==================================================== correcties =========
Puntsgewijs nagemeten tegen primecook.nl op 30-07-2026.
======================================================================= */
/* 1. Tekst oogde dunner dan op het origineel. De letterdikte is identiek
(Roboto 300), maar Hello Elementor zet -webkit-font-smoothing op
antialiased; het origineel laat hem op auto staan. Op macOS scheelt dat
zichtbaar in dikte. */
.pc-header,
.pc-footer,
.pc-header *,
.pc-footer * {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
/* 2. De hover-popup van WebwinkelKeur in de contactbar viel achter het
hoofdmenu. De contactbar krijgt daarom een hogere stapelvolgorde dan de
dropdown van het menu. */
.pc-contactbar { position: relative; z-index: 200; }
.pc-mainbar { position: relative; z-index: 100; }
.pc-mainmenu .elementor-nav-menu--dropdown { z-index: 90; }
/* 3. Het actieve item (Home op de homepage) kreeg geen hover-kleur, omdat
Elementor de kleur van .elementor-item-active met hogere specificiteit
zet. */
.pc-mainmenu .elementor-nav-menu > li > a:hover,
.pc-mainmenu .elementor-nav-menu > li > a:focus,
.pc-mainmenu .elementor-nav-menu > li > a.elementor-item-active:hover,
.pc-mainmenu .elementor-nav-menu > li > a.elementor-item-active:focus,
.pc-mainmenu .elementor-nav-menu > li:hover > a.elementor-item-active {
color: var(--pc-green-hover) !important;
}
/* 4 + 5. De pijltjes van de dropdowns waren ~12x12; op het origineel is de
glyph even groot als de tekst: 16x16. En ze sprongen direct van kleur,
terwijl de tekst 0,5s overvloeit. */
.pc-mainmenu .elementor-nav-menu > li > a .sub-arrow,
.pc-mainmenu .elementor-nav-menu > li > a .sub-arrow i,
.pc-mainmenu .elementor-nav-menu > li > a .sub-arrow svg {
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
}
.pc-mainmenu .elementor-nav-menu > li > a .sub-arrow svg {
fill: currentColor;
transition: fill .5s ease-out;
}
.pc-mainmenu .elementor-nav-menu > li > a .sub-arrow,
.pc-mainmenu .elementor-nav-menu > li > a .sub-arrow i {
color: inherit;
transition: color .5s ease-out;
}
/* 6. Onder de partnerlogo's hoort 10px lucht. Op het origineel ontstaat die
doordat de 39px
breed, maar dat is de advance-box van de letter; de getekende glyph is
30,8px. Zetten we die 39px op de SVG, dan wordt hij 27% uitgerekt.
Nagemeten op canvas: beide glyphs zijn identiek - inktvlak 30,8 x 26,5px,
drie balken van ~4,5px met een steek van 11px. */
.pc-mobilemenu .elementor-menu-toggle i,
.pc-mobilemenu .elementor-menu-toggle svg {
font-size: 35px;
width: auto;
height: 35px;
fill: var(--pc-text);
color: var(--pc-text);
}
/* ======================================== mobiel: uitschuifmenu ========== */
/* Het origineel schuift een vast paneel van 330px vanaf links in, onder de
balk van 80px. Elementor klapt standaard een blok onder de knop uit; met
onderstaande regels krijgt het dezelfde vorm en beweging. */
.pc-mobilemenu .elementor-nav-menu--dropdown {
display: block !important;
position: fixed !important;
top: 80px !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: 330px !important;
max-width: 330px !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
overflow-y: auto;
background: var(--pc-white) !important;
border: 0 !important;
border-radius: 0 !important;
z-index: 10000 !important;
transform: translateX(-100%);
transition: transform .5s ease-out;
box-shadow: none;
}
.pc-mobilemenu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
.pc-mobilemenu .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown {
transform: translateX(0);
box-shadow: rgba(0, 0, 0, .15) 10px 20px 20px;
}
.pc-mobilemenu .elementor-nav-menu--dropdown > ul { margin-top: 20px; padding: 0; }
/* submenu's staan op het origineel altijd open */
.pc-mobilemenu .elementor-nav-menu--dropdown .sub-menu {
display: block !important;
position: static !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
.pc-mobilemenu .elementor-nav-menu--dropdown > ul > li > a {
font-size: 18px;
font-weight: 400;
line-height: 50px;
padding: 0 0 0 20px;
color: var(--pc-text);
}
.pc-mobilemenu .elementor-nav-menu--dropdown .sub-menu > li > a {
font-size: 16px;
font-weight: 400;
line-height: 35px;
padding: 0 0 0 20px;
color: var(--pc-text);
}
/* actief item houdt de gewone tekstkleur; alleen hover kleurt groen */
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-item,
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
background: transparent !important;
color: var(--pc-text) !important;
}
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-item:hover,
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-item:focus {
background: transparent !important;
color: var(--pc-green-hover) !important;
}
/* ---- mobiel: logo en hamburger, nagemeten -------------------------------- */
/* Op het origineel is het logoblok altijd 200px breed (logo 139 + 10 gap +
badge 51), waardoor het logo 51px hoog uitkomt. Wij begrenzen op hoogte,
dat geeft exact hetzelfde resultaat op elke schermbreedte. */
.pc-mobilebar .pc-logo img,
.pc-mobilebar .pc-logo-second img { max-height: 51px !important; }
/* De hamburger is als widget-instelling op "fas fa-bars" gezet
(toggle_icon_normal en toggle_icon_active), gelijk aan het origineel.
Het icoon blijft daardoor ook bij een open menu een hamburger. */
/* paneel begint onder de balk; met de WP-adminbalk erbij schuift het mee */
.pc-mobilemenu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
.pc-mobilemenu .elementor-nav-menu--dropdown {
top: calc(80px + var(--wp-admin--admin-bar--height, 0px)) !important;
}
/* ---- mobiel: submenu's in de kolom houden ------------------------------- */
/* SmartMenus schuift submenu's standaard opzij (left:-315px). In het paneel
moeten ze gewoon onder hun bovenliggende item staan. */
.pc-mobilemenu .elementor-nav-menu--dropdown .sub-menu,
.pc-mobilemenu .elementor-nav-menu--dropdown ul.sub-menu {
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
min-width: 0 !important;
}
.pc-mobilemenu .elementor-nav-menu--dropdown .sub-menu > li > a,
.pc-mobilemenu .elementor-nav-menu--dropdown .sub-menu > li > a.elementor-sub-item {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 35px !important;
padding: 0 0 0 20px !important;
}
/* ---- pijltjes dropdown: exacte maat -------------------------------------
Op het origineel is het pijltje een FontAwesome-glyph van 16px: de em-box
is 16px hoog en 14px breed (viewBox 448/512). Elementor tekent dezelfde
glyph als SVG maar schaalt hem kleiner, dus zetten we de maat vast.
------------------------------------------------------------------------ */
.pc-mainmenu .elementor-nav-menu .sub-arrow {
width: 14px !important;
display: flex;
align-items: center;
justify-content: center;
}
/* de SVG is een flex-item en werd platgedrukt tot 4px; flex:none houdt hem
op de maat van de originele glyph (14x16) */
.pc-mainmenu .elementor-nav-menu .sub-arrow svg {
flex: 0 0 auto !important;
width: 14px !important;
height: 16px !important;
max-width: none !important;
fill: currentColor;
transition: fill .5s ease-out;
}
/* ---- winkelmandteller volgt de balk ------------------------------------
Op het origineel schuift de teller mee terwijl de balk van 100px naar 80px
krimpt: top gaat van 20px naar 10px met dezelfde overgang van 0,5s. De
afstand tussen icoon en teller blijft daardoor constant (15 / -21).
Stond die top vast, dan sprong de teller tijdens het scrollen.
------------------------------------------------------------------------ */
.pc-cartwrap .elementor-button-icon-qty {
transition: top .5s ease-out;
}
/* =============================== mobiele correcties, ronde 2 ============
Nagemeten tegen primecook.nl bij 516px.
======================================================================= */
/* 1. Het paneel moet horizontaal inschuiven. Elementor animeert de dropdown
zelf met scaleY(0) -> scaleY(1); die transform wint van de onze. Met
!important nemen we hem over en houden we de beweging van het origineel
aan: transition: left .5s ease-out (bij ons via transform, dat is
vloeiender omdat het geen layout herberekent). */
.pc-mobilemenu .elementor-nav-menu--dropdown {
transform: translateX(-100%) !important;
transition: transform .5s ease-out !important;
}
.pc-mobilemenu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
.pc-mobilemenu .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown {
transform: translateX(0) !important;
}
/* 2. Het paneel viel achter het logo. De cel .pc-mob-left is een eigen
stapelcontext (position:relative + z-index:1000); de z-index van 10000
op het paneel telt alleen bínnen die cel. Het logoblok heeft dezelfde
z-index en staat later in de DOM, dus dat won. De cel zelf moet omhoog. */
.pc-mob-left { position: relative; z-index: 10001 !important; }
/* 3. Menu-items: rechts geen padding, net als op het origineel (0 0 0 20px). */
.pc-mobilemenu .elementor-nav-menu--dropdown > ul > li > a {
padding: 0 0 0 20px !important;
}
/* 4. Afbeeldingen in het witte footerblok. Het origineel zet ze onder 770px
allemaal op width:95% / max-width:150px / margin:5% en zet de rij met
partnerlogo's terug van flex naar block, waardoor ze in twee rijen van
twee vallen. */
@media only screen and (max-width: 770px) {
/* De maten staan op de widget, niet op de en geen padding. */
.pc-sec,
.pc-reviews-houder { padding: 0 !important; }
/* ==== PRIMECOOK KELLY EINDE ==== */
/* ==== PRIMECOOK PFAS START ==== */
/* Het origineel centreert de tekst in deze rij (de kop is al gecentreerd via
.subkop, de alinea's krijgen het van de rij mee). */
.pc-row--midden,
.pc-row--midden .pc-tekst,
.pc-row--midden .pc-tekst p { text-align: center; }
/* .brochurebutton is content-box: width:250px plus 2x16px padding en 1px rand
maakt 284x54. Zonder dit bleef de knop op 250x43 staan. */
.pc-knop .elementor-button {
box-sizing: content-box;
width: 250px;
line-height: 180%;
}
/* ==== PRIMECOOK PFAS EINDE ==== */
/* ==== PRIMECOOK TEGELS START ==== */
/* De 20px standaardgap van Elementor maakte de stap tussen tegels 281px in plaats
van 261px, waardoor er maar drie per rij pasten in plaats van vier. */
.pc-tegels { gap: 0 !important; }
/* .webshopmainwrap heeft op het origineel padding:5px met border-box. Daardoor
rekenen de tegels tegen 1039.9px in plaats van 1050px en schuift de sliert 5px
naar binnen. Zonder die 5px was de stap 262 in plaats van 260px. */
.pc-tegels { padding: 5px !important; box-sizing: border-box; }
.pc-tegel { width: calc(23% - 0.5px); }
/* .webshop-tile-head erft de .tekst-maat: 18px met regelhoogte 180%, geen
bovenmarge - de kop sluit direct op de afbeelding aan. */
.pc-tegelkop { min-height: 60px; padding-top: 0; }
.pc-tegelkop .elementor-heading-title {
font-weight: 300;
font-size: 18px;
line-height: 180%;
text-align: center;
color: var(--pc-text);
}
/* ==== PRIMECOOK TEGELS EINDE ==== */
/* ==== PRIMECOOK TEGELLINKS START ==== */
/* Elementor rendert de containerlink in deze versie niet, dus de link zit op de
afbeelding en de kop. Met een uitgerekte ::after is - net als op het origineel,
waar een onclick op de tegel staat - de hele tegel klikbaar. */
.pc-tegel,
.pc-groep { position: relative; }
.pc-tegel .pc-tegel-beeld a::after,
.pc-groep .pc-groepkop a::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.pc-tegelkop a,
.pc-groepkop a { color: inherit; text-decoration: none; }
/* Elementor zet position:relative op elke widget en container. De uitgerekte
::after bleef daardoor binnen de afbeeldingswidget hangen in plaats van tot de
tegel te reiken. De tussenlagen gaan hier terug naar static. */
.pc-tegel .pc-tegel-beeld,
.pc-tegel .elementor-widget-image,
.pc-groep .elementor-widget-heading { position: static; }
/* De link om de tegelafbeelding is een inline-block dat naar zijn inhoud krimpt.
Een img met width:100% daarbinnen rekent tegen die link, waarvan de breedte weer
van de inhoud afhangt - dat lost de browser op als 0. Vandaar display:block. */
.pc-tegel .pc-tegel-beeld a,
.pc-tegel .elementor-widget-image a {
display: block;
width: 100%;
}
/* ==== PRIMECOOK TEGELLINKS EINDE ==== */
/* ==== PRIMECOOK GROEPEN START ==== */
/* Het origineel stapelt deze vier tegels met floats: links een hoge tegel van 60%,
rechts twee van 38% onder elkaar, daaronder een volle rij. Met flex kwamen de
rechterkolom-tegels op een nieuwe regel terecht, dus hier dezelfde floats. */
.pc-groepen {
display: block;
padding: 0 !important;
}
.pc-groepen::after { content: ''; display: block; clear: both; }
.pc-groep--pannen { float: left; width: 60%; height: 520px; margin: 0; order: initial; align-self: auto; }
.pc-groep--personalisatie { float: right; width: 38%; height: 250px; margin: 0 0 2%; order: initial; align-self: auto; }
.pc-groep--accessoires { float: right; width: 38%; height: 250px; margin: 0; order: initial; align-self: auto; }
.pc-groep--messen { float: left; width: 100%; height: 250px; margin: 20px 0 0; order: initial; align-self: auto; }
@media only screen and (max-width: 991px) {
.pc-groep--pannen { width: 50%; }
.pc-groep--personalisatie, .pc-groep--accessoires { width: 48%; }
}
@media only screen and (max-width: 580px) {
.pc-groep--pannen,
.pc-groep--personalisatie,
.pc-groep--accessoires {
float: none !important;
width: 100% !important;
height: 250px !important;
margin: 10px 0 !important;
}
}
/* ==== PRIMECOOK GROEPEN EINDE ==== */
/* ==== PRIMECOOK NIEUWSBLOK START ==== */
/* Elementor rendert de Loop Grid als CSS-grid; onze breedte van 28% rekende dan
tegen de gridtrack in plaats van tegen de rij, waardoor de tegels tot een paar
tientallen pixels inklapten. Het origineel gebruikt floats
(.qs_blog_item_latestitems: width 28%, margin 1%, float left), dus dat doen we
hier ook. */
.pc-nieuws .elementor-loop-container {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
}
.pc-nieuws .elementor-loop-container::after { content: ''; display: block; clear: both; }
.pc-nieuwsitem {
float: left;
width: 28%;
margin: 1%;
min-height: 498px;
border: 1px solid #eee;
box-sizing: border-box;
padding: 0 !important;
gap: 0 !important;
display: block;
}
.pc-nieuwsbeeld { padding: 0 !important; }
.pc-nieuwsitem img { display: block; width: 100%; min-height: 180px; object-fit: cover; }
@media only screen and (max-width: 991px) {
.pc-nieuwsitem { width: 47%; min-height: 605px; }
}
@media only screen and (max-width: 770px) {
.pc-nieuwsitem { float: none; width: 100%; margin: 10px auto; max-width: 400px !important; min-height: 0; }
.pc-nieuwsinhoud { min-height: 0; }
}
/* ==== PRIMECOOK NIEUWSBLOK EINDE ==== */
/* ==== PRIMECOOK NIEUWSKOP START ==== */
/* Deze sectiekop is op het origineel geen .subkop maar een h2 met margin 15px 0
en een span.kop erin (24px met regelhoogte 140%). Daardoor staat hij 15px lager
en is het blok 34px hoog in plaats van 58px. */
.pc-sectiekop-nieuws { margin: 15px 0 0; padding-bottom: 14px; }
.pc-sectiekop-nieuws .elementor-heading-title {
line-height: 140%;
padding-bottom: 0;
}
/* ==== PRIMECOOK NIEUWSKOP EINDE ==== */
/* ==== PRIMECOOK NIEUWS EXTRA START ==== */
/* De readmore-balk sluit op het origineel aan op de onderrand van de tegel; met
min-height 498px bleef er bij korte tegels wit onder de knop staan. */
.pc-nieuwsitem { display: flex; flex-direction: column; }
.pc-nieuwsknop { margin-top: auto; }
/* Het "Made in Italy"-blok: de eerste regel staat gecentreerd, de alinea links. */
/* De eerste regel is op het origineel geen alinea maar een .subkop: 24px met
regelhoogte 180%, gewicht 500 en gecentreerd. De link erin houdt zijn
onderstreping maar erft de maat, anders zou .pc-tekst a hem op 18px zetten. */
.pc-madeinitaly p { text-align: left; }
.pc-madeinitaly p:first-child {
color: var(--pc-text);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 24px;
margin: 0;
line-height: 180%;
padding-bottom: .6em;
text-align: center;
}
.pc-madeinitaly p:first-child a {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-decoration: underline;
}
/* ==== PRIMECOOK NIEUWS EXTRA EINDE ==== */
/* ==== PRIMECOOK REVIEWVIDEO START ==== */
/* Alleen zijpadding, zodat de percentages van de videowidget tegen 1050px rekenen
net als de kolom op het origineel. */
.pc-row--pad-zijkant { padding: 0 1% !important; }
/* .youtubeIframe is 98% van de kolom (1008px) met padding-top 56% voor de
verhouding; de 4% onderruimte komt van de kolom. Samen: 96% van 1050 = 1008. */
.pc-video {
width: 96% !important;
margin: 0 auto;
padding-bottom: 4%;
}
/* ==== PRIMECOOK REVIEWVIDEO EINDE ==== */
/* ==== PRIMECOOK REVIEWS MAAT START ==== */
/* Maten uit de carrouselcontext van het origineel: kaart 1021x196 (hoogte 175 plus
19px padding boven, geen zijpadding), tekst 18px/180% gewicht 300 in Roboto en
auteur en datum beide 14px vet. De pluginwaarden (14px Arial) gelden alleen
buiten de carrousel. */
.pc-reviews-slider { width: 97.25%; height: 196px; }
.pc-review { padding: 19px 0 0; }
.pc-review-profiel { width: 10%; padding: 10px; }
.pc-review-inhoud { width: 90%; }
.pc-review-auteur p,
.pc-review-datum p {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 180%;
}
.pc-review-tekst,
.pc-review-tekst p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 180%;
color: var(--pc-text);
}
.pc-review-tekst p:not(.pc-review-bron) { -webkit-line-clamp: 3; }
/* Het Google-icoon staat grijs en inline achter de tekst. */
.pc-review-g { display: inline-block; vertical-align: -2px; margin-left: 4px; color: #aaa; }
.pc-review-link:hover .pc-review-g { color: var(--pc-green); }
.pc-review-link { font-family: 'Roboto', sans-serif; font-size: 18px; }
/* ==== PRIMECOOK REVIEWS MAAT EINDE ==== */
/* ==== PRIMECOOK MOBIEL SLUITSTUK START ==== */
/* Dit blok staat bewust als laatste in het bestand. De losse blokken die er
hierboven zijn bijgekomen herdeclareren .pc-tegel en .pc-nieuwsitem buiten een
media query, en overschreven daarmee de mobiele regels die eerder al stonden.
Gemeten bij 516px tegen het origineel. */
@media only screen and (max-width: 770px) {
/* Origineel: .homepagebanner min-height 300px; alleen de overlay houdt 340. */
.pc-hero { min-height: 300px; }
/* Origineel: tegel 402px breed, gecentreerd (max-width 400 + marge auto). */
.pc-nieuwsitem {
float: none;
width: 100%;
max-width: 400px !important;
margin: 10px auto;
min-height: 0;
}
.pc-nieuwsinhoud { min-height: 0; }
}
@media only screen and (max-width: 580px) {
/* Origineel: tegel 456x315 op volle breedte, met de afbeelding als 80px
miniatuur links ernaast. */
.pc-tegel {
width: 98%;
margin: 0 auto 3%;
}
.pc-tegel-beeld {
width: 80px;
height: 60px;
float: left;
overflow: visible;
}
.pc-tegel img { width: 100%; height: auto; max-height: 60px; object-fit: contain; }
.pc-tegelkop { min-height: 0; }
/* De nieuwskop is op het origineel geen .subkop en blijft dus 24px. */
.pc-sectiekop-nieuws .elementor-heading-title { font-size: 24px; }
}
/* ==== PRIMECOOK MOBIEL SLUITSTUK EINDE ==== */
/* ==== PRIMECOOK CONTACT START ==== */
/* rij met drie showroomfoto's */
.pc-fotos { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 !important; margin-top: 20px; gap: 0 !important; }
.pc-foto { width: 32%; padding: 0 !important; gap: 0 !important; }
.pc-foto img { width: 95%; display: block; margin: 0 auto; border-radius: 5px; }
@media only screen and (max-width: 767px) { .pc-fotos { justify-content: center; } .pc-foto { width: 100%; max-width: 360px; margin: 0 auto 4%; } }
/* twee kolommen: formulier (66%) + contactgegevens (34%) */
.pc-contact-links { width: 66%; box-sizing: border-box; padding: 0 4% 0 0 !important; gap: 0 !important; }
.pc-contact-rechts { width: 34%; box-sizing: border-box; padding: 0 !important; gap: 0 !important; }
@media only screen and (max-width: 770px) {
.pc-contact-links, .pc-contact-rechts { width: 100%; padding: 0 !important; }
.pc-contact-rechts { margin-top: 30px; }
}
/* contactgegevens tekst iets compacter */
.pc-contact-rechts .pc-tekst p { padding-bottom: .8em; }
/* Elementor Pro formulier in Primecook-stijl */
.pc-form .elementor-form .elementor-field-group { margin-bottom: 12px; }
.pc-form .elementor-field-group > label,
.pc-form .elementor-field-label { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 18px; line-height: 180%; color: var(--pc-text); margin-bottom: 2px; }
.pc-form .elementor-field-textual { border: 1px solid #c2cad8; border-radius: 4px; font-family: 'Roboto', sans-serif; font-size: 18px; color: var(--pc-text); background: #fff; padding: 8px 10px; height: 46px; box-sizing: border-box; width: 100%; }
.pc-form textarea.elementor-field-textual { height: 144px; }
.pc-form .elementor-field-textual:focus { border-color: var(--pc-green); outline: none; }
.pc-form .e-form__buttons { justify-content: flex-start; }
.pc-form .elementor-button { background-color: var(--pc-green); border: 1px solid var(--pc-green); color: var(--pc-white); font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; line-height: normal; border-radius: 3px; padding: 8px 14px; width: auto !important; flex: 0 0 auto !important; align-self: flex-start; }
.pc-form .elementor-button:hover { background-color: var(--pc-green-hover); border-color: var(--pc-green-hover); }
/* ==== PRIMECOOK CONTACT EINDE ==== */
/* ==== PRIMECOOK CATEGORIE START ==== */
/* kruimelpad: alleen "» Naam", zoals het origineel */
.pc-cat-kruimels-tekst { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; color: var(--pc-text); margin: 0 0 6px; text-align: left; }
.pc-kruimel-pijl { margin-right: 4px; }
/* H1 blijft in de DOM voor SEO maar is visueel verborgen, net als op het origineel */
.pc-cat-h1-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* beschrijving: gecentreerd, banner zonder ronding */
.pc-cat-desc-inner { text-align: center; }
.pc-cat-desc-inner p, .pc-cat-desc-inner li { font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 300; line-height: 180%; color: var(--pc-text); margin: 0 0 .8em; }
.pc-cat-desc-inner h1, .pc-cat-desc-inner h2, .pc-cat-desc-inner .pc-cat-kop { font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 500; line-height: 180%; color: var(--pc-text); text-align: center; margin: 0 0 .4em; position: static; width: auto; height: auto; clip: auto; }
.pc-cat-desc-inner img, .pc-cat-desc-inner .pc-cat-banner { display: block; width: 100%; height: auto; border-radius: 0; margin: 0 0 18px; }
.pc-cat-desc-inner a { color: inherit; text-decoration: underline; }
.pc-cat-desc-inner a:hover { color: var(--pc-green); }
.pc-cat-desc-inner ul { display: inline-block; text-align: left; padding-left: 1.2em; }
.pc-cat-desc-inner .pc-cat-knop { display: inline-block; background: var(--pc-green); color: var(--pc-white); border-radius: 3px; padding: 2px 16px; margin: 4px 6px; font-size: 16px; line-height: 34px; text-decoration: none; }
.pc-cat-desc-inner .pc-cat-knop:hover { background: var(--pc-green-hover); color: var(--pc-white); }
/* topbar */
.pc-cat-barrij { padding: 0 1% !important; }
.pc-catbar { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.pc-catbar-sort label { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; color: var(--pc-text); }
.pc-catbar-select { font-family: 'Roboto', sans-serif; font-size: 14px; height: 32px; min-width: 143px; border: 1px solid #c2cad8; border-radius: 4px; background: #fff; color: var(--pc-text); padding: 2px 6px; }
.pc-catbar-aantal { font-family: 'Roboto', sans-serif; font-size: 12px; color: var(--pc-text); margin: 6px 0 0; }
/* productgrid 1:1: 4 kolommen, 21px tussenruimte, kaart 239x560 */
.pc-kaarten { display: flex; flex-wrap: wrap; gap: 21px; align-items: stretch; }
.pc-kaarten .pc-kaart { width: calc( (100% - 63px) / 4 ); box-sizing: border-box; border: 1px solid #eee; border-radius: 4px; background: var(--pc-white); padding: 18px !important; text-align: left; display: flex; flex-direction: column; transition: box-shadow .2s ease-out; }
.pc-kaarten .pc-kaart:hover { box-shadow: 0 0 2px #4B515D; }
.pc-kaart-beeld { display: block; margin-bottom: 20px; }
.pc-kaart-beeld img { display: block; width: 100%; height: auto; }
.pc-kaart-naam { min-height: 120px; margin: 0 0 8px; }
.pc-kaart-naam a { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; line-height: 150%; color: var(--pc-text); text-decoration: none; }
.pc-kaart-prijs { margin: auto 0 10px; font-family: 'Roboto', sans-serif; }
.pc-kaart-prijs .woocommerce-Price-amount, .pc-kaart-prijs bdi { color: var(--pc-green) !important; font-size: 21px; font-weight: 500; }
.pc-kaart-prijs del { opacity: .6; }
.pc-kaart-prijs del .woocommerce-Price-amount, .pc-kaart-prijs del bdi { color: #888 !important; font-size: 16px; }
.pc-kaart-btw { font-size: 11px; font-style: italic; color: var(--pc-text); }
.pc-kaart-knop { margin: 0; }
.pc-kaart-knop a { display: block; background: var(--pc-green); color: var(--pc-white); font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; text-align: center; text-decoration: none; border-radius: 3px; padding: 9px 10px; }
.pc-kaart-knop a:hover { background: var(--pc-green-hover); color: var(--pc-white); }
.pc-kaart-kar { margin-left: 6px; }
/* paginatie */
.pc-cat-paginatie { margin-top: 24px; text-align: right; }
.pc-cat-paginatie .page-numbers { display: inline-block; min-width: 40px; height: 39px; line-height: 37px; text-align: center; border: 1px solid #c2cad8; border-radius: 3px; margin-left: 6px; color: var(--pc-text); text-decoration: none; font-size: 16px; }
.pc-cat-paginatie .page-numbers.current { background: #59667E; border-color: #59667E; color: var(--pc-white); }
.pc-cat-paginatie a.page-numbers:hover { background: var(--pc-green); border-color: var(--pc-green); color: var(--pc-white); }
/* onderste blok */
.pc-sec--catonder { width: 100%; padding: 0 !important; }
.pc-cat-video iframe { width: 100%; aspect-ratio: 1.75; height: auto; display: block; }
@media only screen and (max-width: 991px) { .pc-kaarten .pc-kaart { width: calc( (100% - 28px) / 3 ); } .pc-kaarten { gap: 14px; } }
@media only screen and (max-width: 770px) { .pc-kaarten .pc-kaart { width: calc( (100% - 14px) / 2 ); } }
@media only screen and (max-width: 580px) { .pc-kaarten .pc-kaart { width: 100%; } .pc-catbar { align-items: stretch; } .pc-cat-desc-inner h2 { font-size: 20px; } }
/* ==== PRIMECOOK CATEGORIE EINDE ==== */
/* ==== PRIMECOOK KAART START ==== */
/* 1:1 met primecook.nl .productitem (gemeten 3-8-2026, viewport 1400) */
.pc-kaarten { display: flex; flex-wrap: wrap; gap: 0 !important; margin: 0 -10px; padding: 0; }
.pc-kaart { flex: 0 0 239px !important; width: 239px !important; max-width: 239px; box-sizing: border-box; min-height: 560px; margin: 10px; padding: 18px; border: 1px solid #eeeeee; border-radius: 4px; background: #fff; display: block; }
/* foto 201x201 met 20px marge eronder */
.pc-kaart-beeld { display: block; width: 201px; height: 201px; margin: 0 0 20px; overflow: hidden; }
.pc-kaart-beeld img { width: 201px; height: 201px; object-fit: contain; display: block; margin: 0; }
/* productnaam: 17px/500, vaste hoogte 170px zodat alle kaarten 560px zijn */
.pc-kaart-naam { min-height: 170px; margin: 0 0 10px !important; padding: 0; font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 500; line-height: 25.5px; color: var(--pc-text); }
.pc-kaart-naam a { color: var(--pc-text); text-decoration: none; }
.pc-kaart-naam a:hover { color: var(--pc-green); }
/* prijs: 21px/500 in Primecook-groen, "incl. BTW" 11px/300 */
.pc-kaart-prijs { margin: 0 0 10px !important; padding: 0; font-family: 'Roboto', sans-serif; font-size: 21px; font-weight: 500; line-height: 31.5px; color: var(--pc-green); }
.pc-kaart-prijs .screen-reader-text { display: none !important; }
.pc-kaart-prijs del { color: #9b9b9b; font-size: 16px; font-weight: 400; margin-right: 5px; text-decoration: line-through; }
.pc-kaart-prijs ins { text-decoration: none; color: var(--pc-green); }
.pc-kaart-prijs .woocommerce-Price-currencySymbol { font-weight: 500; }
.pc-kaart-btw { font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 300; line-height: 16.5px; color: var(--pc-text); }
/* knop: blok van 170x40 (201 - 2x15,6 marge), 14px, geen radius, icoon rechts van de tekst */
.pc-kaart-knop { height: 40px; margin: 0 !important; padding: 0; }
.pc-kaart-knop a { display: block; box-sizing: border-box; height: 40px; margin: 0 15px; padding: 10px 35px 10px 15px; background-color: var(--pc-green); color: #fff; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; line-height: normal; text-align: center; text-decoration: none; border: 0; border-radius: 0; white-space: nowrap; }
.pc-kaart-knop a:hover { background-color: var(--pc-green-hover); color: #fff; }
.pc-kaart-kar { display: inline-block; width: 16px; margin-left: 6px; font-size: 14px; line-height: 1; }
/* responsive 1:1 met het origineel: boven 990px vier kolommen (vloeiend),
daaronder meteen een kolom over de volle breedte. Gemeten op primecook.nl:
1000px = 4 kolommen a 206px, 990px = 1 kolom. */
@media only screen and (max-width: 1100px) {
.pc-kaart { flex: 0 0 calc(25% - 20px) !important; width: calc(25% - 20px) !important; max-width: none; }
.pc-kaart-beeld { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pc-kaart-beeld img { width: 100%; height: 100%; }
}
@media only screen and (max-width: 990px) {
.pc-kaarten { margin: 0; }
.pc-kaart { flex: 0 0 100% !important; width: 100% !important; max-width: none; margin: 10px 0; min-height: 560px; }
/* foto en knop staan op mobiel gecentreerd, de tekst blijft links */
.pc-kaart-beeld { width: 200px; height: 200px; margin: 0 auto 20px; aspect-ratio: auto; }
.pc-kaart-beeld img { width: 200px; height: 200px; }
.pc-kaart-naam { min-height: 170px; }
.pc-kaart-knop a { width: 170px; margin: 0 auto; }
}
/* ==== PRIMECOOK KAART EINDE ==== */
/* ==== PRIMECOOK PRODUCT START ==== */
/* 1:1 met primecook.nl (gemeten 3-8-2026): inhoud 1070, infobox 449 */
.pc-sec--prod { max-width: var(--pc-content); margin: 0 auto; padding: 0 5px 40px; }
.pc-prod-kruimels { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; line-height: 24px; color: var(--pc-text); margin: 0 0 20px !important; }
.pc-prod-kruimels a { color: var(--pc-text); text-decoration: none; }
.pc-prod-kruimels a:hover { color: var(--pc-green); }
.pc-kruimel-pijl { color: var(--pc-green); }
/* twee kolommen */
.pc-prod-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.pc-prod-galerij { width: 600px; flex: 0 0 600px; }
.pc-prod-info { width: 449px; flex: 0 0 449px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; line-height: 24px; color: var(--pc-text); }
/* galerij: hoofdbeeld 471x471 met pijlen, daaronder thumbs van 78 */
.pc-prod-beeld { position: relative; width: 471px; height: 471px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
.pc-prod-beeld img { max-width: 471px; max-height: 471px; width: auto; height: auto; display: block; }
.pc-prod-pijl { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 34px; line-height: 1; color: #9b9b9b; cursor: pointer; padding: 0 6px; }
.pc-prod-pijl:hover { color: var(--pc-green); }
.pc-prod-vorige { left: -6px; }
.pc-prod-volgende { right: -6px; }
.pc-prod-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pc-prod-thumb { width: 78px; height: 78px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; }
.pc-prod-thumb.is-actief { border-color: var(--pc-border); }
.pc-prod-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* infobox */
.pc-prod-kop { font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 700; line-height: 33.6px; color: var(--pc-text); margin: 16px 0 0 !important; padding: 0; }
.pc-prod-nummer { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--pc-text); margin: 0 0 10px !important; }
.pc-prod-tekst { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--pc-text); }
.pc-prod-tekst p { margin: 0 0 1em; }
.pc-prod-tekst ul { margin: 0 0 1em; padding-left: 20px; list-style: disc; }
.pc-prod-tekst li { margin: 0; }
.pc-prod-tekst a { color: var(--pc-green); }
.pc-prod-maat { margin: 10px 0 20px; }
.pc-prod-select { width: 449px; max-width: 100%; height: 32px; padding: 6px 12px; font-family: 'Roboto', sans-serif; font-size: 14px; color: #555555; border: 1px solid #c2cad8; border-radius: 4px; background-color: #fff; }
.pc-prod-prijs { font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 500; line-height: 45px; color: var(--pc-green); margin: 20px 0 15px !important; }
.pc-prod-prijs del { color: #9b9b9b; font-size: 21px; font-weight: 400; margin-right: 6px; }
.pc-prod-prijs ins { text-decoration: none; color: var(--pc-green); }
.pc-prod-btw { font-size: 11px; font-weight: 300; color: var(--pc-text); }
.pc-prod-bestel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-prod-aantal { width: 90px; height: 40px; padding: 6px 10px; font-size: 16px; color: var(--pc-text); border: 1px solid #c2cad8; border-radius: 4px; background: #fff; }
.pc-prod-knop { height: 38px; padding: 10px 15px; background-color: var(--pc-green); color: #fff; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; line-height: 1; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; }
.pc-prod-knop:hover { background-color: var(--pc-green-hover); }
.pc-prod-kar { margin-right: 4px; }
.pc-prod-nietopvoorraad { color: #b23c3c; font-size: 16px; }
/* onderliggende blokken */
.pc-prod-blok { margin-top: 40px; }
.pc-prod-subkop { font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 500; line-height: 43.2px; color: var(--pc-text); margin: 0 0 10px !important; padding: 0; }
.pc-prod-lang { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--pc-text); border-top: 1px solid var(--pc-border); padding-top: 20px; }
.pc-prod-lang h2 { font-size: 16px; font-weight: 700; line-height: 24px; margin: 0 0 10px; }
.pc-prod-lang h3 { font-size: 16px; font-weight: 700; line-height: 24px; margin: 20px 0 10px; }
.pc-prod-lang p { margin: 0 0 1em; }
.pc-prod-lang ul { margin: 0 0 1em; padding-left: 20px; list-style: disc; }
.pc-prod-lang a { color: var(--pc-green); }
.pc-prod-specs { width: 100%; border-collapse: collapse; font-size: 16px; font-weight: 300; color: var(--pc-text); }
.pc-prod-specs td { border: 1px solid var(--pc-border); padding: 10px 14px; }
.pc-prod-specs td:first-child { width: 395px; }
/* gerelateerde producten gebruiken de kaart uit de categorie */
.pc-w-gerelateerd .pc-kaarten { margin: 0 -10px; }
/* ---- responsive, gelijk aan het origineel: onder 990px een kolom ---- */
@media only screen and (max-width: 1100px) {
.pc-prod-galerij { width: 55%; flex: 0 0 55%; }
.pc-prod-info { width: 42%; flex: 0 0 42%; }
.pc-prod-beeld { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pc-prod-beeld img { max-width: 100%; max-height: 100%; }
.pc-prod-select { width: 100%; }
}
@media only screen and (max-width: 990px) {
.pc-prod-top { flex-direction: column; gap: 0; }
.pc-prod-galerij, .pc-prod-info { width: 100%; flex: 0 0 100%; }
.pc-prod-beeld { max-width: 471px; margin: 0 auto 20px; }
.pc-prod-kop { margin-top: 20px !important; }
.pc-prod-specs td:first-child { width: 45%; }
.pc-prod-bestel { justify-content: flex-start; }
}
@media only screen and (max-width: 520px) {
.pc-prod-thumb { width: 64px; height: 64px; }
.pc-prod-knop { flex: 1; }
}
/* ==== PRIMECOOK PRODUCT EINDE ==== */
/* ==== PRIMECOOK PRODUCT FIX START ==== */
.pc-prod-kruimels, .pc-prod-top, .pc-prod-blok { max-width: 1070px; margin-left: auto; margin-right: auto; }
.pc-prod-bestel { max-width: 449px; }
/* aantalveld: 90x40, 16px, #555, rand #c2cad8, radius 4, padding 6px 12px */
.pc-prod-aantal, input.pc-prod-aantal { flex: 0 0 90px !important; width: 90px !important; max-width: 90px !important; height: 40px !important; padding: 6px 12px !important; margin: 0 !important; font-family: 'Roboto', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: normal !important; color: #555555 !important; background-color: #fff !important; border: 1px solid #c2cad8 !important; border-radius: 4px !important; box-shadow: none !important; }
/* knop: 211x38, 14px/400, wit op #7F9C90 met 1px rand in dezelfde kleur, geen radius */
.pc-prod-knop { min-width: 211px; height: 38px; padding: 10px 15px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; line-height: 1; color: #fff; background-color: var(--pc-green); border: 1px solid var(--pc-green); border-radius: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pc-prod-knop:hover { background-color: var(--pc-green-hover); border-color: var(--pc-green-hover); }
/* winkelwagenicoon als wit pictogram in plaats van een emoji */
.pc-prod-kar, .pc-kaart-kar {
font-size: 0 !important; line-height: 0; display: inline-block; width: 16px; height: 14px; margin: 0; vertical-align: -2px;
background-image: url("data:image/svg+xml;utf8, een roze hover; galerij en pijlen mogen dat niet. */
/* Hello Elementor kleurt ELKE knop bij hover/focus roze (#c36). Bij knoppen
zonder eigen achtergrond valt dat op; daar zetten we het uit. Globaal
uitschakelen kan niet: dan verliezen de groene knoppen hun kleur. */
.pc-prod-thumb:hover, .pc-prod-thumb:focus { background-color: transparent !important; color: inherit !important; }
.pc-prod-pijl:hover, .pc-prod-pijl:focus { background-color: #ffffff !important; color: inherit !important; }
.pc-prod-aantalknop:hover, .pc-prod-aantalknop:focus { background-color: transparent !important; color: inherit !important; }
/* Het origineel laat de bestelknop bij hover ongewijzigd. */
.pc-prod-knop:hover { background-color: var(--pc-green) !important; border-color: var(--pc-green) !important; }
/* Op mobiel pakt de kaart de volle kolombreedte, net als het origineel. */
@media (max-width: 990px) {
.pc-prod-blok .pc-kaarten .pc-kaart { max-width: none !important; flex-basis: 100% !important; width: 100% !important; }
.pc-prod-top { padding-left: 14px !important; padding-right: 14px !important; }
}
/* ==== PRIMECOOK PRODUCT KAART EN PIJLEN EINDE ==== */
/* ==== PRIMECOOK BLOGARTIKEL ==== */
/* Maten uit de css van het origineel: kop 24/700/33.6, alinea 18/300/180%,
lijsten 16/180%, kolom 1080 breed, terugknop 250px binnenbreedte. */
body.single-post .page-content { max-width: 1080px; margin-left: auto; margin-right: auto; }
body.single-post .entry-title { font-size: 24px; font-weight: 700; line-height: 33.6px; color: var(--pc-text); margin: 16.08px 0; }
body.single-post .page-content p, body.single-post .page-content .tekst {
font-size: 18px; font-weight: 300; line-height: 180%; color: var(--pc-text);
margin: 0; padding-bottom: 0.8em; }
body.single-post .page-content h2 { font-size: 18px; font-weight: 700; line-height: 140%; color: var(--pc-text); margin: 14.94px 0; }
body.single-post .page-content h3 { font-size: 18px; font-weight: 700; line-height: 140%; color: var(--pc-text); margin: 14.94px 0; }
body.single-post .page-content ul, body.single-post .page-content ol {
font-size: 16px; font-weight: 300; line-height: 180%; color: var(--pc-text); padding-bottom: 0.8em; }
body.single-post .page-content li { font-size: 16px; line-height: 180%; }
/* De terugknop is een blok-link van 250px binnenbreedte; het thema zet border-box. */
body.single-post .qs_blog_post_backlink { margin: 20px 0; }
body.single-post .qs_blog_post_backlink_a {
box-sizing: content-box;
color: #ffffff !important; background-color: var(--pc-green); border: 1px solid var(--pc-green);
font-size: 18px; font-weight: 400; line-height: normal; padding: 10px 16px;
border-radius: 3px; text-decoration: none !important; }
body.single-post .qs_blog_post_backlink_a:hover { background-color: var(--pc-green-hover); color: #ffffff !important; }
/* De titel staat nu IN het artikel (div.blog-header); het themablok erboven uit. */
body.single-post .page-header { display: none; }
body.single-post .page-content .blog-header h1 {
font-size: 24px; font-weight: 700; line-height: 33.6px; color: var(--pc-text); margin: 16.08px 0; }
/* Het introblok brengt zijn eigen kolom van 1080 mee; niet nog eens inperken. */
body.single-post .pc-blogintro .contentcontainer { width: 100%; }
/* Op het origineel komt de ruimte onder de intro van de padding (4%) van de
artikelsectie; die sectie hebben wij niet, dus hier als marge. */
body.single-post .pc-blogintro { margin-bottom: 0px; }
/* ==== PRIMECOOK BLOGARTIKEL EINDE ==== */
/* ==== PRIMECOOK KOPBALK ==== */
/* De teller bij het winkelwagentje rekent tegen de knop (16px hoog), niet tegen
de hoge menu-li van het origineel. Daardoor zakte hij onder het icoon.
Op het origineel staat het rondje 21px boven de bovenkant van het icoon. */
/* Alleen de desktop-widget (3251657) zit fout; de mobiele (fc4e6bb) staat goed.
top/inset halen het niet: die waarde komt ergens vandaan die niet via de
cssom te vinden is en negeert zelfs een inline !important. margin-top werkt
wel. -41px brengt het rondje van 20px onder naar 21px boven de icoonrand,
gelijk aan het origineel. Wijzigt de kopbalk, controleer dan dit id. */
.elementor-element-3251657 .elementor-button-icon-qty { margin-top: -43px; }
/* ==== PRIMECOOK KOPBALK EINDE ==== */
/* ==== PRIMECOOK BLOGINTRO START ==== */
/* De intro-kop staat bij ons als p.kop in de inhoud; het origineel gebruikt h1.kop (24/500/33.6). */
body.single-post .page-content .kop {
font-size: 24px;
font-weight: 500;
line-height: 33.6px;
padding-bottom: 14.4px;
}
body.single-post .page-content .kop strong {
font-weight: 500;
}
/* Het origineel geeft alinea's in een blogartikel geen onderruimte. */
body.single-post .page-content p {
padding-bottom: 0;
}
/* Promoblok onder een artikel; klassen van het origineel. */
body.single-post .page-content .pc-blogpromo .contentcontainer {
width: 100%;
}
body.single-post .page-content .pc-blogpromo .subkop {
font-size: 24px;
font-weight: 500;
line-height: 43.2px;
padding-bottom: 14.4px;
}
body.single-post .page-content .pc-blogpromo .tekst {
font-size: 18px;
font-weight: 300;
line-height: 32.4px;
padding-bottom: 14.4px;
}
body.single-post .page-content .pc-blogpromo .brochurebutton {
display: inline-block;
width: 284px;
padding: 10px 16px;
border: 1px solid var(--pc-green, #7F9C90);
border-radius: 3px;
background: var(--pc-green, #7F9C90);
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 32.4px;
text-decoration: none;
}
body.single-post .page-content .pc-blogpromo .brochurebutton:hover {
background: var(--pc-green-hover, #19C55D);
color: #fff;
}
/* ==== PRIMECOOK BLOGINTRO EINDE ==== */
/* ==== PRIMECOOK FEESTDAGEN START ==== */
/* Klassen die alleen op /prettigedagen voorkomen; maten van het origineel. */
.pc-wijzer .grotekop {
font-size: 32px;
font-weight: 500;
line-height: 57.6px;
padding-bottom: 19.2px;
}
.pc-wijzer .opsomming {
font-size: 18px;
line-height: 27px;
padding-bottom: 14.4px;
}
.pc-wijzer .opsomming li {
font-size: 18px;
line-height: 27px;
}
.pc-wijzer .paginaafbeeldingcenter {
text-align: center;
}
/* Zichtbaarheidsklassen van het origineel (breekpunt 768px). */
.pc-wijzer .noshowdesktop {
display: none;
}
@media (max-width: 767px) {
.pc-wijzer .showmobile {
display: block;
}
.pc-wijzer .noshowmobile {
display: none;
}
}
/* ==== PRIMECOOK FEESTDAGEN EINDE ==== */
/* ==== PRIMECOOK ARTIKELBLOKKEN START ==== */
/* Productgroeptegels en blogtegels uit het origineel (QSMainWebsiteCSS). */
.pc-wijzer .home-webshop-productgroepen:after {
clear: both;
content: '';
display: block;
}
.pc-wijzer .groepitem {
box-sizing: border-box;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 3px;
cursor: pointer;
}
.pc-wijzer .pannengroep {
float: left;
width: 60%;
height: 520px;
background-image: url(https://primecook.up.agency/wp-content/uploads/2026/07/tegel-home-pannen.jpg);
}
.pc-wijzer .personalisatiegroep {
float: right;
width: 38%;
height: 250px;
margin-bottom: 2%;
background-image: url(https://primecook.up.agency/wp-content/uploads/2026/07/test-afbeelding.jpg);
}
.pc-wijzer .accessoiresgroep {
float: right;
width: 38%;
height: 250px;
background-image: url(https://primecook.up.agency/wp-content/uploads/2026/07/tegel-home-accessoires.jpg);
}
.pc-wijzer .messengroep {
float: left;
width: 100%;
height: 250px;
margin-top: 20px;
background-image: url(https://primecook.up.agency/wp-content/uploads/2026/07/primecook-messen-banner-home.jpg);
}
.pc-wijzer .productgroepkop {
color: #3d3d3c;
font-weight: 500;
font-size: 28px;
margin: 15px;
line-height: 180%;
padding-bottom: 0;
}
.pc-wijzer .personalisatiegroep .productgroepkop,
.pc-wijzer .messengroep .productgroepkop {
color: #fff;
}
/* In een artikel is de kolom 48px smaller dan op het origineel; zonder dit passen er 3 i.p.v. 4 tegels op een rij. */
body.single-post .page-content .pc-shoptegels {
margin-left: -24px;
margin-right: -24px;
width: auto;
max-width: none;
}
body.single-post .page-content .pc-shoptegels .pc-subcat {
flex: 0 0 calc(25% - 21px);
}
/* Secties met een achtergrond lopen op het origineel over de volle paginabreedte. */
.pc-wijzer .pc-volbreed {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
body.single-post {
overflow-x: clip;
}
.pc-wijzer .qs_blog_container_latestitems {
width: 100%;
box-sizing: border-box;
}
.pc-wijzer .qs_blog_container_latestitems:after {
clear: both;
display: block;
content: '';
}
.pc-wijzer .qs_blog_item_latestitems {
box-sizing: border-box;
width: 28%;
margin: 1%;
float: left;
border: 1px solid #eee;
min-height: 498px;
}
.pc-wijzer .qs_blog_image_latestitems {
min-height: 180px;
}
.pc-wijzer .qs_blog_image_latestitems img {
width: 100%;
display: block;
max-width: 100%;
margin: 0 auto;
}
.pc-wijzer .qs_blog_publishcontents_latestitems,
.pc-wijzer .qs_blog_contents_latestitems {
box-sizing: border-box;
padding: 10px;
}
.pc-wijzer .qs_blog_readmore_latestitems {
box-sizing: border-box;
padding: 1px;
text-align: center;
background: #7F9C90;
}
.pc-wijzer .qs_blog_link_latestitems {
display: block;
color: #fff;
font-weight: 300;
font-size: 18px;
margin: 0;
padding: 20px;
text-decoration: none;
}
@media (max-width: 1024px) {
.pc-wijzer .qs_blog_item_latestitems {
width: 47%;
min-height: 605px;
}
.pc-wijzer .pannengroep {
width: 50%;
}
.pc-wijzer .personalisatiegroep,
.pc-wijzer .accessoiresgroep {
width: 48%;
}
}
@media (max-width: 767px) {
.pc-wijzer .qs_blog_item_latestitems {
width: 98%;
}
.pc-wijzer .pannengroep,
.pc-wijzer .accessoiresgroep,
.pc-wijzer .personalisatiegroep {
width: 100%;
float: none;
height: 250px;
margin: 10px 0;
}
}
/* ==== PRIMECOOK ARTIKELBLOKKEN EINDE ==== */
/* ==== PRIMECOOK CATEGORIE FAQ START ==== */
.pc-cat-faq {
margin-top: 32px;
}
.pc-cat-faq .pc-faq-kop {
margin-bottom: 14.4px;
}
.pc-cat-slottekst {
margin-top: 15px;
}
/* ==== PRIMECOOK CATEGORIE FAQ EINDE ==== */
/* ==== PRIMECOOK KASSAKOOPJES KNOPPEN START ==== */
.pc-kassa-knoppen {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.pc-kassa-knop {
display: inline-block;
padding: 10px 15px;
background: var(--pc-green, #7F9C90);
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 19px;
border-radius: 0;
text-decoration: none;
}
.pc-kassa-knop:hover,
.pc-kassa-knop:focus {
background: var(--pc-green-hover, #19C55D);
color: #fff;
}
/* De video-widget krijgt de 16:9-ruimte via .pc-vid, maar de iframe zelf bleef 0 hoog. */
.pc-video .elementor-wrapper {
position: relative;
}
.pc-video iframe.elementor-video,
.pc-video .elementor-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ==== PRIMECOOK KASSAKOOPJES KNOPPEN EINDE ==== */
/* ==== PRIMECOOK AFREKENEN START ==== */
/* Maten en kleuren uit pluginlive_min.css van het origineel. */
body.woocommerce-checkout form.checkout.woocommerce-checkout, body.woocommerce-checkout .woocommerce-notices-wrapper, body.woocommerce-checkout .woocommerce-form-coupon-toggle, .pc-af-titel { max-width: 1080px; margin-left: auto; margin-right: auto; }
/* De selector heet bewust body.woocommerce-checkout h1.pc-af-titel en niet .pc-af-titel:
.elementor-kit-8 h1 zet font-size 40px / font-weight 500 op (0,1,1) en verslaat daarmee
een losse klasse (0,1,0). De kop stond daardoor op 40px/500 met een regelhoogte van
33.6px - te groot en te krap - terwijl het origineel 24/700/33.6 heeft.
De zijpadding van 10px lijnt de kop uit met de velden: .col-1 en .col-2 hebben
padding: 10px (regel 2685), dus zonder deze padding begon de kop 10px links van de
inhoud, en op de telefoon plakte hij tegen de schermrand. */
body.woocommerce-checkout h1.pc-af-titel { padding: 0 10px 10px; font-size: 24px; font-weight: 700; line-height: 33.6px; color: var(--pc-text, #3D3D3C); }
body.woocommerce-checkout form.checkout.woocommerce-checkout { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4%; align-items: start; }
body.woocommerce-checkout form.checkout #customer_details { display: contents; }
body.woocommerce-checkout form.checkout .col2-set .col-1, body.woocommerce-checkout form.checkout .col2-set .col-2 { width: auto !important; float: none !important; grid-column: 1; padding: 10px; border-radius: 10px; }
body.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 1 / span 3; padding: 10px; background: #eee; border-radius: 10px; }
/* vaste rijen: zonder deze regels zet de browser de linkerkolom een rij lager en ontstaat er bovenaan een gat */
body.woocommerce-checkout form.checkout .col2-set .col-1 { grid-row: 1; }
body.woocommerce-checkout form.checkout .col2-set .col-2 { grid-row: 2; }
body.woocommerce-checkout form.checkout .pc-af-bestelblok { grid-row: 4; }
/* telefoon hoort naast het e-mailadres; de landen-javascript maakt het veld anders breed */
body.woocommerce-checkout form.checkout #billing_phone_field { grid-column: 2; }
body.woocommerce-checkout form.checkout #order_review_heading, body.woocommerce-checkout .woocommerce-billing-fields > h3, body.woocommerce-checkout form.checkout .optional { display: none; }
.pc-af-kop { display: flex; align-items: center; gap: 8px; clear: both; margin: 0 0 15px; padding: 20px 0 10px; border-bottom: 1px solid #c2cad8; font-size: 18px; font-weight: 700; line-height: 25.2px; color: var(--pc-text, #3D3D3C); }
.pc-af-icoon { width: 17px; height: 17px; flex: 0 0 17px; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4%; }
body.woocommerce-checkout form.checkout .form-row { float: none; width: auto; margin: 0 0 10px; padding: 0; }
body.woocommerce-checkout form.checkout .form-row-wide, body.woocommerce-checkout form.checkout .pc-af-kop, body.woocommerce-checkout form.checkout .pc-af-klanttype, body.woocommerce-checkout form.checkout .woocommerce-shipping-fields, body.woocommerce-checkout form.checkout .woocommerce-additional-fields { grid-column: 1 / -1; }
body.woocommerce-checkout form.checkout .form-row-first { grid-column: 1; }
body.woocommerce-checkout form.checkout .form-row-last { grid-column: 2; }
.woocommerce form.checkout .form-row label { display: inline-block; min-width: 100%; margin: 0 0 5px; font-size: 14px; font-weight: 400; line-height: 24px; color: var(--pc-text, #3D3D3C); }
.woocommerce form.checkout .form-row .input-text, .woocommerce form.checkout .form-row select, .woocommerce form.checkout .form-row .select2-selection { box-sizing: border-box; display: block; width: 100%; height: 40px; padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 26px; color: #555; background: #fff; border: 1px solid #c2cad8; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
.woocommerce form.checkout .form-row textarea.input-text { height: auto; min-height: 90px; line-height: 20px; }
body.woocommerce-checkout form.checkout .pc-af-klanttype { box-sizing: border-box; padding: 10px; margin: 10px 0; border: 1px solid #c2cad8; border-radius: 4px; }
body.woocommerce-checkout form.checkout .pc-af-klanttype .woocommerce-input-wrapper { display: flex; align-items: center; flex-wrap: wrap; }
body.woocommerce-checkout form.checkout .pc-af-klanttype .woocommerce-input-wrapper label.radio { display: inline-flex; align-items: center; min-width: 0; width: auto; margin: 0 20px 0 5px; }
body.woocommerce-checkout form.checkout .pc-af-klanttype .woocommerce-input-wrapper input.input-radio { margin: 0; }
body.woocommerce-checkout form.checkout .pc-af-zakelijk { box-sizing: border-box; padding: 20px 10px; margin: 0 0 10px; background: #e5dfdd; border-radius: 5px; }
body.woocommerce-checkout #payment { background: none; border-radius: 0; }
body.woocommerce-checkout #payment ul.wc_payment_methods { list-style: none; margin: 0 0 20px; padding: 0; background: #fff; border: 1px solid #ddd; }
body.woocommerce-checkout #payment ul.wc_payment_methods li { display: flex; align-items: center; gap: 12px; min-height: 51px; margin: 0; padding: 10px 12px; background: #fff; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; }
body.woocommerce-checkout #payment ul.wc_payment_methods li:last-child { border-bottom: 0; }
body.woocommerce-checkout .woocommerce #payment ul.wc_payment_methods li label { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 500; }
body.woocommerce-checkout #payment ul.wc_payment_methods li img { order: -1; max-width: 40px; max-height: 32px; width: auto; height: auto; margin: 0; object-fit: contain; }
.pc-af-gratis { margin-left: auto; font-size: 14px; font-weight: 600; color: #333; }
body.woocommerce-checkout #payment .payment_box { flex: 1 1 100%; margin: 6px 0 0; padding: 10px; font-size: 14px; background: #f6f6f6; border-radius: 6px; }
body.woocommerce-checkout #payment .payment_box::before { display: none; }
.pc-af-verzending { margin: 0 0 20px; }
.pc-af-verzendrij { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 8px 12px; background: #fff; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.pc-af-verzendnaam { flex: 1 1 auto; }
.pc-af-verzendprijs { font-weight: 600; color: #333; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; border: 1px solid #c2cad8; background: #fff; font-size: 14px; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th { padding: 10px; background: #c2cad8; font-weight: 700; text-align: left; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table th, body.woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: 10px; border: 0; border-bottom: 1px solid #c2cad8; vertical-align: top; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child, body.woocommerce-checkout .woocommerce-checkout-review-order-table th:last-child { text-align: right; }
/* bestelknop in een eigen blok onder beide kolommen, zoals het origineel */
/* het oorspronkelijke knopblok blijft staan voor het nonce-veld, maar wordt verborgen.
Zodra WooCommerce daar algemene voorwaarden in zet, wordt het weer zichtbaar,
anders zou het verplichte vinkje onbereikbaar zijn. */
body.woocommerce-checkout #payment .place-order:not(:has(.woocommerce-terms-and-conditions-wrapper)) { display: none; }
body.woocommerce-checkout form.checkout .pc-af-bestelblok { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 10px 0 0; padding: 10px; }
body.woocommerce-checkout .pc-af-legaal { font-size: 11px; font-weight: 300; font-style: italic; line-height: 24px; color: var(--pc-text, #3D3D3C); }
body.woocommerce-checkout form.checkout #place_order { float: none; display: inline-flex; align-items: center; justify-content: center; height: 38px; margin: 0; padding: 10px 15px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; line-height: 1; color: #fff; background: var(--pc-green, #7F9C90); border: 1px solid var(--pc-green, #7F9C90); border-radius: 0; }
body.woocommerce-checkout form.checkout #place_order:hover { background: var(--pc-green-hover, #19C55D); border-color: var(--pc-green-hover, #19C55D); }
/* overzichtstabel: witte regels met productfoto en aantal ervoor */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td, body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody th, body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td, body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { background: #fff; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td { font-size: 16px; font-weight: 300; line-height: 24px; vertical-align: middle; }
body.woocommerce-checkout .pc-af-artikel { display: flex; align-items: center; gap: 10px; }
body.woocommerce-checkout .pc-af-beeld { flex: 0 0 auto; }
body.woocommerce-checkout .pc-af-beeld img { display: block; width: 75px; height: 75px; margin: 0; object-fit: contain; }
body.woocommerce-checkout .pc-af-naam { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--pc-text, #3D3D3C); }
/* keuzevakjes en keuzerondjes zoals op primecook.nl: licht vierkant, donker vinkje */
body.woocommerce-checkout form.checkout input[type="checkbox"] { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin: 0 8px 0 0; padding: 0; vertical-align: -4px; background: #e5e3ef; border: 0; border-radius: 2px; cursor: pointer; }
body.woocommerce-checkout form.checkout input[type="checkbox"]:checked { background-color: var(--pc-text, #3D3D3C); background-image: url("data:image/svg+xml;utf8, met voor het label en
voor de tekst van de klant (aangepast in snippet 120). Hier zetten we die
twee visueel uit elkaar: het label gedempt en lichter, de ingevoerde tekst
nadrukkelijk in de tekstkleur van de winkel.
display is inline-grid en niet grid: daardoor volgt het blok de text-align
van zijn omgeving - links in de tabel op de desktop, gecentreerd in de
mandkaart op mobiel - zonder dat er een media query bij hoeft. De regels
gelden ook op de afrekenpagina en de bedankpagina, waar WooCommerce dezelfde
dl neerzet. */
.pc-mand-pers dl.variation,
body.woocommerce-checkout dl.variation {
display: inline-grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 6px;
row-gap: 2px;
margin: 6px 0 0;
padding: 0;
text-align: left;
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 20px;
}
.pc-mand-pers dl.variation dt,
body.woocommerce-checkout dl.variation dt {
grid-column: 1;
float: none;
clear: none;
margin: 0;
padding: 0;
font-weight: 400;
color: #8a8a89;
}
.pc-mand-pers dl.variation dd,
body.woocommerce-checkout dl.variation dd {
grid-column: 2;
margin: 0;
padding: 0;
font-weight: 500;
color: var(--pc-text, #3D3D3C);
}
.pc-mand-pers dl.variation dd p,
body.woocommerce-checkout dl.variation dd p {
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
}
/* Dezelfde behandeling in de mini-mand in de kop. Elementor zet die dl daar al
in twee kolommen (max-content auto), dus daar liep de tekst niet aan elkaar;
alleen stonden label en ingevoerde tekst in dezelfde kleur en hetzelfde
gewicht. */
.elementor-menu-cart__main dl.variation dt,
.widget_shopping_cart dl.variation dt {
font-weight: 400;
color: #8a8a89;
}
.elementor-menu-cart__main dl.variation dd,
.widget_shopping_cart dl.variation dd {
font-weight: 500;
color: var(--pc-text, #3D3D3C);
}
/* Uitleg onder de twee velden op de productpagina: de eerste regel is
verplicht, de tweede mag leeg blijven (vierde feedbackronde). */
.pc-pers-wrap .pc-pers-hint {
margin: 8px 0 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 20px;
color: #8a8a89;
}
/* ==== PRIMECOOK GRAVUURTEKST EINDE ==== */
/* ==== PRIMECOOK FEEDBACK RONDE 4 START ==== */
/* 1. Kassakoopjes: meer ruimte tussen de knoppen "Naar winkelmand" en
"AFREKENEN", zoals op de oude site. Op desktop stond er al meer ruimte dan
op het origineel (gemeten 818px tegen 799px), dus daar valt niets te winnen;
het verschil zat op smalle schermen. Op primecook.nl stonden de twee knoppen
onder 580px vol-breed onder elkaar met 10px ertussen
(.webshop-cart-button-wrap button { float: none; display: block; width: 100%;
margin: 10px auto }), terwijl ze hier op een regel bleven met 96px ertussen
bij 375px. Dat zetten we terug. De onderkant krijgt ook meer lucht: op het
origineel volgde er nog een hele sectie na de knoppen, nu direct de footer. */
.pc-kassa-knoppen {
margin-bottom: 50px;
}
@media only screen and (max-width: 580px) {
.pc-kassa-knoppen {
flex-wrap: wrap;
}
.pc-kassa-knop {
flex: 1 1 100%;
margin: 10px 0 0;
text-align: center;
}
}
/* 4. "Dit vind je misschien ook leuk...": de kaarten in een rij waren niet
even hoog, waardoor de knoppen niet uitlijnden. De houder is al een
flexrij met align-items: stretch, maar .pc-kaart krijgt elders
height: 100%, en daardoor deed dat stretchen niets. height: auto geeft het
terug; margin-top: auto op de prijs duwt prijs en knop naar de onderkant.
Alleen gescopeerd op dit blok, zodat de categorierasters en de
kassakoopjes ongemoeid blijven. */
.pc-prod-blok .pc-kaarten .pc-kaart {
height: auto !important;
align-self: stretch !important;
}
.pc-prod-blok .pc-kaarten .pc-kaart-prijs {
margin-top: auto !important;
}
/* 5. De zin "Alle genoemde prijzen zijn inclusief BTW" is uit het bestelblok
gehaald (snippet 198). Dat blok is display: flex met space-between, dus met
maar een kind zou de bestelknop naar links schuiven; flex-end houdt hem
rechts waar hij stond. */
body.woocommerce-checkout form.checkout .pc-af-bestelblok {
justify-content: flex-end;
}
/* 10. "Koken met Kelly": tekstkolom en foto raakten elkaar. De rij staat op
gap: 0 !important (specificiteit 0,1,0); deze selector is 0,2,0 en wint
daarom voor de twee losse gap-properties. De foto wordt er 20px smaller van,
dat is op 525px niet te zien. */
.pc-row--pad.elementor-element-f2ff786 {
column-gap: 40px !important;
row-gap: 32px !important;
}
/* 11. De topbalk: tussen Facebook en Instagram zat 40px en tussen Instagram en
het keurmerk 24px. De 40px was dubbel gedeclareerd (Elementor "Space
Between" 20px plus onze eigen gap) en de icoonwidget was breder dan de
iconen door een lege tekstspan en een marge naast het icoon. Die dode ruimte
eruit en de gap naar 11px maakt alle vijf de gaten in de balk gelijk
(gemeten uitkomst: 31.00px tegen 31.28px). */
.pc-headersocials .elementor-icon-list-icon svg {
width: 18px;
height: 18px;
margin-right: 0;
}
.pc-headersocials .elementor-icon-list-text {
display: none;
}
.pc-headersocials .elementor-icon-list-items {
gap: 11px;
}
/* 12. De knoppen "Direct bestellen" in de carrousel op de voorpagina stonden
op verschillende hoogtes: de kaarten zijn wel alle twaalf 589px, maar bij
vier kaarten met een sale-prijs is de prijsregel tweeregelig, waardoor de
knop lager begint. De kaarten zijn zelf wel alle 589px hoog, want de
carrousel trekt ze gelijk. Eerst geprobeerd met de kaart als flexkolom en
margin-top: auto op de knop: dat lijnt de knoppen wel uit, maar dan klappen
de marges binnen de kaart niet meer samen en werd de kaart 649px in plaats
van 589px, dus de hele carrousel 60px hoger (gemeten). Daarom nu de knop
absoluut onderaan: de kaart houdt zijn hoogte en de knop staat op elke kaart
op dezelfde plek. .pc-kaart heeft al position: relative, en de kliklaag van
de titellink blijft werken omdat de knoplink zelf z-index 2 heeft. */
.pc-carrousel .pc-kaart {
display: flex !important;
flex-direction: column;
}
.pc-carrousel .pc-kaart .pc-kaart-beeld {
margin-bottom: 0 !important;
}
.pc-carrousel .pc-kaart .pc-kaart-knop {
margin-top: auto !important;
}
/* Elementor geeft elke widget in de kaart margin-bottom: 20px. Bij display:
block klapten die samen met de marges van .pc-kaart-naam en .pc-kaart-prijs;
in een flexkolom klappen ze niet meer en kwamen er 2 x 20px bij. Nul zetten
herstelt precies het oude gedrag. */
.pc-carrousel .pc-kaart .elementor-widget {
margin-bottom: 0 !important;
}
/* 14, 15, 16. De tekst onder het raster op categoriepagina's zoals
/rvs-pannen. Drie klachten in een blok:
- het lettertype week af: er stond geen font-family, dus de systeemstack
werd gebruikt in plaats van Roboto. Een declaratie op de houder herstelt
p, h2, ul, li, a en strong in een keer via overerving. De kleur gaat
mee van #333333 naar de tekstkleur van de winkel;
- de koppen plakten tegen de tekst erboven: ze stonden op margin 0. Nu
32.4px erboven, gelijk aan het alinearitme dat elders al gebruikt wordt,
met de eerste kop uitgezonderd zodat die niet bij de 30px van de houder
komt. De alinea's krijgen onderling dezelfde ruimte, anders valt de lucht
boven de koppen op als enige uitzondering;
- de opsomming stond kleiner dan de rest. Nu 18px, gelijk aan de alinea's.
font-weight moet met !important, omdat de gemigreerde html een inline
style="font-weight: 400" op de li's heeft staan. */
.pc-cat-ondertekst {
font-family: 'Roboto', sans-serif;
color: var(--pc-text, #3D3D3C);
}
.pc-cat-ondertekst h2 {
margin: 32.4px 0 0 !important;
padding: 0 0 14.4px !important;
}
.pc-cat-ondertekst h2:first-child {
margin-top: 0 !important;
}
.pc-cat-ondertekst p + p {
margin-top: 32.4px !important;
}
.pc-cat-ondertekst ul,
.pc-cat-ondertekst ol {
margin: 0 0 14.4px !important;
padding-left: 40px;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 32.4px !important;
list-style: disc;
}
.pc-cat-ondertekst li {
margin: 0;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 32.4px !important;
}
/* Dezelfde ontbrekende fontstack zit in de lange omschrijving op de
productpagina's; het is een en hetzelfde gebrek. */
.pc-prod-lang {
font-family: 'Roboto', sans-serif;
}
/* 18. De FAQ-accordeon. De vraag is nu een echte h3 binnen de summary
(snippets 156 en 195); die krijgt hier zijn eigen typografie, groter dan het
antwoord (20px tegen 18px) en met koppengewicht. De rij krijgt verticale
lucht en het antwoord onderaan wat meer, want het geheel stond te compact.
De pijl stond met een vaste top: 7px tegen de summary; met de hogere rij
moet hij mee naar het midden, en de rotatie bij openen moet die
verschuiving meenemen, anders springt hij. */
.pc-faq-vraag {
padding: 8px 30px 8px 0;
}
.pc-faq-vraag .pc-faq-vraagtekst {
margin: 0 !important;
padding: 0 !important;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 30.6px;
color: #ffffff;
}
.pc-faq-pijl {
top: 50%;
transform: translateY(-50%);
}
.pc-faq-item[open] > .pc-faq-vraag .pc-faq-pijl {
transform: translateY(-50%) rotate(180deg);
}
.pc-faq-antwoord {
padding: 4px 5px 14px !important;
}
/* ==== PRIMECOOK FEEDBACK RONDE 4 EINDE ==== */
/* ==== PRIMECOOK AFREKENEN ACCOUNTBLOK START ==== */
/* Het blok "Maak een account aan" staat nu tussen de persoonsgegevens en de
kop Factuuradres, zoals op de oude site. Zie het sjabloon
woocommerce/checkout/form-billing.php in dit thema. De veldenwikkel is een
raster van twee kolommen, dus het blok moet over de volle breedte lopen. */
body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper > .pc-af-account {
grid-column: 1 / -1;
}
body.woocommerce-checkout form.checkout .pc-af-account > p.create-account {
margin: 0 0 16px;
}
/* De twee wachtwoordvelden naast elkaar. Deze houder zit binnen
div.create-account, die WooCommerce zelf open- en dichtschuift; daarom
staat de uitlijning op een eigen element dat dat script niet aanraakt. */
body.woocommerce-checkout form.checkout .pc-af-wachtwoorden {
display: flex;
flex-wrap: wrap;
column-gap: 4%;
}
body.woocommerce-checkout form.checkout .pc-af-wachtwoorden > .pc-af-ww {
flex: 1 1 0;
min-width: 0;
}
@media only screen and (max-width: 580px) {
body.woocommerce-checkout form.checkout .pc-af-wachtwoorden > .pc-af-ww {
flex: 1 1 100%;
}
}
/* ==== PRIMECOOK AFREKENEN ACCOUNTBLOK EINDE ==== */
/* ==== PRIMECOOK CATEGORIE FAQ WITRUIMTE START ==== */
/* Het FAQ-blok op een categoriepagina is daar altijd het laatste blok, dus
erfde het de voetruimte die voor de losse /faq-pagina bedoeld is:
calc(50px + 4vw), oftewel 91px bij 1024 en 127px bij 1920 - hoe breder het
scherm, hoe groter het gat. Daardoor stond de slotregel met de verwijzing
naar de FAQ-pagina ver onder de vragen, en op de pagina's zonder slotregel
gaapte het gat tot aan de footer. Alleen /faq heeft die ruimte nodig. Op een
categorie valt het blok nu terug in het ritme van 32px dat ook boven de FAQ
staat; daaronder blijft de 4% onderruimte van de rij over, gelijk aan de
circa 45px die het origineel onder zijn laatste blok heeft. */
.pc-cat-faq .pc-faq-blok,
.pc-cat-faq .pc-faq-blok:last-child {
margin-bottom: 0;
}
/* ==== PRIMECOOK CATEGORIE FAQ WITRUIMTE EINDE ==== */
/* ==== PRIMECOOK BLOGSJABLOON START ==== */
/* De blogartikelen hadden geen sjabloon: het kale bestand van hello-elementor
zette de artikelinhoud in een kolom van 1080px en verder niets. Alinea's
plakten aan elkaar (margin 0 en padding-bottom 0), tussenkoppen waren even
groot als de lopende tekst en links waren karmijnrood uit reset.css. Serge
koos op 11-9-2026 voor een leeskolom: geen bannerbeeld, beelden gewoon in de
tekst. Dit blok wijkt dus bewust af van 1:1 met primecook.nl - daar is het
artikel een onbewerkte Word-plak. Zet dit blok uit en de oude toestand is
terug. Snippet 214 levert de kop, het kruimelpad en de datum. */
/* 1. Leeskolom van 720px binnen de bestaande 1080. */
body.single-post .page-content {
max-width: 720px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
line-height: 32.4px;
}
/* Bericht 1170 is geen artikel maar een landingspagina met secties over de
volle vensterbreedte; die rekenen tegen de breedte van hun ouder. */
body.single-post.postid-1170 .page-content {
max-width: none;
}
/* 2. De kop boven het artikel. */
.pc-blog-kop {
margin: 0 0 33px;
}
body.single-post .pc-blog-kruimel {
font-family: 'Roboto', sans-serif;
font-size: 16px !important;
font-weight: 300 !important;
line-height: 24px !important;
color: var(--pc-text) !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
.pc-blog-kruimel a {
color: var(--pc-text);
text-decoration: none;
}
.pc-blog-kruimel a:hover {
color: var(--pc-green);
text-decoration: underline;
}
body.single-post h1.pc-blog-titel {
font-family: 'Roboto', sans-serif;
font-size: 24px !important;
font-weight: 500 !important;
line-height: 33.6px !important;
color: var(--pc-text) !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
body.single-post .pc-blog-datum {
font-size: 16px !important;
font-weight: 300 !important;
line-height: 24px !important;
color: #8a8a89 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3. Typografie in het artikel zelf. De !important is nodig omdat de import
uit Word op bijna elke alinea een inline line-height zet. */
body.single-post .page-content p {
font-family: 'Roboto', sans-serif;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 32.4px !important;
color: var(--pc-text);
margin: 0 0 24px !important;
padding-bottom: 0 !important;
}
body.single-post .page-content h2 {
font-family: 'Roboto', sans-serif;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 28px !important;
color: var(--pc-text) !important;
margin: 32px 0 12px !important;
padding: 0 !important;
}
body.single-post .page-content h3,
body.single-post .page-content h4 {
font-family: 'Roboto', sans-serif;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 26px !important;
color: var(--pc-text) !important;
margin: 28px 0 10px !important;
padding: 0 !important;
}
/* De rubriekkop uit het introblok was met 24/500 de grootste tekst op de
pagina, groter dan de titel van het artikel zelf. Nu een rustig label. */
body.single-post .page-content .kop {
font-size: 20px !important;
font-weight: 500 !important;
line-height: 28px !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
body.single-post .page-content ul,
body.single-post .page-content ol {
font-size: 18px;
font-weight: 300;
line-height: 32.4px;
margin: 0 0 24px;
padding-left: 24px;
}
body.single-post .page-content li {
margin-bottom: 6px;
}
body.single-post .page-content a {
color: var(--pc-text);
text-decoration: underline;
}
body.single-post .page-content a:hover {
color: var(--pc-green);
}
body.single-post .page-content img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin: 8px 0 24px;
}
body.single-post .page-content hr {
border: 0;
border-top: 1px solid var(--pc-border);
margin: 32px 0;
}
body.single-post .page-content blockquote {
margin: 0 0 24px;
padding: 12px 18px;
border-left: 3px solid var(--pc-green);
background: #f6f8f6;
}
body.single-post .page-content table {
width: 100%;
border-collapse: collapse;
margin: 0 0 24px;
}
body.single-post .page-content th,
body.single-post .page-content td {
border: 1px solid var(--pc-border);
padding: 8px 10px;
font-size: 16px;
font-weight: 300;
}
/* 4. De opmaak die uit Word is meegekomen onschadelijk maken: 120 spans met
font-size 12.0pt (16px) maakten de artikeltitel kleiner dan de lopende tekst.
Bericht 1170 is met de hand gebouwd en houdt zijn eigen inline opmaak. */
body.single-post:not(.postid-1170) .page-content span[style],
body.single-post:not(.postid-1170) .page-content font {
font-size: inherit !important;
line-height: inherit !important;
font-family: inherit !important;
}
/* 5. Afsluiting: verwijzing naar de collectie, boven de terugknop. */
.pc-blog-slot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #C1D1C4;
border-radius: 5px;
padding: 18px 20px;
margin: 0px 0 24px;
}
body.single-post .pc-blog-slot-tekst {
font-size: 18px !important;
font-weight: 300 !important;
line-height: 28px !important;
color: var(--pc-text) !important;
margin: 0 !important;
padding: 0 !important;
}
.pc-blog-slot-knop {
flex: 0 0 auto;
display: inline-block;
background: var(--pc-green);
border: 1px solid var(--pc-green);
border-radius: 3px;
padding: 10px 18px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--pc-white) !important;
text-decoration: none !important;
white-space: nowrap;
}
.pc-blog-slot-knop:hover {
background: var(--pc-green-hover);
border-color: var(--pc-green-hover);
color: var(--pc-white) !important;
}
@media only screen and (max-width: 580px) {
.pc-blog-slot {
flex-direction: column;
align-items: flex-start;
}
}
/* ==== PRIMECOOK BLOGSJABLOON EINDE ==== */
/* ==== PRIMECOOK MEGAMENU SHOP START ==== */
/* De Shop-dropdown toont sinds 14-9-2026 drie kolommen naast elkaar: Pannen,
Keukengerei & Accessoires en Sale. Dat is geen plugin maar gewoon een derde
niveau in het menu: de drie kolomkoppen zijn menu-items met url # en de
categorieen hangen daaronder. Het item Shop draagt de klasse pc-mega.
Twee dingen om te weten voor je hier iets wijzigt:
1. SmartMenus (het menuscript van Elementor) zet bij openen en sluiten een
INLINE display op ul.sub-menu. Daarom staat er hier nergens display op de
dropdown zelf - dan zou hij of altijd open of altijd dicht staan. De
kolommen komen van inline-block op de li's, wat ook binnen een blok werkt.
Het derde niveau krijgt wel display: block !important, want dat moet juist
altijd zichtbaar zijn.
2. SmartMenus zet ook inline top en left, gemeten vanaf het li van Shop. Een
panel van circa 770px liep daardoor rechts het scherm uit en de kolom Sale
viel weg. Daarom staat li.pc-mega op position: static en de nav op
relative: het panel richt zich nu op de menubalk en wordt met right: 0
rechts uitgelijnd, zodat het op elke schermbreedte binnen beeld blijft.
3. De breedte staat vast op 770px en niet op auto. Een absoluut geplaatst
element met auto krimpt namelijk tot de breedte van zijn houder, en die
menubalk is maar circa 715px breed - dan valt de derde kolom naar een
tweede regel. Met een vaste breedte mag het panel links buiten de balk
uitsteken, wat precies de bedoeling is. */
.pc-mainmenu nav.elementor-nav-menu--main {
position: relative;
}
.pc-mainmenu li.pc-mega {
position: static;
}
.pc-mainmenu li.pc-mega > ul.sub-menu {
left: auto !important;
right: -65px !important;
top: 100% !important;
width: 1120px;
max-width: calc(100vw - 40px);
min-width: 0;
overflow: hidden;
padding: 20px 26px 22px;
border: 1px solid #eeeeee;
}
/* float en niet inline-block: tussen inline-blocks zit de witruimte uit de html,
en die paar pixels duwden de kolom Sale naar een tweede regel.
En de breedte in PROCENTEN, niet in pixels. Drie kolommen van 33.33% kunnen
samen nooit boven de 100% van hun houder uitkomen; met 3x220 + 2x28 tegen een
binnenruimte van precies 716px was er nul speling, en dan is een halve pixel
afronding genoeg om Sale naar een tweede regel te duwen. De tussenruimte zit
nu in de padding, dus binnen die 33.33%, en de kolommen schalen mee zodra het
panel smaller wordt. */
.pc-mainmenu li.pc-mega > ul.sub-menu > li {
float: left;
box-sizing: border-box;
width: 206px;
padding-right: 0;
margin: 0 32px 0 0;
}
/* Elke kolom zijn eigen breedte, op verzoek van Serge: Keukengerei heeft de
langste namen en Sale maar een item, dus gelijke delen is daar zonde van de
ruimte. De drie percentages tellen op tot 99,99% - onder de 100%, dus er kan
nooit een kolom omslaan.
Let op: dit werkt op VOLGORDE, niet op naam. Verander je de volgorde van de
kolommen in het menu, of komt er een kolom bij, pas dan ook deze regels aan;
de 33,33% hierboven blijft de terugval voor elke kolom die hier niet staat. */
/* Vijf kolommen achter elkaar, op verzoek van Serge (9-10-2026). Daarvoor is
het panel van 880 naar 1060px gegaan. Die maat is niet gegokt maar gemeten:
met canvas measureText is per kolom de breedste tekst opgemeten - Pannen 180,
Keukengerei 321 ("Ovenschalen, braadsledes, pizza- en taartvormen"), Messen
158, Cadeau 175 en Sale 90 - samen 924px, plus vier tussenruimten van 20px en
52px binnenruimte en 2px rand. Daarmee breekt geen enkel label meer af.
De breedtes staan in procenten van de binnenruimte en tellen op tot 99,8%,
dus onder de 100%: een kolom kan nooit omslaan. Ze volgen de VOLGORDE van het
menu (Pannen, Keukengerei, Messen & Snijplanken, Cadeau-ideeen, Sale); zet je
de kolommen in een andere volgorde, pas dan ook deze vijf regels aan.
Past 1060px nog? Het panel hangt met right: 0 aan de menubalk. Die eindigt
bij een venster van 1200px op x=1095, dus het panel begint dan op x=35 - net
binnen beeld. Onder circa 1160px bestaat deze dropdown niet meer. */
/* De kolombreedtes zijn gemeten aan de echte opmaak - white-space: nowrap plus
width: max-content op de links zelf, daarna weer terug - en niet berekend met
canvas measureText, dat 8 tot 16px te lage waarden gaf. Gemeten behoefte:
Pannen 196, Keukengerei 337 ("Ovenschalen, braadsledes, pizza- en
taartvormen"), Messen 196 (daar is de kop breder dan de items), Cadeau 191,
Sale 106. Elke kolom heeft circa 10px speling.
De tussenruimte zit in margin-right en is daardoor overal exact even groot.
Met procentbreedtes viel de speling per kolom anders uit en oogden de
tussenruimtes ongelijk.
Onder 1360px staat Sale onder Cadeau-ideeen: kolom 4 en 5 zweven allebei
rechts en kolom 5 krijgt clear: right. Clear: right kijkt alleen naar eerdere
rechter zwevers, dus alleen naar kolom 4, en zet Sale er meteen onder.
Clear: left zou onder de lange Pannen-kolom uitkomen en een gat van ruim
150px laten. */
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(2) {
width: 345px;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(4) {
width: 211px;
float: right;
margin-right: 0;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(5) {
width: 211px;
float: right;
clear: right;
margin: 18px 0 0 0;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:last-child {
margin-right: 0;
}
/* Het paneel hangt aan ul.elementor-nav-menu. De rechterrand daarvan ligt altijd
op 50vw + 495px: de inhoudskolom is 1080px breed en gecentreerd, en rechts
daarvan blijft 45px over voor het winkelwagentje. Gemeten bij een venster van
1676px: rechterrand 1333, en 1333 - 838 = 495. Met
right: 495px - halve paneelbreedte staat het paneel dus precies midden op het
scherm, zonder dat er iets aan de DOM of aan de plaatsing van de andere
submenus verandert. Het hoofdmenu bestaat alleen vanaf 1200px - daaronder
neemt .pc-mobilemenu het over - dus 1120px houdt daar nog 40px over, en de
brede variant van 1300px schakelt in vanaf 1360px. */
@media (min-width: 1360px) {
.pc-mainmenu li.pc-mega > ul.sub-menu {
right: -155px !important;
width: 1300px;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li {
margin-right: 40px;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(4) {
float: left;
margin-right: 40px;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(5) {
width: 116px;
float: left;
clear: none;
margin: 0;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:last-child {
margin-right: 0;
}
}
/* De kolomkop. De url is #, dus klikken heeft geen zin; pointer-events houdt
de sprong naar boven tegen. Alleen op desktop - in het mobiele paneel moet
je er juist wel op kunnen tikken om de groep open te klappen. */
.pc-mainmenu li.pc-mega > ul.sub-menu > li > a {
display: block;
padding: 0 0 8px;
margin-bottom: 8px;
/* Deze twee met !important, anders wint de Elementor-regel voor deze widget
(.elementor-81 .elementor-element-316ee93d .elementor-nav-menu--dropdown
.elementor-sub-item, specificiteit 0-5-0) van de onze (0-3-3) en staat de
kop gewoon op 15px/300 - dus even licht als de items eronder. */
font-size: 16px !important;
font-weight: 500 !important;
line-height: 24px;
color: var(--pc-text);
border-bottom: 1px solid var(--pc-border);
white-space: normal;
pointer-events: none;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li > a:hover {
color: var(--pc-text);
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li > a .sub-arrow {
display: none !important;
}
/* Het derde niveau staat altijd open en in de stroom, niet als uitklapper. */
.pc-mainmenu li.pc-mega > ul.sub-menu ul.sub-menu {
display: block !important;
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
transform: none !important;
width: auto;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.pc-mainmenu li.pc-mega > ul.sub-menu ul.sub-menu a {
padding: 3px 0;
line-height: 24px;
font-size: 15px;
white-space: normal;
}
/* Geen aparte breedte voor smallere schermen meer. Een panel van 880px past
ook bij 1200px nog ruim binnen beeld (het begint dan op x=215), en onder
circa 1160px bestaat deze dropdown sowieso niet meer - daar neemt de mobiele
balk met het uitschuifpaneel het over. Een smaller panel op 1200px maakte de
kolom Keukengerei net te krap voor "Ovenschalen, braadsledes, pizza- en
taartvormen", en dan viel die naam alsnog over twee regels. */
/* ==== PRIMECOOK MEGAMENU SHOP EINDE ==== */
/* ==== PRIMECOOK MOBIEL MENU SUBITEM ACHTERGROND START ==== */
/* In het uitschuifpaneel kreeg een geopende groep een donkere balk over de
volle breedte, waardoor de tekst onleesbaar werd. Dat is de STANDAARD van
Elementor Pro (widget-nav-menu.min.css):
.elementor-nav-menu--dropdown .elementor-item.highlighted,
.elementor-sub-item:hover, .elementor-sub-item:focus,
.elementor-sub-item.elementor-item-active { background-color: #3f444b; color: #fff }
Voor de desktopwidget zet de Elementor-instelling die achtergrond op wit,
maar voor de mobiele widget staat die instelling niet, dus gold de donkere
standaard. Hierboven stond al een blok dat dit rechtzet - maar alleen voor
.elementor-item, en dat is de klasse van de HOOFDitems. Alles in een submenu
draagt .elementor-sub-item en viel er dus buiten.
Het viel nu pas op omdat een item van het tweede niveau sinds de drie
kolommen onder Shop blijft staan terwijl het openklapt; op een aanraakscherm
blijft :hover na een tik bovendien hangen. Ook .elementor-item-active zit er
hier bij: anders krijgt bijvoorbeeld RVS pannen een zwarte balk zodra je op
die categoriepagina staat. */
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-sub-item,
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active,
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-item.highlighted,
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-sub-item.highlighted {
background: transparent !important;
color: var(--pc-text) !important;
}
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-sub-item:hover,
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-sub-item:focus,
.pc-mobilemenu .elementor-nav-menu--dropdown .elementor-sub-item:active {
background: transparent !important;
color: var(--pc-green-hover) !important;
}
/* ==== PRIMECOOK MOBIEL MENU SUBITEM ACHTERGROND EINDE ==== */
/* ==== PRIMECOOK MAND PERSONALISATIETOESLAG START ==== */
/* De kolommen Prijs en Totaal tonen in de winkelmand de BASISprijs van een
gepersonaliseerd artikel - net als op het origineel - terwijl het mandtotaal
de toeslag van EUR 12 per stuk wel meetelt. De klant zag daardoor 65,98 op de
regel en 77,98 als totaal, zonder dat ergens stond waar dat verschil vandaan
kwam. Onder het regeltotaal staat nu een regel met die toeslag; die wordt
opgebouwd in pc_pers_subtotaal_html in snippet 202. */
.pc-mand-c4 .pc-mand-toeslag {
display: block;
margin-top: 4px;
font-size: 14px;
font-weight: 300;
line-height: 20px;
color: #8a8a89;
}
.pc-mand-c4 .pc-mand-toeslag .woocommerce-Price-amount {
white-space: nowrap;
}
/* ==== PRIMECOOK MAND PERSONALISATIETOESLAG EINDE ==== */
/* ==== PRIMECOOK FOOTER BEDRIJFSGEGEVENS START ==== */
/* KvK- en BTW-nummer onder Contact in de tweede voettekstkolom (widget pc6bedr
in sjabloon 90). Zelfde typografie als de lijsten erboven: wit, 16px, gewicht
300, regelhoogte 150%. Het BTW-nummer staat hier zonder punten, de officiele
schrijfwijze. Let op: op /contact en in de verkoopvoorwaarden staan nog twee
andere schrijfwijzen; die zijn op verzoek van Serge niet aangepast. */
.pc-footerbedrijf {
padding-top: 1em;
}
.pc-footerbedrijf .elementor-widget-container,
.pc-footerbedrijf p {
color: var(--pc-white);
font-size: 16px;
font-weight: 300;
line-height: 150%;
margin: 0;
}
/* ==== PRIMECOOK FOOTER BEDRIJFSGEGEVENS EINDE ==== */
/* ==== PRIMECOOK ONTBINDINGSFORMULIER START ==== */
/* Het formulier op /overeenkomst-ontbinden (snippet 217). Maten en kleuren uit
de rest van de site: veldrand #c2cad8 met radius 4 zoals op de afrekenpagina,
knop groen met radius 3 zoals alle knoppen, meldingen in dezelfde kleuren als
de couponmeldingen. */
.pc-herroep-val {
position: absolute;
left: -9999px;
}
.pc-herroep-formulier {
max-width: 520px;
margin: 24px 0 0;
}
.pc-herroep-rij {
margin: 0 0 16px;
}
.pc-herroep-rij label {
display: block;
font-size: 14px;
font-weight: 300;
line-height: 22px;
color: var(--pc-text);
margin-bottom: 5px;
}
.pc-herroep-rij input,
.pc-herroep-rij textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #c2cad8;
border-radius: 4px;
padding: 6px 12px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 26px;
color: #555555;
}
.pc-herroep-ster {
color: #c0392b;
}
.pc-herroep-knop {
background: var(--pc-green);
border: 1px solid var(--pc-green);
border-radius: 3px;
color: var(--pc-white);
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
padding: 9px 22px;
cursor: pointer;
}
.pc-herroep-knop:hover {
background: var(--pc-green-hover);
border-color: var(--pc-green-hover);
}
.pc-herroep-fout {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
border-radius: 10px;
padding: 10px 14px;
margin: 0 0 18px;
}
.pc-herroep-fout ul {
margin: 0;
padding-left: 18px;
}
.pc-herroep-klaar {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
border-radius: 10px;
padding: 14px 18px;
}
.pc-herroep-klaar p {
margin: 0 0 8px;
}
.pc-herroep-klaar p:last-child {
margin: 0;
}
/* ==== PRIMECOOK ONTBINDINGSFORMULIER EINDE ==== */
/* ==== PRIMECOOK BLOGTEGEL AFBEELDINGEN START ==== */
/* De tegelrasters staan op /nieuws, /inspiratie, /wetenswaardigheden en
/koken-met-kelly. Elke img draagt daar width="376" height="250", maar de
bestanden zelf lopen uiteen: 450x175, 500x400, 1000x1000, 1350x531,
2000x600, 2048x1152. De berekende waarde was aspect-ratio: auto 376 / 250,
en het sleutelwoord auto betekent "neem de eigen verhouding van de
afbeelding zodra die bekend is". Zolang de afbeelding nog niet geladen was
stond elke tegel keurig op 291x194; zodra hij binnen was sprong de hoogte
naar 100, 113, 163, 232 of 240px. Daarom was het probleem pas na het laden
zichtbaar en meet je het niet als je te vroeg kijkt.
De vaste verhouding staat nu op .qs_blog_image, als padding-top in plaats
van aspect-ratio, zodat hij ook werkt waar aspect-ratio niet ondersteund
wordt - met aspect-ratio zou de afbeelding daar naar hoogte 0 klappen.
250 / 376 = 66.489%. Dat is de geregistreerde miniatuurmaat, dus de
uitsnede blijft gelijk aan wat de opmaak altijd al bedoelde. */
/* height: 0 en min-height: 0 zijn nodig omdat de oude opmaak .qs_blog_image een
min-height van 180px geeft. Bij een venster van 1024px is de kolom 261px breed
en vraagt de verhouding 173px, waardoor die 180px het vakje 7px te hoog maakte.
font-size en line-height op 0 voorkomen dat witruimte in de opmaak nog een
regelvakje opent; de afbeelding zelf staat absoluut en telt niet mee. */
.qs_blog_item .qs_blog_image {
position: relative;
display: block;
flex: 0 0 auto;
width: 100%;
height: 0;
min-height: 0;
padding-top: 66.489%;
overflow: hidden;
font-size: 0;
line-height: 0;
}
.qs_blog_item .qs_blog_image > a,
.qs_blog_item .qs_blog_image picture.main-picture-element {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
}
/* max-height moet uit: de oude opmaak zet de afbeelding op max-height 240px,
waardoor er bij een venster van 768px een witte strook van 25px onder de
afbeelding bleef staan - het vakje is daar 265px hoog. */
.qs_blog_item .qs_blog_image img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
max-height: none;
max-width: none;
object-fit: cover;
object-position: center;
}
/* ==== PRIMECOOK BLOGTEGEL AFBEELDINGEN EINDE ==== */
/* ==== PRIMECOOK KASSAKOOPJES CARROUSEL START ==== */
/* De zes kassakoopjes vielen uiteen in een rij van vier en een rij van twee.
Daardoor stond de afrekenknop op 1447px terwijl het venster 1265px hoog is:
de knop viel onder de vouw. De rij staat nu op een regel en schuift
horizontaal, zoals de carrousel op de voorpagina. De kaarten houden hun
breedte van 239px, dus er staan er vier in beeld en de rest schuift mee -
een smallere kaart zou de productnamen laten afbreken. */
.pc-kassa-carrousel {
position: relative;
}
.pc-kaarten.pc-kassakoopjes {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pc-kaarten.pc-kassakoopjes::-webkit-scrollbar {
display: none;
}
/* Hier staat bewust geen scroll-behavior: smooth en geen scroll-snap.
Scroll-snap trok elke tussenstap naar het dichtstbijzijnde vastpunt, zodat
een eigen animatie zou schokken: scrollLeft = 300 kwam met snap uit op 269
en zonder snap op 300. Snap had bovendien een zijeffect, want de eerste
kaart heeft 10px marge: het rustpunt lag op scrollLeft 10 in plaats van 0,
waardoor de pijl terug nooit uitgeschakeld werd.
De kaarten hebben een vaste breedte en de knoppen schuiven precies een
kaartbreedte op, dus de uitlijning klopt ook zonder snap. Het soepele
schuiven doet snippet 218 zelf met requestAnimationFrame, zodat het niet
uitmaakt of de browser scroll-behavior ondersteunt. */
/* De pijlen volgen de carrousel op de voorpagina: rondje van 40px in #dddddd,
46px buiten de rij. Daar is ruimte voor: de kolom is 1070px breed en de
pagina 1917px. */
.pc-kassa-pijl {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
transform: translateY(-50%);
border: 0;
border-radius: 50%;
background: #dddddd;
color: #ffffff;
cursor: pointer;
}
.pc-kassa-pijl svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.pc-kassa-pijl-vorige {
left: -46px;
}
.pc-kassa-pijl-volgende {
right: -46px;
}
.pc-kassa-pijl[disabled] {
opacity: 0.3;
cursor: default;
}
/* Onder 1200px is er naast de kolom geen ruimte meer, dus komen de pijlen
over de rand van de rij te liggen. */
@media (max-width: 1200px) {
.pc-kassa-pijl-vorige {
left: 0;
}
.pc-kassa-pijl-volgende {
right: 0;
}
}
/* De afrekenknop plakt onderin beeld zolang je langs het blok scrollt. */
.pc-kassa-knoppen {
position: sticky;
bottom: 0;
z-index: 3;
padding: 14px 0;
background: #ffffff;
}
/* ==== PRIMECOOK KASSAKOOPJES CARROUSEL EINDE ==== */
/* ==== PRIMECOOK BETAALPAGINA NA MISLUKTE BETALING START ==== */
/* Mislukt een betaling, dan stuurt Mollie de klant terug naar
/checkout/order-pay/. Die pagina heeft precies dezelfde body-klassen als
/checkout - alleen woocommerce-order-pay komt erbij - maar een andere
opmaak. De gewone afrekenpagina wordt op breedte gehouden door
form.checkout { max-width: 1080px; margin: 0 auto }, en juist die form staat
hier niet: WooCommerce geeft op dit eindpunt alleen form#order_review.
Daardoor liep de tabel van rand tot rand over de volle 1917px, viel de knop
terug op het paarse standaardblauw van WooCommerce en stond er geen
witruimte onder de koptekst.
Hieronder krijgt de pagina dezelfde maatvoering, knop, tabel en
betaalmethodenlijst als /checkout. De waarden zijn van die pagina
overgenomen: tabelrand #c2cad8, kop #c2cad8, knop #7f9c90, lijstrand
#dddddd, icoon 32x24. */
body.woocommerce-order-pay div.woocommerce {
box-sizing: border-box;
max-width: 1080px;
margin: 0 auto;
padding: 40px 20px 60px;
}
body.woocommerce-order-pay form#order_review {
margin: 0;
}
body.woocommerce-order-pay table.shop_table {
width: 100%;
margin-bottom: 24px;
border: 1px solid #c2cad8;
border-collapse: collapse;
background: #ffffff;
font-size: 14px;
}
body.woocommerce-order-pay table.shop_table th {
padding: 10px;
border-bottom: 1px solid #c2cad8;
background: #c2cad8;
font-size: 14px;
font-weight: 700;
text-align: left;
}
body.woocommerce-order-pay table.shop_table td {
padding: 10px;
border-bottom: 1px solid #c2cad8;
font-size: 14px;
}
body.woocommerce-order-pay ul.wc_payment_methods {
margin: 0 0 20px;
padding: 0;
border: 1px solid #dddddd;
background: #ffffff;
list-style: none;
}
body.woocommerce-order-pay ul.wc_payment_methods > li {
display: flex;
align-items: center;
margin: 0;
padding: 10px 12px;
border-bottom: 1px solid #dddddd;
}
body.woocommerce-order-pay ul.wc_payment_methods > li:last-child {
border-bottom: 0;
}
body.woocommerce-order-pay ul.wc_payment_methods > li label {
display: flex;
align-items: center;
gap: 12px;
padding: 0;
color: #333333;
font-size: 16px;
font-weight: 500;
}
body.woocommerce-order-pay ul.wc_payment_methods > li img {
width: 32px;
height: 24px;
max-width: 40px;
margin: 0;
object-fit: contain;
vertical-align: middle;
}
/* De knop heet hier niet place_order maar is de enige verzendknop in het
formulier, dus hij wordt op het formulier zelf aangewezen. */
body.woocommerce-order-pay form#order_review .button,
body.woocommerce-order-pay form#order_review input[type="submit"],
body.woocommerce-order-pay form#order_review button[type="submit"] {
padding: 10px 15px;
border: 1px solid #7f9c90;
border-radius: 0;
background: #7f9c90;
color: #ffffff;
font-size: 14px;
font-weight: 400;
text-transform: none;
}
body.woocommerce-order-pay form#order_review .button:hover,
body.woocommerce-order-pay form#order_review input[type="submit"]:hover,
body.woocommerce-order-pay form#order_review button[type="submit"]:hover {
border-color: #6d8a7e;
background: #6d8a7e;
}
/* ==== PRIMECOOK BETAALPAGINA NA MISLUKTE BETALING EINDE ==== */
/* ==== PRIMECOOK EIGEN OPDRUK START ==== */
/* Hoort bij snippet 219: de uploader en de kijkdoos op producten in de
categorie bedrukte-items. Staat los van .pc-pers, de tekstpersonalisatie
van de pannen - die twee mogen elkaar niet raken. */
.pc-bedruk {
margin: 24px 0;
padding: 20px;
border: 1px solid #c2cad8;
background: #ffffff;
}
.pc-bedruk-kop {
margin: 0 0 6px;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
}
.pc-bedruk-tekst {
margin: 0 0 14px;
font-size: 15px;
font-weight: 300;
line-height: 1.5;
color: #333333;
}
.pc-bedruk-kies {
display: inline-block;
cursor: pointer;
}
.pc-bedruk-kies-knop {
display: inline-block;
padding: 10px 15px;
background: #7f9c90;
color: #ffffff;
font-size: 14px;
}
.pc-bedruk-kies:hover .pc-bedruk-kies-knop {
background: #6d8a7e;
}
/* Het echte invoerveld blijft bereikbaar voor toetsenbord en schermlezer,
maar wordt niet getoond; de span erboven is de zichtbare knop. */
.pc-bedruk-invoer {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.pc-bedruk-melding {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.4;
min-height: 20px;
}
.pc-bedruk-melding.is-fout {
color: #b32d2e;
}
.pc-bedruk-melding.is-let-op {
color: #b26200;
}
.pc-bedruk-melding.is-goed {
color: #1d7a46;
}
/* De kijkdoos: de productfoto met daarop het drukvlak. */
.pc-bedruk-doek {
position: relative;
margin: 14px 0;
max-width: 420px;
line-height: 0;
}
.pc-bedruk-product {
display: block;
width: 100%;
height: auto;
}
.pc-bedruk-vlak {
position: absolute;
overflow: hidden;
border: 1px dashed #7f9c90;
background: rgba(127, 156, 144, 0.06);
}
.pc-bedruk-opdruk {
position: absolute;
left: 50%;
top: 50%;
width: 60%;
height: auto;
transform: translate(-50%, -50%);
cursor: grab;
touch-action: none;
user-select: none;
}
.pc-bedruk-opdruk:active {
cursor: grabbing;
}
.pc-bedruk:not(.heeft-opdruk) .pc-bedruk-opdruk {
display: none;
}
/* Zolang er niets gekozen is, hebben de schaalknop en de wisknop geen doel. */
.pc-bedruk:not(.heeft-opdruk) .pc-bedruk-knoppen,
.pc-bedruk:not(.heeft-opdruk) .pc-bedruk-hint {
display: none;
}
.pc-bedruk-knoppen {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.pc-bedruk-schaal-regel {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.pc-bedruk-schaal {
width: 180px;
}
.pc-bedruk-wissen {
padding: 0;
border: 0;
background: none;
color: #8a8a89;
font-size: 14px;
text-decoration: underline;
cursor: pointer;
}
.pc-bedruk-hint {
margin: 10px 0 0;
font-size: 13px;
font-weight: 300;
line-height: 1.4;
color: #8a8a89;
}
/* Het miniatuurtje bij de regel in de winkelmand. */
.pc-bedruk-mand-beeld {
display: inline-block;
width: 34px;
height: 34px;
margin-right: 6px;
object-fit: cover;
vertical-align: middle;
border: 1px solid #c2cad8;
}
/* ==== PRIMECOOK EIGEN OPDRUK EINDE ==== */
/* ==== PRIMECOOK MEGAMENU VANGNET START ==== */
/* De kolommen hierboven hebben vaste breedtes in pixels. Dat geeft overal even
grote tussenruimtes, maar het werkt alleen zolang het paneel breed genoeg
is: 206 + 32 + 345 + 32 + 206 links, plus 211 rechts, plus 54 voor rand en
binnenmarge is 1086px. Knijpt max-width: calc(100vw - 40px) het paneel
daaronder, dan past Messen & Snijplanken niet meer naast de eerste twee en
valt die kolom omlaag - met Cadeau-ideeen ernaast en Sale daar weer onder.
Precies de rommelige drietrapsindeling die gemeld werd.
Het hoofdmenu hoort onder 1200px helemaal te verdwijnen ten gunste van
.pc-mobilemenu, en in de metingen gebeurt dat ook. Maar als het menu daar om
welke reden dan ook toch verschijnt - een smal venster, een zijpaneel in de
browser, een afwijkende zoomstand - dan mag de indeling niet uit elkaar
vallen. Daarom hier breedtes in procenten: vijf keer 20 procent is altijd
precies vol, dus de rij kan niet meer afbreken. Een lang label loopt dan
over twee regels, en dat is netter dan kolommen die omlaag vallen. */
@media (max-width: 1199px) {
.pc-mainmenu li.pc-mega > ul.sub-menu > li,
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(2),
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(4),
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(5) {
box-sizing: border-box;
float: left;
clear: none;
width: 20%;
margin: 0;
padding-right: 16px;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:last-child {
padding-right: 0;
}
}
/* ==== PRIMECOOK MEGAMENU VANGNET EINDE ==== */
@media (min-width: 1200px) {
.pc-mainmenu li.pc-mega > ul.sub-menu {
box-sizing: border-box;
width: 1120px !important;
max-width: calc(100vw - 80px) !important;
right: -40px !important;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(n) {
float: left !important;
clear: none !important;
box-sizing: border-box;
width: 20% !important;
margin: 0 !important;
padding: 0 18px 0 0 !important;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(2) {
width: 30% !important;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(4) {
width: 18% !important;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(5) {
width: 12% !important;
padding-right: 0 !important;
}
.pc-mainmenu li.pc-mega > ul.sub-menu > li > a,
.pc-mainmenu li.pc-mega > ul.sub-menu ul.sub-menu a {
white-space: normal !important;
}
}
@media (min-width: 1200px) {
.pc-mainmenu li.pc-mega > ul.sub-menu > li:nth-child(2) {
width: 22% !important;
}
}
/* ==== PRIMECOOK VOETTEKST AFSTAND VOORWAARDEN START ==== */
/* In de voettekst sluiten de blokken naadloos op elkaar aan: gemeten zit er
nul pixel tussen het laatste lijstitem en de volgende kop, zowel bij
Informatie naar Partners als bij Shop naar Voorwaarden. Met twee blokken
onder elkaar viel dat niet op, maar sinds Shop erboven staat loopt de lijst
met categorieen zonder pauze over in Voorwaarden. Een regelhoogte ruimte
zet de twee uit elkaar.
Alleen deze kop krijgt de ruimte, zoals gevraagd. Wil je hetzelfde bij
Partners, dan kan .elementor-element-18e1d214 erbij. */
.elementor-element-a88798c {
margin-top: 24px;
}
/* ==== PRIMECOOK VOETTEKST AFSTAND VOORWAARDEN EINDE ==== */
/* ==== PRIMECOOK REVIEWSLIDER HOOGTE START ==== */
/* De slider had een vaste hoogte van 196px (style.css regel 1394) terwijl de
inhoud 223px nodig heeft: naam, sterren, datum, drie regels tekst en de
link naar Google. De laatste regel viel daardoor weg, midden in de zin.
De reviews staan absoluut binnen de slider, dus de slider kon niet
meegroeien - een absoluut kind telt niet mee voor de hoogte van de ouder.
In plaats van een nieuwe vaste hoogte te kiezen, die per breekpunt weer
anders uitvalt, komt de actieve review terug in de normale stroom. Daarmee
bepaalt hij zelf de hoogte van de slider, op elke schermbreedte. De
inactieve reviews blijven absoluut en liggen er onzichtbaar overheen.
De tekst blijft op drie regels staan (-webkit-line-clamp), zoals hij al
bedoeld was; nu is die derde regel ook echt te zien. */
.pc-reviews-slider {
height: auto;
min-height: 0;
}
.pc-review.is-actief {
position: relative;
inset: auto;
}
/* ==== PRIMECOOK REVIEWSLIDER HOOGTE EINDE ==== */
/* ==== PRIMECOOK CATEGORIE FAQ LETTERTYPE START ==== */
/* Het FAQ-blok op categoriepagina's stond in een ander lettertype dan de
tekst eromheen. Op primecook.up.agency/grillpan-pfas-vrij viel dat op:
.pc-cat-ondertekst h2/p = Roboto 24/500 en 18/300
.pc-cat-faq h2 = -apple-system 24/500
.pc-cat-faq summary = -apple-system 17/300
.pc-cat-faq p = -apple-system 18/300
.pc-cat-faq h3 = Roboto 20/400
Het lettertype van de site komt niet uit body - die staat op de
systeemstapel - maar uit de typografie van de Elementor-container. Bij de
container met de ondertekst is die ingesteld, bij de container met het
FAQ-blok niet. Alles daarbinnen viel daardoor terug op de systeemstapel.
Alleen de vraagtekst in h3 ontsnapte, want die heeft een eigen regel.
Een regel op het blok is genoeg: de rest erft mee. */
.pc-cat-faq {
font-family: 'Roboto', sans-serif;
}
/* ==== PRIMECOOK CATEGORIE FAQ LETTERTYPE EINDE ==== */
/* ==== PRIMECOOK CATEGORIE INTROKOP START ==== */
/* De kop boven een categoriebeschrijving is op de ene pagina een h1 en op de
andere een h2. Dat komt niet uit het sjabloon maar uit de beschrijving van
de categorie zelf, die een-op-een is overgenomen van de oude site: zes
categorieen beginnen met een h1, acht met een h2.
Lettertype, grootte en gewicht waren al gelijk - een proefstring rendert op
beide pagina's exact 262,89px breed - maar de regelafstand en de ondermarge
verschilden, en dat zie je:
h1 24px / 43.2px marge onder 9.6px
h2 24px / 33.6px marge onder 0
Hieronder krijgen beide dezelfde maatvoering, die van de h1. Welke tag het
is blijft onaangeroerd; dat is een inhoudelijke keuze, geen opmaakkwestie. */
/* !important is hier nodig, niet uit gemakzucht: de bestaande regel die de
h2 op 33.6px zet, is zelf als !important geschreven. Een gewone regel
verliest daar altijd van, ook als hij later in het bestand staat - getest:
dezelfde selector achteraan toegevoegd liet 33.6px staan, met !important
werd het 43.2px. */
.pc-cat-desc-inner h1,
.pc-cat-desc-inner h2 {
line-height: 43.2px !important;
margin: 0 0 9.6px !important;
}
/* ==== PRIMECOOK CATEGORIE INTROKOP EINDE ==== */
/* ==== PRIMECOOK FAQ VORMGEVING START ==== */
/* De vragenlijst was een doorlopend groen vlak met haarlijnen ertussen: het
groen zat op .pc-faq-blok en elke vraag had alleen een border-bottom. Dat
las als onderstreping en liet de lijst als een blok ogen in plaats van als
losse vragen. Verder stond het antwoord in #333 op groen, begon het 5px
verder dan de vraag, en was de vraagtekst (20px) groter dan het klikbare
kopje eromheen (17px).
Nu: het groen verhuist naar de vraag zelf, dus elke vraag is een eigen
kaart met ruimte ertussen. De haarlijn is weg, de binnenmarges zijn ruimer,
vraag en antwoord beginnen allebei op 22px en het antwoord is wit.
De pijl volgt de nieuwe rechtermarge; zijn verticale centrering en de
180-graden draai bij openen blijven zoals ze waren. */
.pc-faq-blok {
padding: 0;
border-radius: 0;
background: none;
}
.pc-faq-item {
margin: 0 0 10px;
border: 0;
border-radius: 5px;
background: #7f9c90;
overflow: hidden;
}
.pc-faq-item:last-child {
margin-bottom: 0;
}
.pc-faq-vraag {
padding: 16px 52px 16px 22px;
transition: background 0.15s ease-out;
cursor: pointer;
}
.pc-faq-vraag:hover {
background: rgba(255, 255, 255, 0.07);
}
/* Ook hier !important, en om dezelfde reden als bij het antwoord: het
blogsjabloon zet in artikelen body.single-post .page-content h3 op 18px
met !important. De vraag is een h3, dus zonder tegenwicht werd hij in
artikelen 18px terwijl hij op /faq 17px is. */
.pc-faq-blok .pc-faq-item .pc-faq-vraag .pc-faq-vraagtekst {
margin: 0 !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
color: #ffffff !important;
}
.pc-faq-pijl {
right: 22px;
}
/* Zelfde linkermarge als de vraag, zodat de tekst doorloopt op een lijn.
Hier staat !important op een handvol eigenschappen, en wel omdat de
bestaande regels in dit bestand dat zelf ook doen: .pc-faq-antwoord heeft
padding !important, en .pc-faq-antwoord p heeft kleur, grootte en padding
alle drie !important. Zonder tegengewicht blijft het antwoord donker, 18px
en 5px ingesprongen. Alleen die eigenschappen krijgen het, de rest niet. */
.pc-faq-antwoord {
padding: 0 52px 18px 22px !important;
color: #ffffff;
font-size: 16px;
line-height: 1.65;
}
.pc-faq-antwoord p,
.pc-faq-antwoord li,
.pc-faq-antwoord strong {
color: #ffffff !important;
}
.pc-faq-blok .pc-faq-item .pc-faq-antwoord p {
margin: 0 0 10px;
padding: 0 !important;
font-size: 16px !important;
line-height: 1.65 !important;
}
.pc-faq-antwoord ul {
margin: 0 0 10px;
padding-left: 20px;
}
.pc-faq-antwoord p:last-child,
.pc-faq-antwoord ul:last-child {
margin-bottom: 0;
}
.pc-faq-antwoord a {
color: #ffffff;
text-decoration: underline;
}
/* ==== PRIMECOOK FAQ VORMGEVING EINDE ==== */
/* ==== PRIMECOOK PRODUCT VARIANTVERWIJZING START ==== */
/* Knop onder de bestelknop die heen en weer linkt tussen de gewone
en de personaliseerbare uitvoering van hetzelfde product. */
.pc-prod-variant {
margin: 16px 0 0;
}
.pc-prod-variant-tekst {
margin: 0 0 8px !important;
padding: 0 !important;
font-family: 'Roboto', sans-serif;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
color: #3d3d3c !important;
}
.pc-prod-variant-knop {
display: block;
box-sizing: border-box;
width: 100%;
padding: 10px 15px;
border: 1px solid #7f9c90;
background: #ffffff;
color: #7f9c90 !important;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
transition: background-color .15s ease-out, color .15s ease-out;
}
.pc-prod-variant-knop::after {
content: ' \2192';
}
.pc-prod-variant-knop:hover,
.pc-prod-variant-knop:focus {
background: #7f9c90;
color: #ffffff !important;
}
/* ==== PRIMECOOK PRODUCT VARIANTVERWIJZING EINDE ==== */
/* ==== PRIMECOOK EIGEN OPDRUK DRAAIEN START ==== */
/* Regel onder 'Grootte' waarmee de klant de opdruk kan draaien. */
.pc-bedruk-hoek {
width: 140px;
}
.pc-bedruk-hoek-waarde {
min-width: 44px;
font-size: 14px;
font-variant-numeric: tabular-nums;
color: #3d3d3c;
}
.pc-bedruk-recht {
padding: 0;
border: 0;
background: none;
color: #8a8a89;
font-size: 14px;
text-decoration: underline;
cursor: pointer;
}
.pc-bedruk:not(.heeft-opdruk) .pc-bedruk-hoek,
.pc-bedruk:not(.heeft-opdruk) .pc-bedruk-recht {
opacity: .45;
pointer-events: none;
}
/* ==== PRIMECOOK EIGEN OPDRUK DRAAIEN EINDE ==== */
/* ==== PRIMECOOK STANDAARDONTWERPEN START ==== */
/* Blok op de productpagina waarin de klant een kant-en-klaar ontwerp kiest
en alleen de tekst aanpast. Zie snippet 227. */
.pc-ontwerp {
margin: 0 0 20px;
padding: 18px 20px 16px;
border: 1px solid #e3e6e4;
border-radius: 5px;
background: #ffffff;
font-family: 'Roboto', sans-serif;
}
.pc-ontwerp-doek {
position: relative;
margin: 0 0 18px;
background: #f6f8f7;
border-radius: 4px;
overflow: hidden;
}
.pc-ontwerp-product {
display: block;
width: 100%;
height: auto;
}
.pc-ontwerp-vlak {
position: absolute;
border: 1px dashed rgba(127, 156, 144, .75);
}
.pc-ontwerp-beeld {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.pc-ontwerp-regel {
position: absolute;
transform: translate(-50%, -50%);
white-space: nowrap;
line-height: 1.15;
letter-spacing: .02em;
}
.pc-ontwerp-stap {
margin: 0 0 14px;
}
.pc-ontwerp-stapkop {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #3d3d3c !important;
}
.pc-ontwerp-nummer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #7f9c90;
color: #ffffff;
font-size: 14px;
}
.pc-ontwerp-keuze {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pc-ontwerp-tegel {
display: block;
width: 129px;
padding: 8px;
border: 1px solid #e3e6e4;
border-radius: 4px;
background: #ffffff;
cursor: pointer;
text-align: center;
transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.pc-ontwerp-tegel:hover {
border-color: #7f9c90;
}
.pc-ontwerp-tegel.is-gekozen {
border-color: #7f9c90;
box-shadow: 0 0 0 1px #7f9c90;
}
.pc-ontwerp-tegelbeeld {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90px;
padding: 0 4px;
background: #f6f8f7;
border-radius: 3px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
.pc-ontwerp-tegelnaam {
display: block;
margin: 6px 0 0;
font-size: 12px;
color: #3d3d3c;
}
.pc-ontwerp-veld {
display: block;
margin: 0 0 10px;
}
.pc-ontwerp-veldnaam {
display: block;
margin: 0 0 4px;
font-size: 14px;
color: #3d3d3c;
}
.pc-ontwerp-invoerrij {
display: flex;
align-items: stretch;
border: 1px solid #d8dcda;
border-radius: 4px;
overflow: hidden;
}
.pc-ontwerp-invoer {
flex: 1 1 auto;
min-width: 0;
padding: 9px 12px;
border: 0;
font-size: 15px;
font-family: inherit;
color: #3d3d3c;
}
.pc-ontwerp-invoer:focus {
outline: none;
}
.pc-ontwerp-teller {
display: flex;
align-items: center;
padding: 0 12px;
border-left: 1px solid #d8dcda;
background: #f6f8f7;
font-size: 13px;
color: #8a8a89;
font-variant-numeric: tabular-nums;
}
.pc-ontwerp-leeg,
.pc-ontwerp-kosten,
.pc-ontwerp-logo {
margin: 0 0 6px !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #8a8a89 !important;
}
.pc-ontwerp-logo a {
color: #7f9c90;
}
@media (max-width: 520px) {
.pc-ontwerp-tegel { width: calc(50% - 5px); }
}
/* ==== PRIMECOOK STANDAARDONTWERPEN EINDE ==== */
/* ==== PRIMECOOK STANDAARDONTWERPEN OP DE FOTO START ==== */
/* Het voorbeeld staat niet meer in het keuzeblok maar over de eerste foto
van de productgalerij. De laag volgt precies de afmetingen van die foto. */
.pc-ontwerp-laag {
position: absolute;
pointer-events: none;
z-index: 2;
}
.pc-ontwerp-laag[hidden] {
display: none;
}
.pc-ontwerp-laag .pc-ontwerp-vlak {
position: absolute;
border: 1px dashed rgba(255, 255, 255, .95);
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(61, 61, 60, .14);
}
.pc-ontwerp-laag .pc-ontwerp-beeld {
position: absolute;
transform: translate(-50%, -50%);
object-fit: contain;
}
.pc-ontwerp-laag .pc-ontwerp-regel {
position: absolute;
transform: translate(-50%, -50%);
white-space: nowrap;
line-height: 1.15;
letter-spacing: .02em;
}
/* Kleurkeuze onder de tekstvelden. */
.pc-ontwerp-kleurrij {
display: block;
margin: 12px 0 0;
}
.pc-ontwerp-kleurrij[hidden] {
display: none;
}
.pc-ontwerp-kleurnaam {
font-weight: 400;
color: #8a8a89;
}
.pc-ontwerp-stalen {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 0;
}
.pc-ontwerp-staal {
width: 26px;
height: 26px;
padding: 0;
border: 1px solid #d8dcda;
border-radius: 4px;
cursor: pointer;
transition: box-shadow .15s ease-out, border-color .15s ease-out;
}
.pc-ontwerp-staal:hover {
border-color: #7f9c90;
}
.pc-ontwerp-staal.is-gekozen {
border-color: #7f9c90;
box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 1px #7f9c90;
}
.pc-ontwerp-tegelicoon {
display: block;
width: 129px;
height: auto;
max-height: 100%;
margin: 0 auto;
object-fit: contain;
filter: drop-shadow(0 0 1px rgba(61, 61, 60, .45));
}
/* ==== PRIMECOOK STANDAARDONTWERPEN OP DE FOTO EINDE ==== */
/* ==== PRIMECOOK ONTWERPEN KLEINE CORRECTIES START ==== */
/* Het tekentellertje past niet in twee regels; hij hoort op een lijn. */
.pc-ontwerp-teller {
white-space: nowrap;
flex: 0 0 auto;
}
/* Een wit ontwerp valt weg op een lichte tegel. Daarom krijgt de miniatuur
dan een doek in de kleur van het textiel, net als in het echt. */
.pc-ontwerp-tegelbeeld.op-stof {
background-color: #9db0a6;
}
.pc-ontwerp-tegelbeeld.op-stof .pc-ontwerp-tegelicoon {
filter: none;
}
/* ==== PRIMECOOK ONTWERPEN KLEINE CORRECTIES EINDE ==== */
/* ==== PRIMECOOK RICHTING VAN DE OPDRUK START ==== */
.pc-ontwerp-draairij { display: block; margin: 10px 0 0; }
.pc-ontwerp-draaiknoppen { display: flex; gap: 6px; margin: 4px 0 0; }
.pc-ontwerp-draai { flex: 1 1 0; padding: 7px 6px; border: 1px solid #e3e6e4; border-radius: 4px; background: #ffffff; font-size: 13px; color: #3d3d3c; cursor: pointer; }
.pc-ontwerp-draai:hover { border-color: #7f9c90; }
.pc-ontwerp-draai.is-gekozen { border-color: #7f9c90; box-shadow: 0 0 0 1px #7f9c90; font-weight: 600; }
/* ==== PRIMECOOK RICHTING VAN DE OPDRUK EINDE ==== */
/* ==== PRIMECOOK FOOTER: KEURINGSDIENST OVER DE VOLLE BREEDTE START ====
De banner hangt in een container van 1080px. Met negatieve marges loopt hij
door tot de randen van het venster. De footer krijgt overflow-x: clip, zodat
de paar pixels verschil met de schuifbalk geen horizontale balk opleveren.
Clip en niet hidden: hidden zou van de footer een scrollcontainer maken. */
.elementor-location-footer { overflow-x: clip; }
.pc-boom.elementor-widget-image {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 40px !important;
margin-bottom: 40px !important;
}
.pc-boom.elementor-widget-image > .elementor-widget-container,
.pc-boom.elementor-widget-image a { display: block; }
.pc-boom.elementor-widget-image img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
}
/* Het blok eronder brengt zelf 50px mee. Die vervalt hier, anders staat de
banner niet gelijk tussen zijn twee buren in. */
.pc-boom.elementor-widget-image + .pc-logobox-images { margin-top: 0 !important; }
@media only screen and (max-width: 1024px) {
.pc-boom.elementor-widget-image { margin-top: 32px !important; margin-bottom: 32px !important; }
}
/* Binnen deze breedte staan er al maten op elke afbeeldingswidget in de
witte footer (95% breed, 150px max). Die gelden hier niet. */
@media only screen and (max-width: 770px) {
.pc-footerwhite .pc-boom.elementor-widget-image,
.pc-boom.elementor-widget-image {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.pc-footerwhite .pc-boom.elementor-widget-image img,
.pc-boom.elementor-widget-image img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
.pc-boom.elementor-widget-image + .pc-logobox-images { margin-top: 0 !important; }
/* De badge erboven heeft op deze breedte een eigen marge van 5 procent.
Die telt op bij de ruimte boven de banner en maakt het beeld scheef. */
.pc-footerwhite .pc-bomenlink.elementor-widget-image { margin-bottom: 0 !important; }
}
/* ==== PRIMECOOK FOOTER: KEURINGSDIENST OVER DE VOLLE BREEDTE EINDE ==== */