/* Bonbeau huisstijl over Minimog heen.
 *
 * De waarden komen uit design-system/tokens.css en zijn gemeten op rhodeskin.com:
 * wit met warm taupe, geen accentkleur, paginamarge 32, beelden zonder hoekstraal,
 * knoppen als pil van 40, kaarttekst volledig op 14 met het verschil in gewicht.
 *
 * Minimog schrijft zelf ongeveer zestig --minimog-* variabelen naar :root vanuit
 * Theme Options (framework/class-custom-css.php). Die overschrijven we hier, zodat
 * de huisstijl klopt ook voordat Theme Options is ingevuld.
 */

/* ---- Letters, zelf gehost. Geen aanroep naar Google. ---------------------- */
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --bon-wit:    #FFFFFF;
  --bon-vlak:   #F2F0EC;
  --bon-lijn:   #E3E0DA;
  --bon-zacht:  #746C65;
  --bon-tekst:  #635B54;
  --bon-donker: #2A2622;
  --bon-marge:  32px;

  /* Minimog's eigen variabelen op de huisstijl zetten. Geen accentkleur:
     primary en secondary zijn allebei de tekstkleur. */
  --minimog-color-primary:            #635B54;
  --minimog-color-primary-rgb:        99, 91, 84;
  --minimog-color-secondary:          #635B54;
  --minimog-color-text:               #635B54;
  --minimog-color-heading:            #635B54;
  --minimog-color-link:               #635B54;
  --minimog-color-link-hover:         #2A2622;
  --minimog-color-button-text:        #FFFFFF;
  --minimog-color-button-background:  #635B54;
  --minimog-color-button-border:      #635B54;
  --minimog-color-button-text-hover:       #FFFFFF;
  --minimog-color-button-background-hover: #2A2622;
  --minimog-color-button-border-hover:     #2A2622;
  --minimog-color-box-white-background: #FFFFFF;
  --minimog-color-box-grey-background:  #F2F0EC;
  --minimog-color-box-border:           #E3E0DA;
  --minimog-color-form-text:       #635B54;
  --minimog-color-form-border:     #E3E0DA;
  --minimog-color-form-background: #FFFFFF;

  /* Vorm: overal recht, behalve knoppen. De hero krijgt zijn 12 px apart. */
  --minimog-small-rounded:  0px;
  --minimog-normal-rounded: 0px;
  --minimog-semi-rounded:   0px;
  --minimog-large-rounded:  0px;
  --minimog-button-rounded:       40px;
  --minimog-button-small-rounded: 40px;
  --minimog-button-large-rounded: 40px;
  --minimog-form-input-normal-rounded: 0px;
  --minimog-form-input-small-rounded:  0px;
  --minimog-form-textarea-rounded:     0px;

  --minimog-typography-headings-font-family: 'Instrument Sans', system-ui, sans-serif;
  --minimog-typography-headings-font-weight: 400;
  --minimog-typography-headings-text-transform: none;
  --minimog-typography-headings-letter-spacing: -0.01em;
}

/* ---- Basis --------------------------------------------------------------- */
body {
  background: var(--bon-wit);
  color: var(--bon-tekst);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--bon-tekst);
}
a { color: var(--bon-tekst); }
a:hover, a:focus { color: var(--bon-donker); }

/* Het accent: serif italic, één of twee woorden. Nooit een hele zin. */
.bon-accent, em.bon-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* Zichtbare focus is niet optioneel. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bon-tekst);
  outline-offset: 3px;
}

/* ---- Paginamarge: inhoud is de viewport min 32, geen container ------------ */
.site-content .container,
.site-content .container-full,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: none;
  padding-left: var(--bon-marge);
  padding-right: var(--bon-marge);
}
@media (max-width: 767px) {
  :root { --bon-marge: 16px; }
}

/* ---- Beelden: overal recht ------------------------------------------------ */
img,
.minimog-image,
.product-thumbnail img,
.woocommerce ul.products li.product img {
  border-radius: 0;
}
/* De hero is de enige uitzondering, met 12 px. */
.bon-hero,
.bon-hero img,
.bon-hero .elementor-background-overlay {
  border-radius: 12px;
}

/* ---- Knoppen: pil van 40, kapitalen, taupe met witte tekst ---------------- */
.button, .btn, button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.elementor-button {
  border-radius: 40px;
  padding: 13px 30px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--bon-tekst);
  color: var(--bon-wit);
  border: 1px solid var(--bon-tekst);
}
.button:hover, .btn:hover, button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.elementor-button:hover {
  background: var(--bon-donker);
  border-color: var(--bon-donker);
  color: var(--bon-wit);
}

/* ---- Productkaart: alles 14 px, verschil in gewicht en kapitalen ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-title, .product-title a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bon-tekst);
  line-height: 1.5;
}
.woocommerce ul.products li.product .price,
.product-price, .price {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--bon-tekst);
}
/* Doorgestreepte prijzen bestaan niet in dit systeem: de huidige prijs is de prijs. */
.woocommerce del, .price del { display: none; }
.woocommerce ins, .price ins { text-decoration: none; }

/* Geen kortingsbadge, geen percentages. Het enige label is het categoriewoord. */
.woocommerce span.onsale,
.product-badge.sale,
.minimog-badge--sale { display: none; }

/* ---- Formulieren: hairline, geen hoekstraal, label boven het veld --------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], select, textarea {
  border: 1px solid var(--bon-lijn);
  border-radius: 0;
  color: var(--bon-tekst);
  background: var(--bon-wit);
  font-size: 16px;
}

/* ---- Beweging ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Homepage en productkaart — maten uit Main.dc.html, gemeten op rhodeskin.com
   ========================================================================== */

.bon-home { padding: 0; }

/* Hero: binnen de paginamarge van 32, 880 hoog, hoekstraal 12. De kop staat
   rechtsonder op 176 px. Op een licht beeld staat de tekst donker; is het beeld
   donker, dan zet je .bon-hero--licht op de sectie. */
.bon-hero {
	position: relative;
	margin: 8px var(--bon-marge, 32px) 0;
	height: 880px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	background-color: var(--bon-vlak, #F2F0EC);
}

.bon-hero__kop {
	position: absolute;
	right: 48px;
	bottom: 44px;
	margin: 0;
	text-align: right;
	font-size: 176px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--bon-inkt, #2A2622);
}

.bon-hero__kop em {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-weight: 400;
}

.bon-hero--licht .bon-hero__kop { color: #FFFFFF; }

.bon-raster-blok { padding: 96px var(--bon-marge, 32px) 0; }

/* Raster van drie met 40 px ertussen en 64 px tussen de rijen. */
.bon-raster,
.woocommerce ul.products.bon-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bon-alles { display: flex; justify-content: center; padding: 8px 0 24px; margin: 0; }

.bon-knop,
.woocommerce a.button.bon-knop {
	display: inline-block;
	border-radius: 40px;
	padding: 13px 30px;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
	background: var(--bon-tekst, #635B54);
	color: #FFFFFF;
	border: 0;
}

.bon-knop:hover { background: var(--bon-inkt, #2A2622); color: #FFFFFF; }

/* ---- de kaart op winkel- en categoriepagina's -------------------------------
   Opbouw van de collectiepagina van rhodeskin.com: alles staat in één licht paneel
   met hoekstraal 12. Beeld boven, naam en prijs op één regel eronder, dan de zin. */

.bon-kaart { margin: 0; padding: 0; list-style: none; height: 100%; }
.bon-kaart__link { display: block; color: inherit; height: 100%; }

.bon-kaart__paneel {
	position: relative;
	background: var(--bon-paneel, #F2F0EC);
	border-radius: var(--bon-radius, 12px);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: background .3s ease;
}

.bon-kaart__link:hover .bon-kaart__paneel { background: var(--bon-lijn, #E3E0DA); }

/* Het categoriewoord blijft klein op deze pagina: op 24 ringen zou een wordmark van
   57,6 px zich twaalf keer herhalen. De grote versie staat op de homepage. */
.bon-kaart__woord {
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 2;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: lowercase;
	color: var(--bon-gedempt, #746C65);
	pointer-events: none;
}

/* Het beeld vult de bovenkant van het paneel van rand tot rand.
 *
 * Rhode laat het product zweven op het paneel, maar dat werkt daar omdat hun
 * packshots een doorzichtige achtergrond hebben. Onze bronfoto's hebben een
 * achtergrond ingebakken: soms wit, vaak lichtgrijs. Met `contain` plus multiply
 * bleef er een zichtbaar grijs vierkant in het paneel staan. Vullend is daarom de
 * eerlijke vertaling: hetzelfde paneel, hetzelfde ritme, zonder vlek. */
.bon-kaart__beeld {
	aspect-ratio: 432 / 460;
	overflow: hidden;
	background: #FFFFFF;
}

.bon-kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform .6s ease;
}

.bon-kaart__link:hover .bon-kaart__beeld img { transform: scale(1.04); }

/* Geen `margin-top: auto`: dan zakt de voet naar de onderkant van het paneel en
   staan de namen binnen een rij op verschillende hoogtes zodra één zin omloopt.
   Zo begint elke naam op dezelfde lijn en varieert alleen de ruimte eronder. */
.bon-kaart__voet { padding: 16px 18px 20px; }

.bon-kaart__regel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 2px;
}

.bon-kaart__naam {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	line-height: 1.35;
	margin: 0;
	color: var(--bon-tekst, #635B54);
}

.bon-kaart__prijs {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .34px;
	white-space: nowrap;
	color: var(--bon-tekst, #635B54);
}

.bon-kaart__prijs del { display: none; }
.bon-kaart__prijs ins { text-decoration: none; }

.bon-kaart__zin {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	min-height: 24px;
	color: var(--bon-gedempt, #746C65);
}

/* ---- kleiner dan desktop ---- */

@media (max-width: 1024px) {
	.bon-hero { height: 620px; }
	.bon-hero__kop { font-size: 104px; right: 32px; bottom: 32px; }
	.bon-raster,
	.woocommerce ul.products.bon-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
}

@media (max-width: 767px) {
	:root { --bon-marge: 16px; }
	.bon-hero { height: 560px; margin-left: 16px; margin-right: 16px; }
	/* 82,5 px op mobiel, gemeten op rhodeskin.com bij 375 px */
	.bon-hero__kop { font-size: 82px; right: 20px; bottom: 24px; line-height: 1.1; }
	.bon-raster-blok { padding-top: 56px; }
	.bon-raster,
	.woocommerce ul.products.bon-raster { gap: 36px 16px; }
	.bon-alles { padding: 48px 0 64px; }
	/* Raakvlakken minstens 44 px */
	.bon-knop { padding: 15px 30px; }
}

/* ==========================================================================
   Paginamarge op de winkel- en categoriepagina's
   ==========================================================================
   Containerbreedte staat op full-gap-0, want het ontwerp wil de inhoud over de
   volle breedte. Dat haalt ook de zijmarge weg, terwijl die er juist 32 px moet
   zijn — bij Rhode is de inhoud de viewport min de marges, geen container. */

.woocommerce .container-fluid.container-gap-0,
.archive-shop .container-fluid.container-gap-0,
.single-product .container-fluid.container-gap-0 {
	padding-left: var(--bon-marge, 32px);
	padding-right: var(--bon-marge, 32px);
}

/* De balk boven het raster: resultaten links, sorteren rechts, allebei 14 px met
   letterspatie, zoals de filterrij in Collectie.dc.html. */
.archive-shop .woocommerce-result-count,
.archive-shop .woocommerce-ordering,
.archive-shop .woocommerce-ordering select {
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--bon-gedempt, #746C65);
}

.archive-shop .shop-toolbar { margin-bottom: 40px; }

/* Paginering in dezelfde pilvorm als de knoppen. */
.woocommerce-pagination { padding-top: 64px; }

/* ==========================================================================
   Losse pagina's: cadeaus, personaliseren, ons verhaal, contact
   ========================================================================== */

.bon-pagina { padding: 64px 0 96px; }

/* De leesbreedte geldt voor tekst, niet voor het tegelraster: dat mag de volle
   breedte gebruiken. */
.bon-pagina__intro,
.bon-pagina p,
.bon-stappen,
.bon-placeholder { max-width: 72ch; }

.bon-pagina__kop {
	font-size: 57.6px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.01em;
	margin: 0 0 20px;
	text-transform: lowercase;
	color: var(--bon-inkt, #2A2622);
}

.bon-pagina__tussenkop {
	font-size: 24px;
	font-weight: 400;
	margin: 56px 0 12px;
	color: var(--bon-inkt, #2A2622);
}

.bon-pagina__intro { font-size: 16px; margin: 0 0 40px; }

/* Tegels naar de cadeaucategorieën: hetzelfde raster van drie, maar plat. */
.bon-tegels {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 24px;
	max-width: none;
}

.bon-tegel {
	display: flex;
	align-items: flex-end;
	min-height: 132px;
	padding: 20px;
	background: var(--bon-vlak, #F2F0EC);
	border: 1px solid var(--bon-lijn, #E3E0DA);
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bon-tekst, #635B54);
}

.bon-tegel:hover { background: var(--bon-lijn, #E3E0DA); color: var(--bon-inkt, #2A2622); }

.bon-stappen { margin: 0 0 40px; padding-left: 20px; }
.bon-stappen li { margin-bottom: 14px; }

/* Placeholder: zichtbaar gemarkeerd, zodat hij niet per ongeluk live gaat. */
.bon-placeholder {
	background: var(--bon-vlak, #F2F0EC);
	border: 1px dashed var(--bon-gedempt, #746C65);
	padding: 20px 24px;
	font-size: 14px;
	letter-spacing: .01em;
	color: var(--bon-gedempt, #746C65);
	margin: 0 0 32px;
}

@media (max-width: 767px) {
	.bon-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bon-pagina__kop { font-size: 40px; }
	.bon-pagina { padding: 40px 0 64px; }
}

/* ==========================================================================
   Footer — vier kolommen, zoals in Main.dc.html
   ========================================================================== */

.bon-footer {
	border-top: 1px solid var(--bon-lijn, #E3E0DA);
	padding: 64px var(--bon-marge, 32px) 40px;
	background: #FFFFFF;
}

.bon-footer__kolommen {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 56px;
}

.bon-footer__logo { display: block; width: 150px; height: auto; margin-bottom: 16px; }

.bon-footer__woord {
	display: block;
	font-size: 32px;
	line-height: 1;
	margin-bottom: 16px;
	color: var(--bon-inkt, #2A2622);
}

.bon-footer__merk p {
	font-size: 16px;
	margin: 0;
	max-width: 32ch;
	color: var(--bon-gedempt, #746C65);
}

.bon-footer__kolom {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	letter-spacing: .02em;
}

.bon-footer__kolom strong { font-weight: 700; text-transform: uppercase; }
.bon-footer__kolom a { color: var(--bon-tekst, #635B54); }
.bon-footer__kolom a:hover { color: var(--bon-inkt, #2A2622); }

.bon-footer__regel {
	border-top: 1px solid var(--bon-lijn, #E3E0DA);
	padding-top: 22px;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--bon-gedempt, #746C65);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.bon-footer__open {
	border: 1px dashed var(--bon-gedempt, #746C65);
	padding: 2px 10px;
}

@media (max-width: 767px) {
	.bon-footer__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
	.bon-footer { padding-top: 48px; }
}

/* ==========================================================================
   Navigatie over de hero
   ==========================================================================
   Op de homepage ligt de navigatie op de foto. In taupe (#635B54) haalt die op de
   huidtinten van de herofoto maar 2,75 — ruim onder de AA-ondergrens van 4,5. In
   #2A2622 wordt het 5,78 en dat haalt hem wel. Dat is bovendien de kleur die het
   ontwerp voor de navigatie op het beeld voorschrijft.

   Alleen op de homepage: elders staat de navigatie op wit, en daar is taupe met
   6,66 juist prima en rustiger. */

.home #page-header .menu__container > li > a,
.home #page-header .header-icon,
.home #page-header a,
.home #page-header .minimog-svg-icon {
	color: var(--bon-inkt, #2A2622);
}

.home #page-header .minimog-svg-icon path,
.home #page-header svg { stroke: currentColor; }

/* ==========================================================================
   Secties naar de opbouw van rhodeskin.com
   ==========================================================================
   Gemeten op 02-09-2026 op 1440 px: paginamarge 32, inhoud is de viewport min 64,
   panelen en hero hoekstraal 12, productbeelden hoekstraal 0, licht paneel #F1F0ED
   (bij ons #F2F0EC), donkere band #67645E (bij ons #635B54).

   Typeschaal, ook gemeten en niet geschat: 57,6 wordmark op de kaart, 36 sectiekop
   en herobijschrift, 24 kleine kop, 16,9 prijs, 16,2 navigatie en lopende tekst,
   14 productnaam en knop. Vijf groottes, meer niet.
   ========================================================================== */

:root {
	--bon-paneel:  #F2F0EC;
	--bon-radius:  12px;
	--bon-gap:     24px;
}

/* ---- Aankondigingsbalk -------------------------------------------------- */

.bon-balk {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px var(--bon-marge, 32px);
	background: var(--bon-paneel);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bon-tekst, #635B54);
	text-align: center;
}

/* Zolang Daan geen tekst heeft geleverd is dit zichtbaar een plaatshouder, zodat hij
   niet per ongeluk live gaat als een echte mededeling. */
.bon-balk--leeg {
	background: var(--bon-paneel);
	color: var(--bon-gedempt, #746C65);
	font-weight: 400;
	letter-spacing: .04em;
}

.bon-balk--leeg span {
	border: 1px dashed var(--bon-gedempt, #746C65);
	border-radius: 40px;
	padding: 3px 16px;
}

/* ---- Gedeelde bouwstenen ------------------------------------------------ */

.bon-kop {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 0 0 14px;
	color: var(--bon-inkt, #2A2622);
	text-transform: lowercase;
}

.bon-kop em {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
}

/* De pil: 14 px, vet, kapitalen, letterspatie 0,28 px, hoekstraal 40. Omlijnd is de
   standaard op Rhode; gevuld gebruiken we alleen voor de ene hoofdactie per pagina. */
.bon-pil,
.woocommerce a.button.bon-pil {
	display: inline-block;
	border: 1px solid var(--bon-tekst, #635B54);
	border-radius: 40px;
	padding: 11px 24px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	background: transparent;
	color: var(--bon-tekst, #635B54);
	line-height: 1.2;
	transition: background .25s ease, color .25s ease;
}

.bon-pil:hover { background: var(--bon-tekst, #635B54); color: #FFFFFF; }

.bon-pil--vol { background: var(--bon-tekst, #635B54); color: #FFFFFF; }
.bon-pil--vol:hover { background: var(--bon-inkt, #2A2622); color: #FFFFFF; }

.bon-pil--licht { border-color: #FFFFFF; color: #FFFFFF; }
.bon-pil--licht:hover { background: #FFFFFF; color: var(--bon-inkt, #2A2622); }

/* Een pil die geen link is: een label, geen knop. Geen hover, geen cursor. */
.bon-pil--uit {
	border-style: dashed;
	border-color: var(--bon-gedempt, #746C65);
	color: var(--bon-gedempt, #746C65);
	font-weight: 400;
	cursor: default;
}
.bon-pil--uit:hover { background: transparent; color: var(--bon-gedempt, #746C65); }

/* Placeholder: altijd zichtbaar gemarkeerd, zodat hij niet stil live gaat. */
.bon-ph {
	display: block;
	background: var(--bon-paneel);
	border: 1px dashed var(--bon-gedempt, #746C65);
	border-radius: var(--bon-radius);
	padding: 18px 22px;
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: .01em;
	color: var(--bon-gedempt, #746C65);
	margin: 0;
}

.bon-ph--breed { max-width: none; text-align: center; padding: 28px 32px; }

/* ---- 2. Hero ------------------------------------------------------------ */

.bon-hero {
	position: relative;
	margin: 8px var(--bon-marge, 32px) var(--bon-gap);
	height: 810px;
	border-radius: var(--bon-radius);
	background-size: cover;
	background-position: center 30%;
	background-color: var(--bon-paneel);
	overflow: hidden;
}

/* Bijschrift en knop staan rechtsonder, onder elkaar, rechts uitgelijnd. */
.bon-hero__onder {
	position: absolute;
	right: 40px;
	bottom: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	text-align: right;
}

.bon-hero__bijschrift {
	margin: 0;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #FFFFFF;
	/* De foto is licht bovenin en donkerder onderin; deze schaduw houdt het bijschrift
	   leesbaar zonder een balk over het beeld te leggen. */
	text-shadow: 0 1px 18px rgba(42, 38, 34, .45);
}

.bon-hero__bijschrift em {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
	font-weight: 400;
}

/* ---- 3. Drie producten op panelen --------------------------------------- */

.bon-uitgelicht { padding: 0 var(--bon-marge, 32px) var(--bon-gap); }

.bon-uitgelicht__rij {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.bon-paneelkaart { margin: 0; padding: 0; list-style: none; }
.bon-paneelkaart__link { display: block; color: inherit; }

.bon-paneelkaart__paneel {
	position: relative;
	aspect-ratio: 432 / 523;
	background: var(--bon-paneel);
	border-radius: var(--bon-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Het categoriewoord: 57,6 px, kleine letters, letterspatie -2,3 px, linksboven. */
.bon-paneelkaart__woord {
	position: absolute;
	top: 22px;
	left: 24px;
	font-size: 57.6px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: -2.3px;
	text-transform: lowercase;
	color: var(--bon-inkt, #2A2622);
	pointer-events: none;
}

/* De bronfoto's hebben veel wit ingebakken, dus het product zelf beslaat maar een
   deel van het vierkant. Daarom staat het beeldvak op 88 procent: anders zweeft een
   ring als een speldenknop in een paneel van 432 bij 523. */
.bon-paneelkaart__beeld {
	width: 88%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 34px;
}

.bon-paneelkaart__beeld img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	mix-blend-mode: multiply;
	transition: transform .6s ease;
}

.bon-paneelkaart__link:hover .bon-paneelkaart__beeld img { transform: scale(1.04); }

.bon-paneelkaart__regel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0 2px;
}

.bon-paneelkaart__naam {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	line-height: 1.35;
	margin: 0;
	color: var(--bon-tekst, #635B54);
}

.bon-paneelkaart__prijs {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .34px;
	white-space: nowrap;
	color: var(--bon-tekst, #635B54);
}

.bon-paneelkaart__prijs del { display: none; }
.bon-paneelkaart__prijs ins { text-decoration: none; }

.bon-paneelkaart__zin {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	min-height: 24px;
	color: var(--bon-gedempt, #746C65);
}

/* ---- 4. Volle band ------------------------------------------------------ */

.bon-band {
	margin: 0 var(--bon-marge, 32px) var(--bon-gap);
	border-radius: var(--bon-radius);
	padding: 96px 40px;
}

.bon-band--vlak { background: var(--bon-paneel); }

/* Een donkere band bestaat, maar wordt spaarzaam gebruikt: één per pagina. */
.bon-band--donker { background: var(--bon-tekst, #635B54); color: #FFFFFF; }
.bon-band--donker .bon-kop { color: #FFFFFF; }
.bon-band--donker .bon-pil { border-color: #FFFFFF; color: #FFFFFF; }
.bon-band--donker .bon-pil:hover { background: #FFFFFF; color: var(--bon-tekst, #635B54); }

.bon-band__inhoud {
	max-width: 56ch;
	margin: 0 auto;
	text-align: center;
}

.bon-band__inhoud p { margin: 0 0 24px; font-size: 16px; }

/* ---- 5 en 6. Half beeld, half tekst ------------------------------------- */

.bon-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0 var(--bon-marge, 32px) var(--bon-gap);
	border-radius: var(--bon-radius);
	overflow: hidden;
	background: var(--bon-paneel);
	min-height: 560px;
}

.bon-split__beeld { position: relative; min-height: 420px; }

.bon-split__beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Een packshot op wit vult niet, die past. Anders staat er een wit blok naast een
   taupe blok en valt het paneel uit elkaar. */
.bon-split__beeld--pak { background: var(--bon-paneel); }

.bon-split__beeld--pak img {
	inset: 6%;
	width: 88%;
	height: 88%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.bon-split__beeld .bon-ph {
	position: absolute;
	inset: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.bon-split__tekst {
	align-self: center;
	padding: 64px 56px;
	max-width: 46ch;
}

.bon-split__tekst p { margin: 0 0 24px; font-size: 16px; }

/* Bij --om staat de tekst links en het beeld rechts. De volgorde in de opmaak
   klopt al, dus hier hoeft alleen de opvulling mee te schuiven. */
.bon-split--om .bon-split__tekst { padding: 64px 56px 64px 64px; }

/* ---- 7. bonbeau + jij --------------------------------------------------- */

/* De rij klantbeelden is nog leeg. Daarom blijft dit blok laag: een groot leeg vak
   trekt meer aandacht dan de inhoud verdient. */
.bon-ugc { padding: 32px 40px; }

.bon-ugc__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.bon-ugc__kop .bon-kop { margin: 0; }

/* ---- 8. Waarden --------------------------------------------------------- */

.bon-waarden {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bon-gap);
	margin: 0 var(--bon-marge, 32px) var(--bon-gap);
}

.bon-waarden__tekst {
	background: var(--bon-paneel);
	border-radius: var(--bon-radius);
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
}

/* Het grote statement: 36 px, gemengd kapitalen en kleine letters, zoals Rhode het
   doet met "To RESTORE, PROTECT, and NURTURE the skin you have now". */
.bon-statement {
	font-size: 36px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 24px;
	color: var(--bon-inkt, #2A2622);
}

.bon-statement em {
	font-family: 'Instrument Serif', Georgia, serif;
	font-style: italic;
}

.bon-statement strong { font-weight: 700; }

.bon-waarden__lijst {
	list-style: none;
	margin: auto 0 0;
	padding: 0;
}

.bon-waarden__lijst li { border-top: 1px solid var(--bon-lijn, #E3E0DA); }

.bon-waarden__lijst a {
	display: block;
	padding: 18px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--bon-tekst, #635B54);
}

.bon-waarden__lijst a:hover { color: var(--bon-inkt, #2A2622); }

.bon-waarden__beeld {
	position: relative;
	border-radius: var(--bon-radius);
	overflow: hidden;
	background: var(--bon-paneel);
	min-height: 480px;
}

.bon-waarden__beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- 9. Reuzenwordmark -------------------------------------------------- */

.bon-wordmark {
	margin: 0 var(--bon-marge, 32px) var(--bon-gap);
	background: var(--bon-paneel);
	border-radius: var(--bon-radius);
	/* Vult de breedte van het paneel zonder eroverheen te lopen. Het woord is
	   3,765 keer zo breed als de lettergrootte (gemeten: 1382 px bij 367,2 px), en
	   het paneel is 100vw min 64. Daaruit volgt 26vw min 16, met wat lucht. */
	font-size: max(52px, calc(26vw - 16px));
	line-height: .82;
	font-weight: 400;
	letter-spacing: -.045em;
	text-align: center;
    padding: 6vw 0 7vw;
	color: var(--bon-gedempt, #746C65);
	overflow: hidden;
	user-select: none;
}

/* ---- Kleiner dan desktop ------------------------------------------------ */

@media (max-width: 1024px) {
	.bon-hero { height: 620px; }
	.bon-uitgelicht__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.bon-paneelkaart__woord { font-size: 40px; letter-spacing: -1.6px; top: 16px; left: 18px; }
	.bon-split { grid-template-columns: 1fr; }
	.bon-split__beeld { min-height: 380px; }
	.bon-split__tekst { padding: 40px 32px; max-width: none; }
	.bon-split--om .bon-split__tekst { padding: 40px 32px; order: 2; }
	.bon-split--om .bon-split__beeld { order: 1; }
	.bon-waarden { grid-template-columns: 1fr; }
	.bon-waarden__beeld { min-height: 360px; }
	.bon-band { padding: 64px 32px; }
}

@media (max-width: 767px) {
	.bon-hero { height: 560px; margin-left: 16px; margin-right: 16px; }
	.bon-hero__onder { right: 20px; bottom: 24px; gap: 12px; }
	.bon-hero__bijschrift { font-size: 28px; }
	.bon-kop { font-size: 26px; }
	.bon-statement { font-size: 24px; }
	.bon-uitgelicht { padding-left: 16px; padding-right: 16px; }
	.bon-uitgelicht__rij { grid-template-columns: 1fr; gap: 32px; }
	.bon-paneelkaart__woord { font-size: 44px; }
	.bon-band, .bon-split, .bon-waarden, .bon-wordmark { margin-left: 16px; margin-right: 16px; }
	.bon-band { padding: 48px 24px; }
	.bon-ugc { padding: 28px 20px; }
	.bon-ugc__kop { flex-direction: column; align-items: flex-start; gap: 12px; }
	.bon-waarden__tekst { padding: 36px 24px; }
	.bon-wordmark { font-size: clamp(56px, 24vw, 120px); }
	/* Raakvlakken minstens 44 px hoog. */
	.bon-pil { padding: 14px 24px; }
	.bon-waarden__lijst a { padding: 16px 0; }
}

/* ---- Collectiekop ------------------------------------------------------- */

.bon-collectiekop {
	background: var(--bon-paneel, #F2F0EC);
	border-radius: var(--bon-radius, 12px);
	padding: 56px 40px;
	margin: 0 0 24px;
}

.bon-collectiekop__titel {
	font-size: 57.6px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: lowercase;
	margin: 0 0 14px;
	color: var(--bon-inkt, #2A2622);
}

.bon-collectiekop__tekst {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 10px;
	max-width: 52ch;
	color: var(--bon-tekst, #635B54);
}

.bon-collectiekop__aantal {
	font-size: 14px;
	letter-spacing: .28px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	color: var(--bon-gedempt, #746C65);
}

/* Het thema zet zijn eigen resultatenteller boven het raster; die zou hetzelfde
   getal een tweede keer tonen. */
.archive-shop .woocommerce-result-count { display: none; }

@media (max-width: 767px) {
	.bon-collectiekop { padding: 36px 24px; }
	.bon-collectiekop__titel { font-size: 38px; }
}

.bon-collectiekop__voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.bon-collectiekop__voet .woocommerce-ordering { margin: 0; }

.bon-collectiekop__voet select,
.bon-collectiekop__voet .nice-select {
	font-size: 14px;
	letter-spacing: .28px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bon-tekst, #635B54);
	background: transparent;
	border: 1px solid var(--bon-tekst, #635B54);
	border-radius: 40px;
	padding: 9px 20px;
}

/* De losse sorteerbalk van het thema boven het raster is nu dubbel. */
.archive-shop .shop-toolbar,
.archive-shop > .woocommerce-ordering { display: none; }
.bon-collectiekop__voet .woocommerce-ordering { display: block; }

/* ==========================================================================
   Productpagina naar de opbouw van rhodeskin.com
   ==========================================================================
   Links het beeld met hoekstraal 12, rechts één licht paneel waarin alles staat:
   naam in kleine letters, categorie in kapitalen, beoordeling, tekst, varianten,
   een pilknop over de volle breedte, en daaronder uitklapregels met haarlijnen.
   ========================================================================== */

.single-product .woo-single-info { padding-top: 8px; }

/* Het beeld krijgt dezelfde hoekstraal als elk ander paneel. */
.single-product .woo-single-images .woocommerce-product-gallery__image img,
.single-product .woo-single-images img.wp-post-image {
	border-radius: var(--bon-radius, 12px);
}

/* Rechts: alles in één paneel. */
.single-product .summary.entry-summary {
	background: var(--bon-paneel, #F2F0EC);
	border-radius: var(--bon-radius, 12px);
	padding: 44px 40px;
}

.single-product .summary .product_title {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-transform: lowercase;
	margin: 0 0 6px;
	color: var(--bon-inkt, #2A2622);
}

/* De categorie als ondertitel, in kapitalen op 14 px. */
.bon-pdp__soort {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: var(--bon-tekst, #635B54);
}

.single-product .summary .price {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .01em;
	margin: 0 0 20px;
	color: var(--bon-inkt, #2A2622);
}

.single-product .summary .price del { display: none; }
.single-product .summary .price ins { text-decoration: none; }

.single-product .summary .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-details__short-description p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--bon-tekst, #635B54);
}

/* De koopknop over de volle breedte, als pil. Rhode zet de prijs in de knop; dat
   kan hier niet, want bij een variabel product verandert de prijs met de keuze en
   dan zou er een verkeerd bedrag op de knop blijven staan. De prijs staat daarom
   groot boven de knop. */
.single-product .summary .single_add_to_cart_button,
.single-product .summary button.single_add_to_cart_button {
	display: block;
	width: 100%;
	border-radius: 40px;
	padding: 17px 24px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	background: #FFFFFF;
	color: var(--bon-inkt, #2A2622);
	border: 1px solid var(--bon-tekst, #635B54);
}

.single-product .summary .single_add_to_cart_button:hover {
	background: var(--bon-tekst, #635B54);
	color: #FFFFFF;
}

/* Variantcirkels op 32 px, de maat die op Rhode is gemeten. */
.single-product .summary .insight-swatches .swatch-item,
.single-product .summary .swatch-color .swatch-item {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.single-product .summary .variations { margin-bottom: 20px; }

.single-product .summary .variations td,
.single-product .summary .variations th { padding: 6px 0; border: 0; }

/* Haarlijn tussen de blokken in het paneel, zoals Rhode die zet. */
.single-product .summary .woocommerce-variation-add-to-cart,
.single-product .summary form.cart {
	border-top: 1px solid var(--bon-lijn, #E3E0DA);
	padding-top: 22px;
	margin-top: 6px;
}

/* ---- Uitklapregels ------------------------------------------------------ */

.bon-uitklap { margin-top: 28px; }

.bon-uitklap__blok { border-top: 1px solid var(--bon-lijn, #E3E0DA); }
.bon-uitklap__blok:last-child { border-bottom: 1px solid var(--bon-lijn, #E3E0DA); }

.bon-uitklap__blok summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 32px 18px 0;
	position: relative;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	color: var(--bon-tekst, #635B54);
}

.bon-uitklap__blok summary::-webkit-details-marker { display: none; }

/* Het plusje rechts, dat een minnetje wordt als het blok openstaat. */
.bon-uitklap__blok summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.bon-uitklap__blok[open] summary::after { content: "\2013"; }

.bon-uitklap__inhoud {
	padding: 0 0 22px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bon-tekst, #635B54);
}

.bon-uitklap__inhoud ul { padding-left: 18px; margin: 0 0 12px; }
.bon-uitklap__inhoud li { margin-bottom: 6px; }
.bon-uitklap__inhoud p:last-child { margin-bottom: 0; }
.bon-uitklap__inhoud table { width: 100%; font-size: 14px; }
.bon-uitklap__inhoud th { text-align: left; font-weight: 700; padding: 6px 12px 6px 0; }
.bon-uitklap__inhoud td { padding: 6px 0; }

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

.single-product .related.products,
.single-product .up-sells.products {
	margin-top: 48px;
	padding: 0;
}

.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: lowercase;
	margin: 0 0 24px;
	color: var(--bon-inkt, #2A2622);
}

@media (max-width: 1024px) {
	.single-product .summary.entry-summary { padding: 32px 28px; }
	.single-product .summary .product_title { font-size: 34px; }
}

@media (max-width: 767px) {
	.single-product .summary.entry-summary { padding: 28px 22px; }
	.single-product .summary .product_title { font-size: 30px; }
	.single-product .summary .price { font-size: 22px; }
	/* Raakvlak minstens 44 px. */
	.bon-uitklap__blok summary { padding-top: 16px; padding-bottom: 16px; }
}

/* ---- Correcties op de productpagina ------------------------------------- */

/* De koopknop: wit met een rand, zoals op Rhode. Het thema zet hier een gevulde
   knop neer met een hogere specificiteit, dus die moet hier expliciet overruled. */
.single-product .summary form.cart button.single_add_to_cart_button,
.single-product .summary form.cart .single_add_to_cart_button,
.woocommerce div.product .summary form.cart button.single_add_to_cart_button {
	background: #FFFFFF;
	color: var(--bon-inkt, #2A2622);
	border: 1px solid var(--bon-tekst, #635B54);
	font-size: 14px;
	letter-spacing: .28px;
}

.single-product .summary form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product .summary form.cart button.single_add_to_cart_button:hover {
	background: var(--bon-tekst, #635B54);
	color: #FFFFFF;
}

/* Hoekstraal op het hoofdbeeld: dezelfde 12 als elk ander paneel. */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woo-single-gallery .woocommerce-product-gallery__image img {
	border-radius: var(--bon-radius, 12px);
}

.woo-single-gallery .thumbs-slider img { border-radius: 8px; }

/* Aantal: de min- en plusknop waren onleesbaar klein. */
.woocommerce div.product .quantity { display: inline-flex; align-items: center; }

.woocommerce div.product .quantity button.decrease,
.woocommerce div.product .quantity button.increase {
	width: 40px;
	height: 44px;
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
	color: var(--bon-tekst, #635B54);
	background: transparent;
	border: 1px solid var(--bon-lijn, #E3E0DA);
	border-radius: 40px;
	cursor: pointer;
}

.woocommerce div.product .quantity input.qty {
	width: 52px;
	height: 44px;
	text-align: center;
	border: 0;
	background: transparent;
	font-size: 16px;
	color: var(--bon-tekst, #635B54);
}

/* Font Awesome is bewust verwijderd (92 kB CSS plus 1,3 MB webfonts op elke pagina).
   Op drie plekken bleef daardoor een leeg vierkantje staan. Die krijgen hier een
   glyph uit de tekstfont in plaats van het pakket terug te zetten. */

.open-product-share-popup-btn i,
.product-action i { display: none; }

.open-product-share-popup-btn::before {
	content: "\2197";
	margin-right: 8px;
	font-size: 15px;
}

.woo-single-gallery .swiper-nav-button i { display: none; }

.woo-single-gallery .swiper-button-prev::before { content: "\2039"; }
.woo-single-gallery .swiper-button-next::before { content: "\203A"; }

.woo-single-gallery .swiper-nav-button::before {
	font-size: 26px;
	line-height: 1;
	color: var(--bon-inkt, #2A2622);
}

/* De sluitknop van elke popup gebruikte hetzelfde pakket. */
.minimog-modal .button-close i,
.button-close i.fal { display: none; }
.minimog-modal .button-close::before { content: "\00D7"; font-size: 24px; line-height: 1; }

/* De koopknop nog een slag specifieker.
 *
 * Het thema geeft deze knop de klasse `alt` en kleurt hem via
 * `.woocommerce button.button.alt`. Die selector is specifieker dan de mijne, dus
 * hier staat hij er letterlijk in. Geen !important: het child theme laadt op
 * prioriteit 100 en wint daarmee op gelijke specificiteit. */
.woocommerce div.product .summary form.cart button.button.alt.single_add_to_cart_button,
.woocommerce div.product .summary form.cart a.button.alt.single_add_to_cart_button,
.woocommerce div.product .summary button.button.alt {
	background-color: #FFFFFF;
	background-image: none;
	color: var(--bon-inkt, #2A2622);
	border: 1px solid var(--bon-tekst, #635B54);
}

.woocommerce div.product .summary form.cart button.button.alt.single_add_to_cart_button:hover,
.woocommerce div.product .summary button.button.alt:hover {
	background-color: var(--bon-tekst, #635B54);
	color: #FFFFFF;
}

/* Het aantal: min, veld, plus, in die volgorde en alle drie zichtbaar.
 * In de opmaak staat het invoerveld vóór de knoppen, dus de volgorde wordt hier
 * met flex gezet in plaats van in de opmaak. */
.woocommerce div.product .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bon-lijn, #E3E0DA);
	border-radius: 40px;
	overflow: hidden;
	background: #FFFFFF;
}

.woocommerce div.product .quantity input.qty { order: 2; }
.woocommerce div.product .quantity button.decrease { order: 1; }
.woocommerce div.product .quantity button.increase { order: 3; }

.woocommerce div.product .quantity button.decrease,
.woocommerce div.product .quantity button.increase {
	border: 0;
	border-radius: 0;
	width: 44px;
	height: 46px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--bon-tekst, #635B54);
	background: transparent;
}

/* Het thema hangt hier een icoon uit Font Awesome aan, en dat pakket is er niet
   meer. De min en de plus staan al als tekst in de knop, dus het lege teken kan weg. */
.woocommerce div.product .quantity button.decrease::before,
.woocommerce div.product .quantity button.increase::before,
.woocommerce div.product .quantity button.decrease::after,
.woocommerce div.product .quantity button.increase::after { content: none; }

.woocommerce div.product .quantity input.qty {
	width: 46px;
	height: 46px;
	text-align: center;
	border: 0;
	background: transparent;
	font-size: 16px;
	color: var(--bon-inkt, #2A2622);
	-moz-appearance: textfield;
}

.woocommerce div.product .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Het aantal boven, de knop over de volle breedte eronder.
 *
 * Rhode heeft op de productpagina helemaal geen aantalkiezer: daar staat één knop
 * over de volle breedte. Wij houden het aantal wel, want sieraden worden vaker per
 * twee gekocht, maar de knop krijgt dezelfde volle breedte. Naast elkaar zetten
 * lukte niet zonder de opmaak van het thema te herschrijven, en dat is de winst
 * niet waard. */
.woocommerce div.product .summary form.cart {
	display: block;
}

.woocommerce div.product .summary form.cart .entry-product-quantity-wrapper {
	margin: 0 0 14px;
}

.woocommerce div.product .summary form.cart button.single_add_to_cart_button {
	width: 100%;
}

/* De koopknop vóór er een variant gekozen is.
 *
 * WooCommerce zet op een variabel product de klasse `disabled` op de knop tot er een
 * kleur of maat is gekozen, en Minimog kleurt die stand met `!important`. Die stand
 * is terecht — je kunt nog niets bestellen — maar hij zag eruit als de normale knop
 * in een andere kleur, alsof er iets kapot was. Nu is het duidelijk een wachtstand.
 *
 * Hier staat wel `!important`, omdat de regel van het thema dat ook doet en er anders
 * niet overheen te komen is. Dat is de enige plek in dit bestand waar dat gebeurt. */
.woocommerce div.product .summary button.single_add_to_cart_button.disabled,
.woocommerce div.product .summary button.button.alt.disabled {
	background-color: var(--bon-vlak, #F2F0EC) !important;
	color: var(--bon-gedempt, #746C65) !important;
	border-color: var(--bon-lijn, #E3E0DA);
	cursor: not-allowed;
}

.woocommerce div.product .summary button.single_add_to_cart_button.disabled:hover {
	background-color: var(--bon-vlak, #F2F0EC) !important;
	color: var(--bon-gedempt, #746C65) !important;
}

/* De drie delen binnen het aantalvak hebben een vaste breedte nodig, anders drukt
   het invoerveld de minknop weg. */
.woocommerce div.product .quantity button.decrease,
.woocommerce div.product .quantity button.increase { flex: 0 0 44px; }

.woocommerce div.product .quantity input.qty { flex: 0 0 48px; padding: 0; }

.woocommerce div.product .summary form.cart .entry-product-quantity-wrapper label,
.woocommerce div.product .summary .quantity-label {
	display: block;
	font-size: 14px;
	letter-spacing: .28px;
	margin-bottom: 8px;
	color: var(--bon-gedempt, #746C65);
}



/* Het thema zet de min- en plusknop absoluut in het aantalvak, met het invoerveld
   eronder. In een flexrij vallen ze dan alle drie op dezelfde plek. Terug naar de
   normale stroom, dan doet `order` zijn werk. */
.woocommerce div.product .quantity button.decrease,
.woocommerce div.product .quantity button.increase {
	position: static;
	transform: none;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
}

/* ==========================================================================
   De losse pagina's, de winkelmand en het afrekenen in dezelfde paneeltaal
   ==========================================================================
   Op Rhode is elke pagina een stapel panelen met hoekstraal 12 binnen een marge
   van 32. Zonder dit blijven de tekstpagina's kale tekst op wit en valt de site
   in twee helften uiteen.
   ========================================================================== */

.bon-pagina {
	background: var(--bon-paneel, #F2F0EC);
	border-radius: var(--bon-radius, 12px);
	padding: 64px 48px;
	margin: 8px 0 24px;
}

.bon-pagina__kop {
	font-size: 57.6px;
	line-height: 1;
	letter-spacing: -.02em;
}

/* De tegels op Cadeaus staan op het paneel, dus krijgen ze wit als achtergrond in
   plaats van hetzelfde vlak. Anders zie je ze niet. */
.bon-tegel {
	background: #FFFFFF;
	border: 0;
	border-radius: 8px;
	min-height: 148px;
}

.bon-tegel:hover { background: var(--bon-lijn, #E3E0DA); color: var(--bon-inkt, #2A2622); }

/* Placeholder op een paneel: wit vlak met een streepjesrand, anders valt hij weg. */
.bon-pagina .bon-placeholder,
.bon-pagina .bon-ph { background: #FFFFFF; }

/* Winkelmand en afrekenen */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
	background: var(--bon-paneel, #F2F0EC);
	border-radius: var(--bon-radius, 12px);
	padding: 48px 40px;
	margin: 8px 0 24px;
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	background: var(--bon-paneel, #F2F0EC);
	border-radius: var(--bon-radius, 12px);
	padding: 40px 32px;
	margin: 8px 0 24px;
}

/* Knoppen in de winkelmand en het afrekenen krijgen dezelfde pil. */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button,
.woocommerce .wc-block-components-button:not(.is-link) {
	border-radius: 40px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	background: var(--bon-tekst, #635B54);
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.bon-pagina { padding: 40px 24px; }
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout .woocommerce,
	.woocommerce-cart .wp-block-woocommerce-cart,
	.woocommerce-checkout .wp-block-woocommerce-checkout { padding: 28px 20px; }
}

/* ---- Cadeautegels met beeld --------------------------------------------- */

.bon-pagina--breed .bon-pagina__intro,
.bon-pagina--breed p { max-width: 62ch; }

.bon-tegels { gap: 24px; }

.bon-tegel {
	display: block;
	padding: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--bon-radius, 12px);
	background: #FFFFFF;
	text-transform: none;
	font-weight: 400;
	letter-spacing: 0;
}

.bon-tegel__beeld {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #FFFFFF;
}

.bon-tegel__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

.bon-tegel:hover .bon-tegel__beeld img { transform: scale(1.05); }

.bon-tegel__label {
	display: block;
	padding: 16px 18px 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	color: var(--bon-tekst, #635B54);
}

.bon-tegel__label em {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--bon-gedempt, #746C65);
}

.bon-tegel:hover { background: var(--bon-lijn, #E3E0DA); }

/* Een tegel zonder bruikbaar beeld.
 *
 * Bij Kant-en-klare bundels staat op alle drie de foto's een rode actiebanner die in
 * het bestand gebrand zit. Die gaan er niet op. In plaats van een wit gat krijgt de
 * tegel dan het categoriewoord groot op het vlak — dezelfde behandeling als de
 * productkaarten op de homepage. */
.bon-tegel--leeg .bon-tegel__beeld {
	background: var(--bon-vlak, #F2F0EC);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bon-tegel__leeg {
	font-size: 34px;
	line-height: 1.1;
	font-weight: 400;
	letter-spacing: -1.2px;
	text-transform: lowercase;
	color: var(--bon-gedempt, #746C65);
	text-align: center;
	padding: 0 16px;
}

/* ==========================================================================
   Toegankelijkheid
   ========================================================================== */

/* Zichtbare focus. Het thema haalt de standaard-outline weg en zet er niets voor
   terug, waardoor de site met het toetsenbord onbruikbaar is. Deze ring staat op
   alles wat focus kan krijgen en gebruikt `:focus-visible`, dus hij verschijnt bij
   toetsenbordgebruik en niet bij een muisklik. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--bon-inkt, #2A2622);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Op de hero ligt de navigatie op een foto; daar moet de ring wit zijn om op te
   vallen tegen de donkere delen van het beeld. */
.home #page-header a:focus-visible,
.home #page-header button:focus-visible,
.bon-hero a:focus-visible {
	outline-color: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(42, 38, 34, .45);
}

/* Wie beweging heeft uitgezet in zijn systeem krijgt geen beweging. Niet uitzetten
   met display:none of een transitie van 0,01s die alsnog schokt: gewoon geen
   overgang en geen transformatie. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms;
		animation-iteration-count: 1;
		transition-duration: .001ms;
		scroll-behavior: auto;
	}

	.bon-kaart__link:hover .bon-kaart__beeld img,
	.bon-paneelkaart__link:hover .bon-paneelkaart__beeld img,
	.bon-tegel:hover .bon-tegel__beeld img {
		transform: none;
	}
}

/* Overslaan naar de inhoud. Het thema heeft sinds 4.3.1 een skip-link; die blijft
   staan en krijgt hier alleen de vorm van de rest van de site. */
.skip-link:focus,
.screen-reader-text:focus {
	background: var(--bon-inkt, #2A2622);
	color: #FFFFFF;
	border-radius: 40px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .28px;
	text-transform: uppercase;
	z-index: 9999;
}

/* Het thema zet Jost op knoppen en formuliervelden. Dat lettertype wordt niet meer
   geladen, dus zonder deze regel valt de knop terug op een systeemfont dat naast
   Instrument Sans meteen opvalt. */
button,
input,
select,
textarea,
.button,
.btn,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.single_add_to_cart_button,
.wc-block-components-button {
	font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

/* Het lettertype van het thema aan de bron.
 *
 * Minimog schrijft `--minimog-typography-body-font-family: Jost` en
 * `--minimog-typography-headings-font-family: Jost` naar een `:root`-blok, en al zijn
 * eigen regels lezen die variabelen. Ze hier overschrijven is één plek in plaats van
 * dertig losse selectors, en het vangt ook de onderdelen die ik nog niet ben
 * tegengekomen. Jost wordt niet meer geladen, dus zonder dit valt alles wat het thema
 * zelf opmaakt terug op een systeemfont. */
:root {
	--minimog-typography-body-font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
	--minimog-typography-headings-font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
	--minimog-typography-menu-font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
	--minimog-typography-button-font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

/* Sectiekoppen staan links, ook die van het thema. Het thema centreert de kop boven
   de gerelateerde producten, en dat is de enige gecentreerde kop op de hele site. */
.single-product .related.products > h2,
.single-product .up-sells.products > h2,
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	text-align: left;
}

/* De donkere band aanvullen.
 *
 * `--bon-band--donker` bestond al, maar alleen voor de kop en de knop. In een band
 * met witte tekst moeten ook de alinea en de cursief mee, anders staat er taupe op
 * taupe. */
.bon-band--donker { color: #FFFFFF; }
.bon-band--donker p { color: rgba(255, 255, 255, .88); }
.bon-band--donker em { color: #FFFFFF; }