/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ==========================================================================
   Coolcards maatwerk

   Uitgangspunten:
   - Tokens komen uit de echte huisstijl. Groen is de merkkleur en de actiekleur,
     geel is accent, bijna-zwart is structuur.
   - Blokken die wij zelf uitprinten hebben een cc-prefix. Flatsome-markup raken
     we zo min mogelijk aan, zodat een theme-update weinig kan breken.
   - Donkere tekst op groen: wit op #31c600 haalt maar ~2,3:1 contrast.
   ========================================================================== */

:root {
	--cc-inkt: #221f20;
	--cc-inkt-zacht: #4a4643;
	--cc-grijs: #6f6a63;
	--cc-groen: #31c600;
	--cc-groen-diep: #2aa800;
	--cc-geel: #fbcc44;
	--cc-geel-diep: #fcce31;
	--cc-mist: #f1efec;
	--cc-lijn: #e2dfda;
	--cc-lijn-sterk: #c9c4bc;

	/* De site laadt cubano/courier via de plugin Use Any Font. */
	--cc-kop: 'cubano', Helvetica, Arial, sans-serif;
	--cc-tekst: 'courier', Helvetica, Arial, sans-serif;
	--cc-nadruk: 'courier-bold', 'courier', Helvetica, Arial, sans-serif;
}

/* --- knoppen ------------------------------------------------------------- */

.cc-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--cc-nadruk);
	font-size: 15px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 14px 26px;
	border: 2px solid var(--cc-groen);
	background: var(--cc-groen);
	color: var(--cc-inkt);
	text-decoration: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.cc-knop:hover,
.cc-knop:focus {
	background: var(--cc-groen-diep);
	border-color: var(--cc-groen-diep);
	color: var(--cc-inkt);
}

.cc-knop--leeg {
	background: transparent;
	border-color: var(--cc-inkt);
	color: var(--cc-inkt);
}

.cc-knop--leeg:hover,
.cc-knop--leeg:focus {
	background: var(--cc-inkt);
	border-color: var(--cc-inkt);
	color: #fff;
}

/* --- zoekbalk in de hero -------------------------------------------------
   Bewust gewone HTML in de UX Builder en geen Flatsome-element: dat verschilt
   per themeversie. Zie homepage-shortcodes.txt.
   ------------------------------------------------------------------------- */

.cc-zoek {
	display: flex;
	max-width: 520px;
	margin: 0 0 6px;
}

.cc-zoek input[type="search"] {
	flex: 1;
	min-width: 0;
	font-family: var(--cc-tekst);
	font-size: 16px;
	padding: 14px 16px;
	margin: 0;
	height: auto;
	border: 2px solid var(--cc-groen);
	border-right: 0;
	border-radius: 2px 0 0 2px;
	background: #fff;
	color: var(--cc-inkt);
	box-shadow: none;
}

.cc-zoek button {
	font-family: var(--cc-nadruk);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 14px 22px;
	margin: 0;
	border: 2px solid var(--cc-groen);
	background: var(--cc-groen);
	color: var(--cc-inkt);
	border-radius: 0 2px 2px 0;
	cursor: pointer;
	line-height: 1.2;
}

.cc-zoek button:hover,
.cc-zoek button:focus {
	background: var(--cc-groen-diep);
	border-color: var(--cc-groen-diep);
	color: var(--cc-inkt);
}

@media (max-width: 549px) {
	.cc-zoek {
		flex-wrap: wrap;
	}

	.cc-zoek input[type="search"] {
		flex-basis: 100%;
		border-right: 2px solid var(--cc-groen);
		border-radius: 2px;
		margin-bottom: 8px;
	}

	.cc-zoek button {
		width: 100%;
		border-radius: 2px;
	}
}

/* --- positieve inline validatie ------------------------------------------
   Groene rand plus vinkje zodra een veld klopt. Geen rode staten tijdens het
   typen: bevestigen werkt, corrigeren jaagt mensen weg.
   Zie inc/formulier-validatie.php en assets/js/formulier-validatie.js.
   ------------------------------------------------------------------------- */

.cc-ok input,
.cc-ok select,
.cc-ok textarea {
	border-color: var(--cc-groen) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2331c600' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
	/* ruimte voor het vinkje, zodat lange invoer er niet onder schuift */
	padding-right: 40px !important;
	transition: border-color .18s ease;
}

/* Selects hebben al een eigen pijltje rechts; daar zetten we het vinkje links
   ervan in plaats van eroverheen. */
.cc-ok select {
	background-position: right 34px center;
	padding-right: 62px !important;
}

/* --- registratieformulier: korte velden naast elkaar ----------------------
   Vijftien velden onder elkaar is een lange lat. Voornaam/Achternaam,
   Postcode/Stad en Telefoonnummer/KvK-nummer zijn korte velden en staan
   vanaf 600px per twee naast elkaar; alles ervoor en erna blijft volle
   breedte. Op mobiel stapelt de grid vanzelf weer (huisregel: niet
   samenknijpen). Het verborgen zipcode-veld telt in de grid niet mee,
   display:none-items slaat auto-placement over. */
@media (min-width: 600px) {
	.um-register .um-col-1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
	}

	.um-register .um-col-1 > .um-field {
		grid-column: 1 / -1;
	}

	.um-register .um-col-1 > .um-field-billing_first_name,
	.um-register .um-col-1 > .um-field-billing_last_name,
	.um-register .um-col-1 > .um-field-billing_postcode,
	.um-register .um-col-1 > .um-field-billing_city,
	.um-register .um-col-1 > .um-field-billing_phone,
	.um-register .um-col-1 > .um-field-kvk-nummer {
		grid-column: auto;
	}
}

/* Suggestie bij een vertypt maildomein. Geen foutmelding maar een vraag,
   met een knop die het meteen goedzet. */
.cc-typo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 7px;
	padding: 9px 12px;
	background: var(--cc-geel);
	border: 1px solid var(--cc-inkt);
	font-size: 14px;
	line-height: 1.4;
	color: var(--cc-inkt);
}

.cc-typo__knop {
	font-family: var(--cc-nadruk);
	font-size: 13px;
	padding: 5px 12px;
	border: 1px solid var(--cc-inkt);
	background: #fff;
	color: var(--cc-inkt);
	cursor: pointer;
	border-radius: 2px;
}

.cc-typo__knop:hover {
	background: var(--cc-inkt);
	color: #fff;
}

@media (max-width: 549px) {
	.cc-typo {
		flex-direction: column;
		align-items: flex-start;
	}

	.cc-typo__knop {
		width: 100%;
	}
}

/* --- prijsstatus, uitgelogd --------------------------------------------- */

.cc-prijsslot {
	background: var(--cc-mist);
	border: 1px solid var(--cc-lijn);
	padding: 11px 13px;
	margin: 0;
}

.cc-prijsslot p {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

.cc-prijsslot a {
	font-family: var(--cc-nadruk);
	text-decoration: none;
	border-bottom: 2px solid var(--cc-groen);
}

.cc-kassa {
	border: 2px solid var(--cc-inkt);
	padding: 20px;
	background: #fff;
	margin-bottom: 20px;
}

.cc-kassa--slot {
	background: var(--cc-mist);
}

.cc-kassa h2 {
	font-family: var(--cc-kop);
	font-size: 20px;
	line-height: 1.15;
	margin: 0 0 8px;
}

.cc-kassa p {
	font-size: 15px;
	color: var(--cc-inkt-zacht);
	margin: 0;
}

/* Gestapeld: "Account aanvragen" past naast "Inloggen" niet op een regel in
   deze kolombreedte, en zo staat de primaire actie duidelijk voorop. */
.cc-kassa__acties {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.cc-kassa__acties .cc-knop {
	width: 100%;
}

/*
 * De plugin Hide Price Until Login zet een losse regel "Login om te bestellen"
 * onder het bestelblok. Die zegt hetzelfde als ons prijsslot en stond op de
 * oude pagina naast een bestelknop die niet werkte.
 *
 * Alleen verbergen, niet de plugin uitschakelen: die verbergt ook de prijzen.
 * De plugin biedt geen hook om dit stuk apart uit te zetten, vandaar CSS.
 */
.single-product .ced_hpul_login_link,
.single-product .ced_hpul_login_message {
	display: none;
}

/* --- artikelnummer en verpakking ----------------------------------------- */

.cc-artnr,
.cc-bestel__art {
	display: block;
	font-family: var(--cc-nadruk);
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cc-grijs);
	margin: 0 0 4px;
}

.cc-bestel__art {
	font-size: 14px;
	letter-spacing: .08em;
	margin-bottom: 10px;
}

.cc-verpakking {
	display: block;
	font-size: 13px;
	color: var(--cc-grijs);
	line-height: 1.4;
}

.cc-perstuk {
	display: block;
	font-size: 13px;
	color: var(--cc-grijs);
	margin: 2px 0 0;
}

.single-product .cc-perstuk {
	font-size: 14px;
	margin: 0 0 14px;
}

/* --- feitentabel productpagina ------------------------------------------ */

.cc-feiten {
	border: 2px solid var(--cc-inkt);
	background: #fff;
	margin: 0 0 20px;
}

.cc-feiten > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--cc-lijn);
	font-size: 15px;
}

.cc-feiten > div:last-child {
	border-bottom: 0;
}

.cc-feiten span:first-child {
	color: var(--cc-grijs);
}

.cc-feiten span:last-child {
	font-family: var(--cc-nadruk);
	text-align: right;
}

/* --- geruststelling onder de bestelknop ---------------------------------- */

.cc-zeker {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--cc-lijn);
	font-size: 14px;
}

.cc-zeker li {
	display: flex;
	gap: 9px;
	padding: 4px 0;
	color: var(--cc-inkt-zacht);
	margin: 0;
}

.cc-zeker b {
	flex: none;
	color: var(--cc-inkt);
	font-family: var(--cc-nadruk);
	font-weight: 400;
}

.cc-stapinfo {
	font-size: 13px;
	color: var(--cc-grijs);
	margin: 10px 0 0;
	clear: both;
}

/* --- kop op de categoriepagina ------------------------------------------- */

.cc-catkop {
	margin: 0 0 22px;
}

.cc-catkop__meta {
	font-family: var(--cc-nadruk);
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cc-grijs);
	margin: 0 0 12px;
}

.cc-catkop__intro {
	max-width: 66ch;
	color: var(--cc-inkt-zacht);
}

.cc-catkop__intro p:last-child {
	margin-bottom: 0;
}

/*
 * De sorteerkeuze is op de huidige site onzichtbaar gemaakt met
 * ".woocommerce-ordering select{display:none}" in de plugin Simple Custom CSS
 * and JS (bestand 756.css). Hij wordt wel gerenderd, niemand ziet hem.
 *
 * Dit zet hem terug. De nette oplossing is die regel uit het plugin-bestand
 * halen; zie INSTALL.md. Zolang dat niet is gebeurd, wint deze regel op
 * specificiteit.
 */
.woocommerce-ordering select,
.shop-page-title ~ * .woocommerce-ordering select {
	display: inline-block;
}

.woocommerce-ordering select {
	font-family: var(--cc-tekst);
	font-size: 14px;
	padding: 8px 12px;
	border: 1px solid var(--cc-lijn-sterk);
	background: #fff;
	color: var(--cc-inkt);
}

/* --- productkaarten in de catalogus -------------------------------------- */

/* Gelijke kaarthoogtes, zodat de rij niet springt bij lange productnamen. */
.products .product-small .box-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/*
 * Nederlandse samenstellingen als "Rokersbenodigdheden" zijn lang en
 * onbreekbaar. Zonder dit duwen ze de kolom breder dan hij mag zijn.
 */
.products .product-title,
.cc-catkop h1,
.woocommerce-loop-category__title {
	overflow-wrap: break-word;
}

/* --- mobiel -------------------------------------------------------------- */

@media (max-width: 549px) {
	/* Vaste regel: knoppen op mobiel volle breedte en gestapeld. */
	.cc-knop {
		width: 100%;
		text-align: center;
	}

	.cc-feiten > div {
		flex-direction: column;
		gap: 2px;
	}

	.cc-feiten span:last-child {
		text-align: left;
	}

	.cc-zeker li {
		flex-direction: column;
		gap: 1px;
	}
}

/* ==========================================================================
   Homepage, header en footer, augustus 2026

   Deze regels stonden tijdens het bouwen in de plugin "Simple Custom CSS and
   JS" op backup.coolcards.nl (items 27512 en 27508). Ze horen bij de nieuwe
   homepage en bij de header- en footerinstellingen uit de Customizer, en staan
   hier zodat alles in een pakket meegaat naar de echte site.

   De opmaak leunt op klassen die in de UX Builder-shortcodes staan:
   cc-hero, cc-vertrouwen, cc-stappen, cc-cats, cc-prods (+ --nieuw / --actie),
   cc-kop en cc-voet. Verdwijnen die uit de shortcodes, dan valt de pagina terug
   op de standaardopmaak van Flatsome.
   ========================================================================== */

/* Coolcards, zoekbalk in de hero van de nieuwe homepage.
   Geplaatst via Simple Custom CSS and JS.

   De hero gebruikt bewust een gewoon HTML-formulier en geen Flatsome-element:
   dat laatste verschilt per themaversie, dit werkt altijd. Verhuist naar
   flatsome-child/style.css zodra dat theme live gaat.
*/

.cc-zoek {
	display: flex;
	max-width: 520px;
	margin: 0 0 6px;
}

.cc-zoek input[type="search"] {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	padding: 14px 16px;
	margin: 0;
	height: auto;
	border: 2px solid #31c600;
	border-right: 0;
	border-radius: 2px 0 0 2px;
	background: #fff;
	color: #221f20;
	box-shadow: none;
}

.cc-zoek button {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 14px 22px;
	margin: 0;
	border: 2px solid #31c600;
	background: #31c600;
	color: #221f20;
	border-radius: 0 2px 2px 0;
	cursor: pointer;
	line-height: 1.2;
}

.cc-zoek button:hover {
	background: #2aa800;
	border-color: #2aa800;
	color: #221f20;
}

@media (max-width: 549px) {
	.cc-zoek { flex-wrap: wrap; }
	.cc-zoek input[type="search"] {
		flex-basis: 100%;
		border-right: 2px solid #31c600;
		border-radius: 2px;
		margin-bottom: 8px;
	}
	.cc-zoek button { width: 100%; border-radius: 2px; }
}

/* De hero loopt van rand tot rand. Flatsome begrenst .section-content op de
   sitebreedte (990px); voor deze ene sectie zetten we dat vrij, zoals de oude
   homepage dat ook deed met .home-hero. */
.cc-hero .section-content {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Topbalk: de drie punten naast elkaar, met een gele stip ervoor.
   De HTML zelf staat in Customizer > Header > Top Bar (een HTML-blok met
   <ul class="balk__punten">). Zonder deze opmaak toont WordPress het als een
   gewone opsomming onder elkaar, en wordt de balk 79px hoog. */

.header-top .balk__punten {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.3;
}

.header-top .balk__punten li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Flatsome hangt op sommige lijsten een eigen opsommingsteken via ::before. */
.header-top .balk__punten li::before {
  content: none;
}

.header-top .balk__punten .stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbcc44;
  flex: none;
}

@media (max-width: 849px) {
  .header-top .balk__punten {
    gap: 14px;
    font-size: 13px;
  }
}

/* Op een telefoon passen drie punten niet naast elkaar. Dan alleen de twee die
   er voor een nieuwe klant het meest toe doen, zodat de balk één regel blijft. */
@media (max-width: 549px) {
  .header-top .balk__punten {
    gap: 12px;
    font-size: 12px;
  }
  .header-top .balk__punten li:nth-child(2) {
    display: none;
  }
}

/* Zoekformulier in de groene band.
   Flatsome's "flat"-stijl geeft het veld een achtergrond van rgba(0,0,0,.03) en
   een rand van rgba(0,0,0,.09). Op wit valt dat nog mee, op de groene band is de
   placeholder daardoor bijna niet te lezen. Vandaar wit veld, echte rand, en een
   knop die eruitziet als een knop. Hoogte van 33 naar 46 zodat hij aan te tikken
   is, en de tekst van 13 naar 15px. */

.header-search-form-wrapper .searchform-wrapper .search-field {
  height: 46px;
  background: #fff;
  border: 2px solid #221f20;
  border-radius: 3px;
  color: #221f20;
  font-size: 15px;
  padding: 0 56px 0 14px;
  box-shadow: none;
}

.header-search-form-wrapper .searchform-wrapper .search-field::placeholder {
  color: #6f6a63;
  opacity: 1;
}

.header-search-form-wrapper .searchform-wrapper .search-field:focus {
  border-color: #221f20;
  box-shadow: 0 0 0 3px rgba(34, 31, 32, .22);
}

/* Flatsome legt de knopkolom met een negatieve marge over het veld heen. Dat is
   op de pixel afgestemd op de oude hoogte, dus hier vastzetten op de rechterrand. */
.header-search-form-wrapper .searchform-wrapper .flex-row > .flex-col:last-child {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  padding: 0;
  margin: 0;
}

.header-search-form-wrapper .searchform-wrapper .ux-search-submit {
  height: 40px;
  width: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  /* Flatsome zet .form-flat .button.icon op transparent met !important. Zonder
     hetzelfde middel blijft de knop onzichtbaar, want het icoon is wit. */
  background: #221f20 !important;
  border: 0;
  border-radius: 2px;
  color: #fff;
  box-shadow: none;
}

.header-search-form-wrapper .searchform-wrapper .ux-search-submit:hover {
  background: #3a3536 !important;
}

.header-search-form-wrapper .searchform-wrapper .ux-search-submit .icon-search {
  color: #fff;
}

/* Mobiel: het veld staat op een eigen regel onder het logo, dus volle breedte.
   16px is hier geen smaakkwestie, onder die maat zoomt iOS bij het aantikken in. */
@media (max-width: 849px) {
  .header-search-form-wrapper .searchform-wrapper {
    width: 100%;
  }
  .header-search-form-wrapper .searchform-wrapper .search-field {
    font-size: 16px;
    height: 48px;
  }
  .header-search-form-wrapper .searchform-wrapper .ux-search-submit {
    height: 42px;
  }
}

/* Categorie- en productraster op de homepage, richting het ontwerp.

   Flatsome tekent deze twee rasters zelf. De shortcodes zetten al het aantal
   kolommen en een vierkante beeldverhouding; hieronder gaat het alleen nog om
   de kaartvorm: een omlijnde kaart met de naam ónder het beeld in plaats van
   een tekstlaag eroverheen. */

/* ---------------------------------------------------------------- categorie */

/* Flatsome geeft de kaart de klasse box-badge, en die zet de tekstlaag over de
   foto met position:absolute. In het ontwerp staat de naam eronder. */
.cc-cats .box-category .box-text {
  position: static;
  padding: 11px 13px;
  background: #fff;
  border-top: 2px solid #221f20;
  opacity: 1;
}

.cc-cats .box-category {
  background: #fff;
  border: 2px solid #221f20;
}

.cc-cats .box-category .box-image {
  background: #fff;
}

/* Naam links, aantal rechts op dezelfde regel, zoals in het ontwerp. */
.cc-cats .box-category .box-text-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cc-cats .box-category .header-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: .04em;
  color: #221f20;
}

.cc-cats .box-category .count {
  margin: 0;
  flex: none;
  font-size: 11px;
  color: #6f6a63;
  white-space: nowrap;
}

/* De hover-laag van Flatsome donkert de hele kaart in. Op een omlijnde kaart
   met de naam eronder is dat te veel; alleen het beeld reageert nog. */
.cc-cats .box-category .box-image .image-cover {
  transition: opacity .2s;
}

.cc-cats .box-category:hover .box-image .image-cover {
  opacity: .82;
}

/* ----------------------------------------------------------------- producten */

/* Zonder vaste verhouding bepaalt de foto de kaarthoogte. In de Actie-sectie
   scheelde dat 173px tussen de hoogste en de laagste kaart. */
.cc-prods .product-small .box-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}

.cc-prods .product-small .box-image > div,
.cc-prods .product-small .box-image a {
  height: 100%;
}

.cc-prods .product-small .box-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.cc-prods .product-small .box {
  border: 2px solid #221f20;
  background: #fff;
}

.cc-prods .product-small .box-text {
  padding: 12px 13px 14px;
  border-top: 2px solid #221f20;
  text-align: left;
}

/* Een etiket linksboven op de kaart. Alle artikelen in deze twee secties komen
   uit de categorie Nieuw respectievelijk Actie, dus het etiket zegt niets wat
   niet uit de opbouw van de pagina zelf volgt. */
.cc-prods .product-small .col-inner {
  position: relative;
}

.cc-prods .product-small .col-inner::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 5px 9px;
  font-family: cubano, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1;
}

.cc-prods--nieuw .product-small .col-inner::before {
  content: "NIEUW";
  background: #221f20;
  color: #fff;
}

.cc-prods--actie .product-small .col-inner::before {
  /* De categorie heet sinds 21-08 "Sale"; het labeltje hoort mee te gaan.
     De klassenaam blijft --actie, want die hangt aan de slug /category/actie/
     en die is bewust niet veranderd. */
  content: "SALE";
  background: #fbcc44;
  color: #221f20;
}

/* Het prijsslot onderaan de kaart: één blok, niet los zwevende tekst. */
.cc-prods .cc-prijsslot {
  margin-top: 10px;
  padding: 8px 10px;
  background: #f1efec;
  border: 1px solid #d9d5cf;
}

.cc-prods .cc-prijsslot p {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

@media (max-width: 549px) {
  .cc-cats .box-category .box-text-inner {
    display: block;
  }
  .cc-cats .box-category .count {
    margin-top: 2px;
  }
}

/* ------------------------------------------------------------- sectiekoppen */

/* Titel op een eigen regel, daaronder de toelichting links en de verwijzing
   naar de volledige lijst rechts. Zonder die verwijzing loopt elke sectie dood
   op vier producten. */
.cc-kop .col-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 24px;
}

.cc-kop .col-inner > h2 {
  flex: 1 1 100%;
  margin-bottom: 6px;
}

.cc-kop .cc-kopnaar {
  flex: none;
  padding-bottom: 2px;
  border-bottom: 2px solid #fbcc44;
  font-family: cubano, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #221f20;
  text-decoration: none;
}

.cc-kop .cc-kopnaar:hover {
  border-bottom-color: #221f20;
}

@media (max-width: 640px) {
  .cc-kop .col-inner {
    display: block;
  }
  .cc-kop .cc-kopnaar {
    display: inline-block;
    margin-top: 10px;
  }
}

/* Lange categorienamen ("Grinders, Pipes en Bongs") duwden het aantal anders
   van de regel af. */
.cc-cats .box-category .box-text-inner {
  flex-wrap: wrap;
}

/* De toelichting is een blok-element en duwde de verwijzing anders naar de
   volgende regel zodra hij lang was (sectie "Zo bestelt u"). */
.cc-kop .col-inner > div {
  /* basis 0, niet auto: met auto krijgt een blok-element eerst zijn volle
     breedte en valt de verwijzing naar de volgende regel. */
  flex: 1 1 0;
  min-width: 0;
}

/* Namen van twee regels ("Telefoonaccessoires en Batterijen") maakten hun rij
   16px hoger dan de andere. */
.cc-cats .box-category .box-text {
  min-height: 80px;
}

/* ------------------------------------------------------------ stappenblok */

/* De rand staat op .col-inner, en die rekt niet mee met de kolom. Daardoor
   eindigden de vier kaarten op vier verschillende hoogtes (214, 246, 272 en
   272px) en liep het blok trapsgewijs af. */
.cc-stappen > .col > .col-inner {
  height: 100%;
}

/* ------------------------------------------------------------- taalkiezer */

/* Alleen het vlaggetje weg; de rest van WPML's schakelaar blijft zoals hij is.

   In het ontwerp staat hier "NL / EN". Dat kan hier niet: de schakelaar bevat
   maar een item (NL), omdat deze nieuwe homepage nog geen Engelse vertaling
   heeft. Zodra die er is, verschijnt EN vanzelf. Een eerdere poging om de
   uitklaplijst als vaste regel te tonen gaf een lege doos van 0px hoog. */
.header-top .header-language-dropdown .image-icon {
  display: none;
}

/* ------------------------------------------------------------------- hero */

/* De kop stond op 27px terwijl het ontwerp 44px heeft. Dat is het verschil
   tussen een kop en een regel tekst. */
.cc-hero h1 {
  font-size: 44px;
  line-height: 1.06;
  margin-bottom: 14px;
}

/* De herorij loopt van rand tot rand, maar de tekst hoort op dezelfde
   linkerlijn te staan als de topbalk, het logo, het menu en de sectiekoppen
   (195px bij 1440). De kolom had een vaste padding van 48px, dus de tekst stond
   147px te ver naar links. 50vw min de halve containerbreedte geeft precies die
   lijn (de container is 1050 breed), op elke schermbreedte, met 24px als
   ondergrens. */
@media (min-width: 850px) {
  .cc-hero .row > .col:first-child > .col-inner {
    padding-left: max(24px, calc(50vw - 576px)) !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 849px) {
  .cc-hero h1 {
    font-size: 32px;
  }
}

/* De foto is 1754x1788 en bepaalde in een kolom van 720px de hoogte van de hele
   hero: 720px in plaats van de 556px uit het ontwerp. */
@media (min-width: 850px) {
  .cc-hero .row > .col:last-child .img-inner,
  .cc-hero .row > .col:last-child .ux-image {
    height: 560px;
    padding-top: 0 !important;
  }
  .cc-hero .row > .col:last-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* De twee heroknoppen waren samen 538px breed in een kolom van 477 en vielen
   daardoor onder elkaar. In het ontwerp zijn ze 267 en 152 breed en staan ze
   naast elkaar. Verschil zat in de binnenmarge, niet in de tekst. */
@media (min-width: 850px) {
  .cc-hero .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-height: 56px;
    padding-left: 26px;
    padding-right: 26px;
    font-size: 14px;
    letter-spacing: .02em;
  }
}

/* ----------------------------------------------------------------- footer */

/* De onderste footerregel (privacy, voorwaarden, bouwer) valt buiten het
   footerblok en houdt de linkkleur van de site aan: bijna zwart op bijna zwart. */
.absolute-footer,
.absolute-footer a {
  color: rgba(255, 255, 255, .72);
}

.absolute-footer a:hover {
  color: #fbcc44;
}

/* -------------------------------------------------------- randen en maten */

/* De border-attributen op de kolommen van het stappenblok leveren op deze
   Flatsome-versie niets op: gemeten 0px aan alle vier de kanten, op zowel .col
   als .col-inner. Vandaar hier, als kader om het geheel plus scheidingslijnen
   ertussen, zoals in het ontwerp. */
.cc-stappen {
  border: 2px solid #221f20;
}

@media (min-width: 550px) {
  .cc-stappen > .col:not(:last-child) > .col-inner {
    border-right: 2px solid #221f20;
  }
}

/* Op een telefoon staan de blokken onder elkaar, dan is een lijn eronder de
   scheiding en geen lijn ernaast. */
@media (max-width: 549px) {
  .cc-stappen > .col:not(:last-child) > .col-inner {
    border-bottom: 2px solid #221f20;
  }
}

/* Lijn onder de menubalk, zoals in het ontwerp. */
.header-bottom {
  border-bottom: 2px solid #221f20;
}

/* Sectiekoppen stonden op 25,6px waar het ontwerp 36px heeft, en het menu op
   12,8px tegen 14px. */
#content .section h2 {
  font-size: 36px;
  line-height: 1.1;
}

.header-bottom-nav > li > a {
  font-size: 14px;
}

@media (max-width: 849px) {
  #content .section h2 {
    font-size: 27px;
  }
}

/* ------------------------------------------------------------ footerblok */

/* Het logobestand is de donkere versie; er bestaat geen witte. brightness(0)
   maakt hem eerst egaal zwart, invert(1) daarna wit, ongeacht de bronkleuren. */
.cc-voet__logo {
  width: 200px;
  height: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}

.cc-voet__kop {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fbcc44;
}

.cc-voet__lijst {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.9;
}

.cc-voet__lijst li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, .72);
}

.cc-voet__lijst a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
}

.cc-voet__lijst a:hover {
  color: #fbcc44;
}

.cc-voet .col {
  padding-bottom: 0;
}

@media (max-width: 549px) {
  .cc-voet .col + .col {
    padding-top: 26px;
  }
}

/* Flatsome kleurt in een dark-sectie alle koppen wit met .dark h4 (0,1,1), dus
   een enkele klasse verliest. Vandaar hier met de sectieklasse ervoor. */
.cc-voet .cc-voet__kop {
  color: #fbcc44;
}

/* Het thema geeft li's een eigen inspringing, waardoor de lijst 20px naast de
   kop begon in plaats van eronder. */
.cc-voet .cc-voet__lijst,
.cc-voet .cc-voet__lijst li {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

/* Scheidingslijn onder elk item, zoals in het ontwerp. */
.cc-voet .cc-voet__lijst li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.cc-voet .cc-voet__lijst li:last-child {
  border-bottom: 0;
}

/* Slotregel onder de drie kolommen. */
.cc-voet__slot {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
}

.cc-voet__slot .col {
  padding-bottom: 0;
}

.cc-voet__slot a {
  color: rgba(255, 255, 255, .55);
}

.cc-voet__slot a:hover {
  color: #fbcc44;
}

@media (max-width: 549px) {
  .cc-voet__slot .col:last-child {
    text-align: left;
    padding-top: 8px;
  }
}

/* De vertrouwensbalk was 30px hoger dan zijn inhoud: Flatsome geeft elke kolom
   standaard 30px marge onderaan, en dat viel op tegen het geel. */
.cc-vertrouwen .col {
  padding-bottom: 0;
}

/* Zeven menu-items passen net niet in de kolom van 1116px. Flatsome geeft elk
   item 5px marge aan beide kanten plus de padding van de link, samen 24px
   tussenruimte, en dat is voor een menu van 14px royaal.
   Terug naar 2px marge levert 22px over. Dat is bewust ruimer dan nodig: dit is
   de tweede keer dat het menu omvalt. De eerste keer was bij het bouwen, de
   tweede toen "Rokersbenodigheden" er een d bij kreeg, één letter van 9px.
   De padding van de link blijft 7px, want daar hangt de linkerlijn aan waar de
   topbalk en de sectiekoppen ook op staan.
   Let op: 22px is ongeveer twee letters. Komt er een categorie bij of wordt er
   een hernoemd, dan valt hij weer om. De duurzame oplossing is een korter
   menulabel voor "Grinders, Pipes & Bongs" (nu 214px, het breedste item);
   de categorie zelf mag zijn volledige naam houden. */
.header-bottom-nav > li > a {
  padding-left: 7px;
  padding-right: 7px;
}

.header-bottom-nav > li {
  margin-left: 4px;
  margin-right: 4px;
}

/* Winkelwagen van een ingelogde klant met een lege wagen: wel in de pagina,
   niet in beeld. Hij moet in de broncode blijven staan omdat WooCommerce hem
   tijdens het bezoek bijwerkt zonder de pagina te herladen; zie
   inc/winkelwagen.php. Voor een uitgelogde bezoeker wordt hij helemaal niet
   gerenderd, dus daar is geen regel voor nodig. */
body.cc-wagen-leeg .header .cart-item {
  display: none;
}

/* Scheidingsstreepje tussen de categorieën, zodat je ziet waar het ene item
   ophoudt en het volgende begint.

   Bewust een lijntje van 1px en geen letterlijk |-teken. Een karakter erbij
   maakt elk item breder en telt zeven keer mee; dit menu heeft daar de ruimte
   niet voor. Het streepje staat absoluut in de tussenruimte en kost dus nul
   breedte. Het staat niet vóór het eerste item, want daar is niets van te
   scheiden. Alleen op de brede weergave: het mobiele menu staat onder elkaar
   en heeft geen streepje nodig. */
/* Pas vanaf 1180px, want dat is de breedte waarop de balk gegarandeerd op één
   regel past (was 1150; sinds het zoekicoon erbij staat schuift dat 30px op). Daaronder viel hij om en stond er een streepje vóór het eerste
   item van de tweede regel, wat er kapot uitzag. Op een telefoon staat het
   categoriemenu sowieso in het uitschuifpaneel en bevat deze balk alleen
   "Klant worden" en "Login". */
@media (min-width: 1180px) {

.header-bottom-nav > li + li {
  position: relative;
}

.header-bottom-nav > li + li::before {
  content: "";
  position: absolute;
  left: -4px;                 /* midden van de 8px tussen twee items */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: currentColor;
  opacity: .28;               /* een hint, geen hek */
  pointer-events: none;
}

}   /* einde min-width: 850px */

/* Het text_align-attribuut op de kolom levert niets op, dus hier. */
@media (min-width: 550px) {
  .cc-voet__slot .col:last-child,
  .cc-voet__slot .col:last-child .ux-text {
    text-align: right;
  }
}

/* ------------------------------------------------------------- zoekknop */

/* In het ontwerp staat er "Zoek" op de knop, niet alleen een vergrootglas. Een
   woord is duidelijker dan een icoon, zeker voor een groothandelklant die op
   artikelnummer zoekt. Flatsome levert alleen de icoonvariant, dus het icoon
   eruit en het woord erin. */
.header-search-form-wrapper .searchform-wrapper .ux-search-submit {
  width: auto;
  min-width: 78px;
  padding: 0 18px;
}

.header-search-form-wrapper .searchform-wrapper .ux-search-submit i {
  display: none;
}

.header-search-form-wrapper .searchform-wrapper .ux-search-submit::after {
  content: "Zoek";
  font-family: cubano, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}

/* De knop is breder dan het vierkantje van eerst, dus de tekst in het veld
   moet verder van rechts wegblijven. */
.header-search-form-wrapper .searchform-wrapper .search-field {
  padding-right: 96px;
}

/* --------------------------------------------------------- headerknoppen */

/* Inloggen is de hoofdactie: de meeste bezoekers zijn bestaande klanten die
   hun nettoprijzen willen zien. Die blijft dus gevuld. Klant worden wordt
   omlijnd, zodat er per scherm een duidelijke eerste keuze is.
   Ze waren ook niet even hoog (33 tegen 34px) en hadden nauwelijks binnenruimte.
   Op #header en niet op .header-main, want mobiel staan ze in een andere rij en
   34px is te klein om betrouwbaar aan te tikken. */
#header .nav-top-link.button,
#header .button.is-bevel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  border-width: 2px;
  border-style: solid;
  border-radius: 2px;
  line-height: 1;
}

/* Primair: gevuld. */
#header .nav-top-link.button {
  background: #221f20;
  border-color: #221f20;
  color: #fff;
}

/* Secundair: alleen een rand, dus hij leest als de tweede keuze. */
#header .button.is-bevel {
  background: transparent;
  border-color: #221f20;
  color: #221f20;
  box-shadow: none;
}

#header .button.is-bevel:hover {
  background: #221f20;
  color: #fff;
}

/* De zoekknop stak 1px buiten de rand van het veld uit. De kolom wordt
   uitgelijnd op de rij, en die is 4px breder dan het veld zelf. */
.header-search-form-wrapper .searchform-wrapper .flex-row > .flex-col:last-child {
  right: 7px;
}

/* Op mobiel staat de tekst op 16px (anders zoomt iOS in bij het aantikken) en
   is het veld smaller, dus daar is 96px vrijhouden rechts net te veel: de
   placeholder viel 3px buiten beeld. De knop houdt 10px speling in plaats van 18. */
@media (max-width: 849px) {
  .header-search-form-wrapper .searchform-wrapper .search-field {
    padding-right: 88px;
  }
}

/* Coolcards, "Klant worden" verbergen zodra iemand is ingelogd.
   Geplaatst via Simple Custom CSS and JS.

   WordPress zet zelf de klasse "logged-in" op de body, dus dit heeft geen PHP
   nodig. Header-knop 1 wisselt al vanzelf naar "Mijn account"; alleen knop 2
   bleef staan en die is voor een bestaande klant zinloos.
*/

body.logged-in .header-button-2 {
	display: none;
}

/* ============================================================ mobiel: lucht

   Nagemeten op 390px op 22-08-2026, naar aanleiding van "veel dingen staan best
   strak op elkaar". Vier dingen die uit die meting kwamen. */

/* 1. Het stappenblok liep van schermrand tot schermrand (kader op 0 en 390),
      terwijl alles eromheen 20px marge heeft. Daardoor leek het vastgeplakt aan
      de zijkanten van het scherm. Nu lijnt het uit met de rest. */
@media (max-width: 549px) {
  /* Let op de breedte: Flatsome zet hier een expliciete width op de rij, dus
     alleen een marge maakt het blok niet smaller. Het schoof dan 20px naar
     rechts en liep aan die kant buiten beeld, met de rechterrand onzichtbaar.
     Het document kreeg daar geen schuifbalk van, dus een overflow-meting zag
     het niet; alleen de positie van de rechterrand verraadt het. */
  .cc-stappen {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* 2. De twee headerknoppen stonden gecentreerd en ongelijk (148 en 107px breed)
      met 65px leegte links en 61px rechts. Nu vullen ze samen de breedte, elk
      even breed en even hoog. Bewust naast elkaar en niet gestapeld: het zijn
      headeracties, geen pagina-CTA's, en gestapeld kosten ze 50px extra boven
      de vouw op een telefoon. */
@media (max-width: 849px) {
  .header-bottom .nav > li.html,
  .header-bottom .nav > li.account-item {
    flex: 1 1 0;
    margin: 0;
  }

  .header-bottom .nav > li.html > a,
  .header-bottom .nav > li.html .button,
  .header-bottom .nav > li.account-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin: 0;
  }

  /* De kolom eromheen begint zelf al op 15px, dus 5px erbij zet de knoppen op
     dezelfde 20px-lijn als de hero en de tegels eronder. 20px hier zou 35px
     opleveren en dat viel op naast de rest. */
  .header-bottom .nav {
    width: 100%;
    padding: 0 5px;
    gap: 12px;
  }
}

/* 3. De heroknoppen "Bekijk het assortiment" en "Klant worden" waren 314 en
      195px breed in een kolom van 350. Vaste regel: op mobiel staan knoppen op
      volle breedte, gestapeld. De zoekknop erboven deed dat al wel. */
@media (max-width: 549px) {
  .cc-hero .button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* 4. De tekst in de categorietegels en productkaarten zat op 11px van de rand.
      Op een tegel van 171px breed is dat krap. */
@media (max-width: 549px) {
  .cc-cats .box-category .box-text,
  .cc-prods .product-small .box-text {
    padding: 16px 16px 18px;
  }
}

/* ====================================================== mobiel: hero-ritme

   Gemeten op 390px: zoekveld, zoekknop, "Bekijk het assortiment" en "Klant
   worden" stonden als vier even brede balken onder elkaar met 8, 20 en 19px
   ertussen. Alles even ver uit elkaar leest als een ladder; je ziet niet wat
   bij elkaar hoort en het oogt daardoor gedrongen.

   Nu in groepen: het zoekveld en de zoekknop zijn samen één ding en blijven
   dicht op elkaar, daarna komt echte ruimte, en de twee knoppen eronder horen
   weer bij elkaar. Onderaan lucht voordat de foto begint. */
@media (max-width: 549px) {
  /* zoekveld en zoekknop: één blok */
  .cc-hero .cc-zoek input[type="search"] {
    margin-bottom: 6px;
  }

  /* ruimte tussen het zoekblok en de knoppen eronder */
  .cc-hero .cc-zoek {
    margin-bottom: 28px;
  }

  /* de twee knoppen horen bij elkaar */
  .cc-hero .button {
    margin-bottom: 12px;
  }

  /* en lucht voordat de foto begint */
  .cc-hero .button:last-of-type {
    margin-bottom: 40px;
  }

  /* De tekst boven het zoekblok mag ook iets meer ademen. */
  .cc-hero h1 {
    margin-bottom: 18px;
  }
}

/* Het stappenblok: de tekst zat op 22px van de bovenrand en 20px van de zijkant
   in een blok dat de volle breedte pakt. Iets meer lucht binnenin. */
@media (max-width: 549px) {
  .cc-stappen > .col > .col-inner {
    padding: 26px 22px 28px;
  }
}

/* ================================================ menubalk op smalle laptops

   Gemeten op 22-08: de balk is zichtbaar vanaf 850px, maar acht items zijn
   samen 1097px en passen pas vanaf ongeveer 1150. Tussen 850 en 1150 viel
   "Alle categorieën" alleen op een tweede regel, met een scheidingsstreepje
   ervoor. Dat gold ook al met zeven items; het zat precies tussen de breedtes
   die ik meette (1024 en 1280) in.

   Daar gaat "Alle categorieën" eruit. Van alle items is dat de enige die niets
   uniek ontsluit: dezelfde pagina staat in de footer en in het uitschuifmenu,
   en de categorieën ernaast leiden naar dezelfde winkel. De rest blijft staan,
   iets compacter. */
/* Was 1149px. Sinds het zoekicoon rechts in de balk staat (22-08) zijn acht
   items samen 1097px plus 30px icoon, en dat past pas vanaf 1180px. Op 1150
   viel de balk om. Gemeten, niet geschat: op 1150 blijft er 23px over en dat
   is te weinig omdat de container zelf nog zijpadding heeft; vanaf 1180 is het
   53px en past het. */
@media (max-width: 1179px) {
  .header-bottom-nav > li.menu-item-type-custom {
    display: none;
  }

  .header-bottom-nav > li > a {
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .header-bottom-nav > li {
    margin-left: 2px;
    margin-right: 2px;
  }
}

/* Op precies 850px, de smalste breedte waarop deze balk nog verschijnt, kwam
   het 10px tekort. Eén pixel per kant per item is genoeg; daaronder neemt het
   uitschuifmenu het over. */
@media (max-width: 899px) {
  .header-bottom-nav > li {
    margin-left: 1px;
    margin-right: 1px;
  }

  /* Was 4px. Het zoekicoon kost hier 24px en daardoor viel de balk op 850px om,
     de smalste breedte waarop hij nog verschijnt. Eén pixel per kant over zeven
     items scheelt 14px en dat is precies genoeg. */
  .header-bottom-nav > li > a {
    padding-left: 3px;
    padding-right: 3px;
  }
}

/* ============================================== hoogte van de onderste balk

   Wens van Peter, 22-08: er zat te weinig lucht om de inhoud van deze balk,
   vooral op mobiel. Daar staan "Klant worden" en "Login" in een balk van 50px
   met knoppen van 44px, dus er zat 3px boven en onder.

   De inhoud staat gecentreerd (align-items: center), dus de extra ruimte
   verdeelt zich vanzelf boven en onder.

   Let op de selector: Flatsome zet zelf `.header-bottom{min-height: 50px}` in
   een style-blok verderop in de pagina. Dat blok staat ná deze stylesheet en
   wint bij gelijke specificiteit, dus een kale `.header-bottom` deed hier
   niets. Met `#header` ervoor is de specificiteit hoger en is `!important`
   niet nodig. */
#header .header-bottom {
  min-height: 100px;
}

/* ======================================================= hover in de menubalk

   Flatsome's stand "box" vulde het hele item met de primaire kleur: een zwart
   blok van 47px hoog, dat tegen de scheidingsstreepjes aan botste. "line-grow"
   was niet beter, want die zet de lijn bovenaan de balk van 100px en dus los
   van de tekst.

   Daarom hier zelf: een streepje in het groen van het merk, direct onder de
   tekst, dat vanuit het midden uitgroeit. De Flatsome-instelling staat op de
   neutrale stand, anders komen beide effecten over elkaar. */
.header-bottom-nav > li > a {
  position: relative;
}

.header-bottom-nav > li > a::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 12px;
  height: 2px;
  background: #31c600;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  pointer-events: none;
}

.header-bottom-nav > li > a:hover::after,
.header-bottom-nav > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* Wie geen animatie wil, krijgt hem meteen zonder beweging. */
@media (prefers-reduced-motion: reduce) {
  .header-bottom-nav > li > a::after {
    transition: none;
  }
}

/* ========================================================== het koopproces

   Uit de checkout-audit van 23-08. Zie inc/afrekenen.php voor de kant die
   niet met opmaak op te lossen was. */

/* --- de bestelknop -------------------------------------------------------

   "Plaats bestelling" stond in witte letters op geel (#fcce31): een contrast
   van ongeveer 1,5:1, waar 4,5:1 de ondergrens is. Uitgerekend de laatste knop
   van de hele winkel was daarmee de slechtst leesbare.

   Hij wordt groen met donkere tekst, net als elke andere actieknop op de site.
   Dat lost twee dingen tegelijk op: het contrast (ongeveer 8:1) en het feit
   dat de site zichzelf tegensprak, want de homepage-CTA's zijn wél groen. Wit
   op groen kan niet, dat haalt maar 2,3:1; vandaar donkere tekst, zoals de
   site zelf ook al doet in 756.css.

   Let op de selector en de !important, allebei nodig en allebei gemeten. De
   Flatsome-instellingen zetten in een style-blok ín de pagina de regel

       .button#place_order { background-color: #fcce31 !important }

   Dat blok staat ná deze stylesheet, dus met dezelfde specificiteit verliest
   deze regel altijd, ook mét !important. Vandaar body ervoor: hoger, en
   daarmee wint hij wel. Zonder dit bleef de knop geel terwijl de code hier
   groen beloofde, en dat is precies het soort stille tegenspraak waar later
   niemand meer uitkomt.

   De tekstkleur had die hulp niet nodig, want het style-blok zegt niets over
   `color`. Het contrast was dus al opgelost voordat de achtergrond klopte. */
body .button#place_order,
body #place_order,
body .woocommerce .wc-proceed-to-checkout a.checkout-button,
body .wc-proceed-to-checkout a.checkout-button.button {
  background-color: var(--cc-groen) !important;
  border-color: var(--cc-groen);
  color: var(--cc-inkt);
  font-family: var(--cc-nadruk);
  text-shadow: none;
}

body .button#place_order:hover,
body .button#place_order:focus,
body #place_order:hover,
body #place_order:focus,
body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body .woocommerce .wc-proceed-to-checkout a.checkout-button:focus,
body .wc-proceed-to-checkout a.checkout-button.button:hover,
body .wc-proceed-to-checkout a.checkout-button.button:focus {
  background-color: var(--cc-groen-diep) !important;
  border-color: var(--cc-groen-diep);
  color: var(--cc-inkt);
}

/* --- de verzendbelofte ---------------------------------------------------

   Staat in de winkelwagen en boven het besteloverzicht, dus vóór het moment
   waarop WooCommerce het echte bedrag uitrekent. De regel eronder is kleiner:
   die zegt alleen waar het exacte bedrag straks staat.

   Opmaak gelijk aan .cc-kassa: een volle rand van 2px op een mistvlak. Eerst
   stond hier een grijs vlak met alleen een groene rand links. Dat is de
   standaard-callout die op half internet staat, en bovendien doet deze site het
   nergens zo: productkaarten, prijsslot en de mailsjablonen hebben allemaal een
   kader rondom. */
.cc-verzendbelofte {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--cc-mist);
  border: 2px solid var(--cc-inkt);
  font-family: var(--cc-tekst);
  font-size: 16px;
  line-height: 1.5;
  color: var(--cc-inkt);
}

.cc-verzendbelofte b {
  font-family: var(--cc-nadruk);
  font-weight: normal;
}

.cc-verzendbelofte span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--cc-inkt-zacht);
}

/* --- het ingeklapte adres ------------------------------------------------

   Zelfde kader als .cc-kassa en de verzendbelofte, zodat de kassa één taal
   spreekt. Het formulier eronder wordt alleen verborgen als de body-klasse er
   staat, en die zet PHP alleen wanneer het adres compleet is. */
.cc-adres {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid var(--cc-inkt);
  font-family: var(--cc-tekst);
  font-size: 16px;
  line-height: 1.5;
  color: var(--cc-inkt);
}

.cc-adres__kop {
  margin: 0 0 6px;
  font-family: var(--cc-nadruk);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 14px;
  color: var(--cc-grijs);
}

.cc-adres__regels {
  margin: 0 0 12px;
  font-size: 16px;
}

.cc-adres__knop {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid var(--cc-inkt);
  background: transparent;
  color: var(--cc-inkt);
  font-family: var(--cc-nadruk);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 2px;
  cursor: pointer;
}

.cc-adres__knop:hover,
.cc-adres__knop:focus {
  background: var(--cc-inkt);
  color: #fff;
}

.cc-adres__hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--cc-inkt-zacht);
}

/* Ingeklapt: de velden weg, de kop erboven ook. */
.cc-adres-ingeklapt .woocommerce-billing-fields__field-wrapper {
  display: none;
}

.cc-adres-ingeklapt .woocommerce-billing-fields > h3 {
  display: none;
}

/* Zodra de klant op de knop drukt komt alles terug. */
.cc-adres-ingeklapt.cc-adres-open .woocommerce-billing-fields__field-wrapper,
.cc-adres-ingeklapt.cc-adres-open .woocommerce-billing-fields > h3 {
  display: block;
}

.cc-adres-ingeklapt.cc-adres-open .cc-adres__hint {
  display: none;
}

@media (max-width: 560px) {
  .cc-adres__knop {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* De zekerheden onder de bestelknop staan in een smalle kolom; daar past de
   rij-opmaak van de productpagina niet, dus onder elkaar. */
.woocommerce-checkout .cc-zeker {
  margin-top: 14px;
}

.woocommerce-checkout .cc-zeker li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .cc-verzendbelofte {
    font-size: 16px;
  }
}