/*
  vdbom.nl stylesheet (port van de yogayatra-layout, zie docs/redesign-plan.md §11)
  ---------------------------------------------------------------------------------
  Volgorde: tokens, reset, basistypografie, paginalayout, topmenu, zijbalk, kaarten en
  overzichten, artikelpagina's (boomdetail, historie, contact), formulieren, lightbox,
  responsive (telefoon / tablet / desktop).

  Maten zijn in em op een 62.5% body-font (1em = 10px op de root); de twee grote
  containers zetten font-size 1.5em, daarbinnen is 1em = 15px.
*/

/* ======================================================================
   1. Design tokens
   ====================================================================== */
:root {
  /* kleuren */
  --ink: #2c5f2d;             /* titels, menu-items, eerste kopwoord */
  --text: #2c3e2c;            /* lopende tekst */
  --panel: #e4ebcd;           /* contentcontainers, zijbalkmenu */
  --panel-dark: #d8dfbd;      /* dropdown van het topmenu */
  --panel-arrow: #edf2df;
  --earth: #6f5b43;           /* tweede kopwoord, bijschriften; donker genoeg voor kleine tekst (AA) */
  --card: #ffffff;            /* kaarten, knoppen */
  --hover: #2a7448;           /* actieve / aangewezen menu-items, knopachtergrond; AA op wit en op --panel */
  --link: #257550;            /* links en focusring; AA op wit en op --panel */
  --submit: #1a5f1a;
  --leaf: #7cb342;
  --chip-bg: #eef4e6;
  --bg: #f8faf8;
  --error: #c0392b;
  --shadow: 1px 1px 1px #646060;
  --border-soft: #cdcdcd;

  /* lettertypen */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: var(--font-body);
  --font-ui: var(--font-body);
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;

  /* vormen */
  --radius-box: 20px;   /* containers, kaarten */
  --radius-btn: 10px;   /* knoppen */
  --radius-menu: 6px;   /* menu's, kleine knoppen */
  --radius-img: 5px;    /* foto's */
}

/* Cinzel (SIL Open Font License), zelf gehost: kopwoorden en zijbalkknoppen */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/cinzel-latin-ext.4716ebdae9b7.woff2") format("woff2");
  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: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/cinzel-latin.7a5ca9201524.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ======================================================================
   2. Reset
   ====================================================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  display: block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* ======================================================================
   3. Basistypografie
   ====================================================================== */
body {
  font: 62.5% var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  padding: 10px;
  margin-top: 5px;
  max-width: 100%;
  overflow-x: hidden;
}

ol {
  padding-left: 1.25em;
  list-style: decimal;
}

ul {
  padding-left: 1.25em;
  list-style: square;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--ink);
  text-decoration: none;
}

a:focus {
  background-color: var(--card);
  text-decoration: none;
}

p {
  margin: 0 0 1.6em 0;
  padding: 0;
}

form > p {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 1.5em;
  line-height: 125%;
  color: var(--ink);
  font-family: var(--font-text);
  margin-bottom: 10px;
  letter-spacing: .1em;
}

h2 {
  font-size: 1.3em;
  line-height: 125%;
  margin: 1.6em 0 10px 0;
  letter-spacing: .1em;
  color: var(--ink);
}

h3 {
  font-size: 1.1em;
  line-height: 125%;
  margin: 1.6em 0 10px 0;
  letter-spacing: .1em;
  color: var(--ink);
}

h4 {
  font-size: 1em;
  line-height: 125%;
  margin: 1.6em 0 10px 0;
  letter-spacing: .1em;
}

/* .nil = kleinere kopvariant voor titels binnen containers */
h1.nil {
  font-size: 1.1em;
  font-family: var(--font-text);
  letter-spacing: .1em;
}

h2.nil {
  font-size: 1.1em;
  letter-spacing: .1em;
}

h3.nil {
  font-size: 0.8em;
  letter-spacing: .1em;
}

.article-title h2.nil {
  margin-top: 0;
}

/* kop alleen voor zoekmachines en schermlezers, neemt geen ruimte in */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

ul + h1,
h1 + ul,
h2 + ul,
h3 + ul,
h4 + ul,
ul + p {
  margin: 1.6em 0 1.6em 0;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p {
  margin-top: 1em;
}

/* Doel van de skip-link en van de boom-naar-boom-links op de detailpagina (…/#inhoud):
   een beetje lucht boven de kruimels als de pagina daarop opent. */
#inhoud {
  scroll-margin-top: 12px;
}

/* geen overgangen voor wie dat in het systeem heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* toetsenbordfocus overal zichtbaar */
*:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

/* "spring naar inhoud" voor schermlezers en toetsenbord */
.skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 10;
  background: var(--ink);
  color: white;
  padding: 8px 12px;
  font-size: 1.4em;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  top: 0;
}

/* ======================================================================
   4. Paginalayout: kop, containers, footer
   ====================================================================== */
.pageWrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  position: relative;
}

/* de twee gekleurde woorden boven elke pagina, met het logo rechts */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 90px;
}

header ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
}

/* elke li is een regel; de woorden erin wisselen van kleur (.ink / .earth) */
header li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4em, 6vw, 5.5em);
  letter-spacing: 1.4px;
  line-height: 1.15;
}

header li span {
  margin-right: 0.45em;
}

header li span:last-child {
  margin-right: 0;
}

/* tweede regel (homepage: "Alphons van der Bom") kleiner */
header li.sub {
  font-size: clamp(1.5em, 3.4vw, 3em);
  letter-spacing: 1px;
  line-height: 1.3;
}

header li.sub span {
  margin-right: 0.2em;
}

.ink {
  color: var(--ink);
}

.earth {
  color: var(--earth);
}

.logoWrapper {
  flex: 0 0 auto;
  margin-right: 12px;
}

.logoWrapper a {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

/* naam van de kwekerij links van het logo, in de kopletter maar klein */
.site-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8em;
  line-height: 1.25;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-align: right;
}

.logoWrapper a:hover .site-name {
  color: var(--hover);
}

.logoWrapper img {
  display: block;
  width: 120px;
  height: auto;
  mix-blend-mode: multiply;   /* de PNG heeft een witte achtergrond */
}

.my_1_Container {
  height: auto;
  margin: 0 auto;
}

/* contentcontainer van overzichtspagina's */
.my_2_Container {
  width: 100%;
  max-width: 825px;
  height: auto;
  border-radius: var(--radius-box);
  box-shadow: var(--shadow);
  background-color: var(--panel);
  font-size: 1.5em;
  font-family: var(--font-ui);
  padding-bottom: 5px;
  margin: 0 auto 20px auto;
}

/* contentcontainer van artikelpagina's (boomdetail, historie, contact) */
.my_2_Container_artikel {
  float: left;
  width: 100%;
  max-width: 825px;
  min-height: 400px;
  border-radius: var(--radius-box);
  box-shadow: var(--shadow);
  background-color: var(--panel);
  font-size: 1.5em;
  font-family: var(--font-ui);
}

.columnWrapper {
  width: auto;
  margin-top: 3px;
  padding: 10px 15px 10px 15px;
}

/* masonry (bomenoverzicht): drie .mcol-kolommen die de view per positie modulo 3 vult,
   zodat de pagina per rij leest. Telefoons: de kolommen lossen op en de kaarten stapelen
   in leesvolgorde (inline order: N). Vanaf 600px staan de kolommen naast elkaar (§12);
   tot 1024px verdeelt site.js de kaarten over de eerste twee, per positie modulo 2. */
.columnWrapper.masonry {
  display: flex;
  flex-direction: column;
}

.columnWrapper.masonry > .mcol {
  display: contents;
}

/* meldingen (django.contrib.messages) */
.flash {
  list-style: none;
  margin: 8px 0 12px 0;
  padding: 0;
  font-size: 1.4em;
}

.flash li {
  background: var(--card);
  color: var(--ink);
  border-left: 5px solid var(--leaf);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin-bottom: 6px;
}

.flash li.error {
  border-left-color: var(--error);
  color: var(--error);
}

/* zijbalk: begint op dezelfde hoogte als het contentpaneel; de blokken staan 15px uit elkaar */
.my_3_Container {
  float: left;
  width: 275px;
  height: auto;
  margin-top: 0;
}

footer {
  clear: both;
  float: left;
  font-size: 1.5em;
  padding: 5px 5px 5px 25px;
  margin-bottom: 30px;
}

footer a {
  color: var(--ink);
  line-height: 1.2em;
  font-family: var(--font-text);
}

footer .voorFooter-b a {
  text-decoration: underline;
}

/* het straatadres opent een route in Google Maps; het houdt de aardkleur van de adresregel */
footer .voorFooter-r a {
  color: inherit;
  text-decoration: none;
}

footer .voorFooter-r a:hover {
  text-decoration: underline;
}

.voorFooter-b {
  color: var(--ink);
}

/* hoofdlinks boven de adresregel */
.footer-links {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
}

.footer-links li {
  display: inline;
}

.footer-links li + li::before {
  content: " | ";
  color: var(--earth);
}

.footer-links a {
  font-weight: bold;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--hover);
}

.voorFooter-r {
  color: var(--earth);
}

/* ======================================================================
   5. Topmenu (#menu) met hover-dropdown
   ====================================================================== */
#menu,
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu {
  width: auto;
  max-width: 1100px;
  margin: 5px 0 1px 10px;
}

#menu:before,
#menu:after {
  content: "";
  display: table;
}

#menu:after {
  clear: both;
}

#menu li {
  float: left;
  position: relative;
  text-align: center;
}

#menu a {
  float: left;
  padding: 12px 10px;
  color: var(--ink);
  font-weight: bold;
  font-size: 1.6em;
  font-family: var(--font-text);
  text-decoration: none;
}

#menu li:hover > a {
  color: var(--hover);
  border-radius: var(--radius-menu);
}

#menu ul {
  margin: 20px 0 0 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 3;
  background: var(--panel-dark);
  border-radius: 3px;
  box-shadow: var(--shadow);
  transition: all .2s ease-in-out;
}

#menu li:hover > ul,
#menu li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}

#menu ul li {
  float: none;
  display: block;
  border: 0;
}

#menu ul a {
  padding: 10px;
  display: block;
  white-space: nowrap;
  float: none;
  text-transform: none;
  text-align: left;
  font-size: 1.1em;
  min-width: 180px;
}

#menu ul a:hover {
  border-radius: var(--radius-menu);
}

/* pijltje boven de dropdown */
#menu ul li:first-child > a:after {
  content: "";
  position: absolute;
  left: 40px;
  top: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--panel-arrow);
  border-radius: var(--radius-menu);
}

/* huidige pagina in het topmenu (li.current zet de template tag) */
#menu > li.current > a,
#menu ul li.current > a {
  color: var(--hover);
}

/* alleen van kleur verschillen is te subtiel: een streep onder het huidige item */
#menu > li.current > a {
  text-decoration: underline;
  text-decoration-color: var(--leaf);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* alleen telefoons: hamburger */
.nav-toggle,
.nav-toggle-label {
  display: none;
}

/* ======================================================================
   6. Zijbalk: één knop (zo breed als het zoekveld), zoekveld, categorieën (.csm), adres
   ====================================================================== */
.cards-sidebar-top {
  list-style: none;
}

ul.cards-sidebar-top {
  display: block;
  width: 258.5px;
  margin: 0 0 0 12px;
  padding: 0;
}

.cards-sidebar-top a {
  font-size: 1.3em;
  font-family: var(--font-display);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 38px;       /* even hoog als het zoekveld eronder */
  margin: 0;
  padding: .3em 1em;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  background-color: var(--card);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.cards-sidebar-top a:hover {
  background-color: var(--panel);
  text-decoration: none;
}

.cards-sidebar-top li.current a {
  color: var(--hover);
}

/* zoekveld */
.side-search {
  clear: both;
  display: flex;
  gap: 4px;
  margin: 15px 0 0 12px;
  width: 258.5px;
  box-sizing: border-box;
}

.side-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: 1.4em;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow);
}

.side-search button {
  padding: 0 12px;
  font: inherit;
  font-size: 1.4em;
  font-weight: bold;
  color: white;
  background: var(--submit);
  border: none;
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.side-search button:hover {
  background: var(--hover);
}

/* categorieënmenu */
.csm {
  list-style: none;
  overflow: auto;
  background-color: var(--panel);
  border-radius: var(--radius-menu);
  max-width: 27em;
  padding: 0;
  margin: 15px 0 0 0;
  float: left;
}

ul.csm {
  margin-left: 12px;
  width: 258.5px;
  box-shadow: var(--shadow);
  display: block;
  list-style: none;
  padding: 0;
  text-align: right;
}

.csm .csm-title {
  font-family: var(--font-text);
  font-size: 1.2em;
  color: var(--earth);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 8px 12px 2px 0;
}

.csm li:hover > a {
  color: var(--hover);
  text-decoration: none;
}

.csm li > a {
  list-style: none;
  font-family: var(--font-text);
  font-size: 1.6em;
  font-weight: bold;
  color: var(--ink);
  margin-right: 12px;
  display: block;
  line-height: 1.5;
}

.csm li:last-child > a {
  padding-bottom: 6px;
}

/* huidige categorie (li.current zet de template tag) */
.csm li.current > a {
  color: var(--hover);
}

/* kenmerkfilters (partials/filters.html): elke groep is een <details>; de summary klapt
   hem open, een groep met een actieve waarde staat open. Zelfde blok als de categorieën. */
.csm.filters {
  clear: both;
  margin-top: 15px;
}

.csm details > ul {
  list-style: none;
  margin: 0;
  padding: 0 0 4px 0;
}

.csm summary {
  display: block;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 1.6em;
  font-weight: bold;
  color: var(--ink);
  margin-right: 12px;
  line-height: 1.5;
}

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

/* driehoekje voor de groepsnaam: dicht / open */
.csm summary::before {
  content: "\25B8";
  font-size: 0.7em;
  margin-right: 6px;
}

.csm details[open] > summary::before {
  content: "\25BE";
}

.csm summary:hover,
.csm li.current > details > summary {
  color: var(--hover);
}

.csm details > ul > li > a {
  display: block;
  font-family: var(--font-text);
  font-size: 1.25em;
  font-weight: normal;
  color: var(--ink);
  margin-right: 12px;
  line-height: 1.6;
}

.csm details > ul > li.currentLink > a {
  color: var(--hover);
  font-weight: bold;
}

.csm details > ul > li.currentLink > a::after {
  content: " \00d7";
}

.csm .count {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 0.75em;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
  background: var(--chip-bg);
  border-radius: 20px;
}

.csm li.clear-filters > a {
  font-size: 1.2em;
  font-weight: normal;
  color: var(--earth);
  padding-bottom: 8px;
}

/* actieve filters in de resultaatregel van het overzicht */
.active-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.active-filter {
  padding: 1px 9px;
  color: var(--ink);
  background: var(--chip-bg);
  border: 1px solid var(--leaf);
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.active-filter:hover {
  background: var(--panel-dark);
  text-decoration: none;
}

.clear-link {
  align-self: center;
  color: var(--earth);
}

/* andere bomen uit dezelfde categorie (detailpagina) */
.side-related {
  clear: both;
  float: left;
  width: 258.5px;
  margin: 15px 0 0 12px;
  padding: 10px 12px 12px 12px;
  box-sizing: border-box;
  background: var(--card);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow);
  font-family: var(--font-text);
}

.side-related h3 {
  font-size: 1.3em;
  color: var(--ink);
  margin: 0 0 8px 0;
}

.side-related h3 a {
  color: var(--ink);
  text-decoration: none;
}

.side-related h3 a:hover {
  color: var(--hover);
}

.side-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.side-related li a {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-size: 1.1em;
  line-height: 1.25;
}

.side-related li img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow);
  margin-bottom: 4px;
}

.side-related li a:hover {
  color: var(--hover);
}

.side-related li a:hover img {
  opacity: .85;
}

/* adres en keurmerken onder het menu */
.side-address {
  clear: both;
  float: left;
  width: 258.5px;
  margin: 15px 0 0 12px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: var(--card);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow);
  font-family: var(--font-text);
  font-size: 1.3em;
  line-height: 1.5;
  color: var(--text);
  text-align: right;
}

.side-address strong {
  color: var(--ink);
}

.side-address a {
  color: var(--text);
}

.side-address a:hover {
  color: var(--hover);
}

.side-badges {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.side-badges img {
  width: 66px;
  height: auto;
  border-radius: 3px;
}

/* ======================================================================
   7. Kaarten en overzichten
   ====================================================================== */
.header-cards-row-title {
  font-size: 1.4em;
  font-weight: bold;
  color: var(--ink);
  font-family: var(--font-text);
  margin-left: 12px;
}

.header-cards-row-title h2.nil {
  margin-top: 10px;
}

.result-line {
  font-size: 0.7em;
  font-weight: normal;
  color: var(--earth);
  margin: 0 0 6px 0;
  letter-spacing: .05em;
}

/* introductie van de categorie (Category.description) onder de kop van het overzicht */
.category-intro {
  font-size: 0.72em;
  font-weight: normal;
  line-height: 145%;
  max-width: 46em;
  margin: 0 12px 8px 0;
}

.category-intro p {
  margin: 0 0 6px 0;
}

.cards {
  padding: 10px;
  display: block;
  line-height: 20px;
  background-color: var(--card);
  border-radius: var(--radius-box);
  margin: 7px;
  box-shadow: var(--shadow);
  break-inside: avoid;
}

.card-title {
  font-weight: bold;
  line-height: 130%;
  padding: 25px 10px 5px 10px;
  color: var(--ink);
}

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-title a:hover {
  color: var(--hover);
}

/* Nederlandse naam onder de (Latijnse) naam, op de kaart en op de detailpagina */
.card-title .dutch-name {
  display: block;
  font-weight: normal;
  font-size: 0.9em;
  color: var(--earth);
}

.empty-overview {
  margin: 12px;
  color: var(--ink);
}

.card-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  max-width: 100%;
  box-shadow: var(--shadow);
  border-radius: var(--radius-img);
  height: auto;
}

/* boomkaart: foto over de volle kaartbreedte in 4:3 */
.tree-card .card-title {
  padding-top: 12px;
}

.tree-card .card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-text {
  font-size: 0.8em;
  font-family: var(--font-text);
  line-height: 130%;
  padding: 5px 10px 25px 10px;
  color: var(--text);
  letter-spacing: .2px;
}

.tree-card .card-text {
  padding-bottom: 12px;
}

.card-text p:last-child {
  margin-bottom: 0;
}

.card-count {
  color: var(--earth);
  font-weight: bold;
}

/* kenmerkchips (kaart en detailpagina) */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 10px 10px 0 10px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.chips li {
  font-size: 0.7em;
  line-height: 1.6;
  padding: 1px 9px;
  color: var(--ink);
  background: var(--chip-bg);
  border: 1px solid var(--panel-dark);
  border-radius: 20px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.chips li.chip-evergreen {
  border-color: var(--leaf);
}

/* de hele kaart is de link: het lege anker wordt over de kaart uitgerekt;
   links in de tekst blijven klikbaar omdat ze erboven liggen */
.cards {
  position: relative;
}

.card-text a {
  position: relative;
  z-index: 1;
}

.card-title a,
.card-image-link {
  position: relative;
  z-index: 1;
}

.card-text a.card-link {
  position: static;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cards:hover {
  box-shadow: 2px 2px 4px #646060;
}

.cards:hover .card-title {
  color: var(--hover);
}

/* homepage: de categorieën als vier kaarten, twee naast elkaar, in de stijl van de boomkaarten
   (naam + aantal boven, tekening eronder); de tekening staat vast op 16:9, dus alle kaarten even groot */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0 12px 12px 12px;
  padding: 0;
}

.category-grid .category-card {
  margin: 0;
}

.category-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.category-card .card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 10px 10px 10px;
}

.category-card .card-count {
  font-size: 0.8em;
  font-weight: normal;
  color: var(--earth);
  white-space: nowrap;
}

.category-card .card-image {
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.category-card:hover .card-title {
  color: var(--hover);
}

.fotoboekregel {
  display: inline-block;
  width: 100%;
}

/* tweede en volgende kop op contact en offerteaanvraag: ruimte in plaats van een lijn */
.article-title.section-start {
  margin-top: 30px;
}

/* homepage-kop: logo, keurmerken, pillen */
.hero {
  text-align: center;
  padding: 18px 10px 6px 10px;
}

.hero-logo {
  width: 280px;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
}

.hero-title {
  font-size: 1.1em;
  font-family: var(--font-text);
  color: var(--ink);
  letter-spacing: .08em;
  margin-bottom: 14px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.article-text .hero-badges {
  justify-content: flex-start;
  margin-bottom: 20px;
}

.hero-certs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.hero-certs img {
  width: 80px;
  height: auto;
  border-radius: 3px;
  box-shadow: var(--shadow);
}

.hero-trust {
  font-size: 0.8em;
  color: var(--earth);
  letter-spacing: .03em;
  margin-bottom: 8px;
}

.hero-trust a {
  color: var(--ink);
}

/* keurmerkpillen (homepage en historie) */
.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.9em;
  background: linear-gradient(135deg, rgba(45, 134, 89, 0.1) 0%, rgba(124, 179, 66, 0.1) 100%);
  border: 2px solid var(--hover);
  border-radius: 50px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .02em;
}

.eco-badge::before {
  content: "\2022";
  font-size: 1.2em;
  color: var(--link);
}

.organic-certified {
  background: linear-gradient(135deg, rgba(124, 179, 66, 0.15) 0%, rgba(76, 175, 80, 0.15) 100%);
  border-color: var(--leaf);
}

.organic-certified::before {
  content: "\2713";
  color: var(--leaf);
}

.royal-heritage {
  background: linear-gradient(135deg, rgba(139, 115, 85, 0.15) 0%, rgba(107, 84, 68, 0.15) 100%);
  border-color: var(--earth);
}

.royal-heritage::before {
  content: "\2605";
  color: var(--earth);
}

/* ======================================================================
   8. Artikelpagina's: boomdetail, historie, contact
   ====================================================================== */
/* Home › Bomen › Categorie › Boom, boven de titel en op overzichten */
.breadcrumb {
  font-family: var(--font-text);
  font-size: 0.8em;
  color: var(--ink);
  margin: 14px 30px 0 30px;
  break-inside: avoid;
}

.breadcrumb a {
  color: var(--ink);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--hover);
}

.breadcrumb .sep {
  margin: 0 6px;
  color: var(--earth);
}

.breadcrumb .here {
  color: var(--link);
}

.my_2_Container .breadcrumb {
  margin: 8px 12px 6px 12px;
}

.article-title {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 130%;
  padding: 5px 10px 0 10px;
  color: var(--ink);
  font-family: var(--font-text);
  margin-top: 20px;
  margin-left: 20px;
}

.article-title .dutch-name {
  font-size: 0.7em;
  font-weight: normal;
  color: var(--earth);
  margin: 2px 0 0 0;
}

.article-title .tree-category {
  font-size: 0.55em;
  font-weight: normal;
  letter-spacing: .05em;
  color: var(--earth);
  margin: 4px 0 0 0;
}

.article-text {
  font-size: 1.0em;
  font-family: var(--font-text);
  line-height: 145%;
  padding: 5px 10px;
  color: var(--text);
  letter-spacing: .3px;
  margin-top: 20px;
  margin-left: 20px;
}

/* Links in lopende tekst; de knop (offertelijst, bedankpagina) houdt zijn eigen witte tekst. */
.article-text a:not(.button-primary) {
  color: var(--link);
  text-decoration: underline;
}

.article-text .lead {
  font-size: 1.1em;
  color: var(--ink);
}

.article-text h1,
.article-text h2,
.article-text h3 {
  margin-left: 0;
}

.article-text ul,
.article-text ol {
  margin: 0 0 1.6em 1.25em;
}

.article-text iframe {
  max-width: 100%;
}

/* foto's die via de editor in een tekst staan */
.article-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-img);
}

.article-text table {
  border-collapse: collapse;
  margin: 0 0 1.6em 0;
}

.article-text td,
.article-text th {
  border: 1px solid var(--border-soft);
  padding: 4px 8px;
  vertical-align: top;
}

/* introductietekst op de homepage (pagina home-intro) */
.home-intro {
  margin: 0 20px 10px 20px;
}

/* artikelfoto, rechts van de tekst */
.myfloater {
  float: right;
  clear: right;
  width: 220px;
  margin: 20px 15px 20px 20px;
  box-shadow: var(--shadow);
  border-radius: var(--radius-img);
}

/* boomdetail: hoofdfoto rechts met strook kleine foto's eronder, tekst links */
.tree-gallery {
  float: right;
  clear: right;
  width: 46%;
  max-width: 370px;
  margin: 20px 20px 10px 20px;
}

.tree-main-link {
  display: block;
}

.tree-main {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow);
}

.tree-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tree-thumbs img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow);
}

.tree-thumbs a:hover img {
  outline: 2px solid var(--hover);
}

.tree-detail .article-text .chips {
  margin: 10px 0 0 0;
}

.kenmerken-wrap {
  clear: both;
  margin: 10px 30px 20px 30px;
  padding-top: 6px;
  font-family: var(--font-text);
}

.kenmerken {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  margin: 10px 0 16px 0;
}

.kenmerken > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 12px;
  background: var(--card);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow);
}

.kenmerken dt {
  font-weight: bold;
  color: var(--ink);
}

.kenmerken dd {
  color: var(--text);
}

.kenmerken dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--earth);
}

.kenmerken dd a:hover {
  color: var(--hover);
  border-bottom-color: var(--hover);
}

.tree-price {
  color: var(--earth);
  font-weight: bold;
}

/* vorige/volgende boom in de categorie, onder de kenmerken */
.tree-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 30px 20px 30px;
  font-family: var(--font-text);
}

/* vorige en volgende boom: knoppen zoals "Toevoegen aan offertelijst", even breed en even hoog
   (de grid rekt beide op tot de langste naam), tekst horizontaal en verticaal gecentreerd */
.tree-prevnext .button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.tree-price a {
  color: var(--link);
  text-decoration: underline;
}

/* contact */
.contact-address {
  font-style: normal;
  line-height: 1.6;
  margin: 0 0 1.6em 0;
}

.contact-address strong {
  color: var(--ink);
}

.maps-frame {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow);
  margin-bottom: 1.6em;
}

.route h3 {
  margin-top: 1.2em;
}

/* eenvoudige lijsten en tabellen (winkelmand, bestellingen) */
.plain-list {
  margin: 0 0 1.6em 1.25em;
}

.plain-table {
  width: 100%;
  margin-bottom: 1.6em;
}

.plain-table th,
.plain-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
}

/* ======================================================================
   9. Formulieren (partials/forms/form.html: één .form-row per veld)
   ====================================================================== */
.subform {
  margin: 10px 28px 15px 28px;
  font-family: var(--font-text);
  color: var(--text);
}

.article-text .subform {
  margin-left: 0;
  margin-right: 0;
}

.subform .form-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.subform .label {
  font-weight: bold;
  font-size: 0.95em;
  line-height: 1.3;
  text-align: right;
  padding-top: 7px;
  color: var(--ink);
}

.subform .field {
  min-width: 0;
}

.subform input:not([type="radio"]):not([type="checkbox"]),
.subform textarea,
.subform select {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.95em;
  color: #333;
  background: white;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.subform input[type="number"] {
  max-width: 100px;
}

.subform textarea {
  resize: vertical;
}

.subform input:focus,
.subform textarea:focus {
  background-color: #fbfdf7;
  color: black;
  outline: 2px solid var(--link);
  outline-offset: 1px;
}

/* fouten: lijst boven de velden voor formulierbrede fouten, regel onder het veld anders */
ul.form-errors,
.errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  color: var(--error);
  font-size: 0.9em;
}

.subform .form-error {
  display: block;
  margin-top: 4px;
  color: var(--error);
  font-size: 0.85em;
}

.subform .form-help {
  display: block;
  margin-top: 4px;
  color: var(--earth);
  font-size: 0.85em;
}

.subform .has-error input,
.subform .has-error textarea {
  border-color: var(--error);
}

.subform .form-actions {
  margin-top: 5px;
}

.subform button[type="submit"] {
  grid-column: 2;
  justify-self: start;
  min-width: 120px;
  padding: 10px 25px;
  font: inherit;
  font-size: 1em;
  color: white;
  background: var(--submit);
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 4px white;
  cursor: pointer;
}

.subform button[type="submit"]:hover,
.subform button[type="submit"]:focus-visible {
  background: var(--hover);
}

/* het honeypotveld staat buiten beeld */
.hp-field {
  position: absolute;
  left: -5000px;
}

/* ======================================================================
   10. Offertelijst: knop op de boompagina (partials/quote_button.html), de lijst
       (cart/offertelijst.html), de aanvraag (payment/quote_request.html) en de
       tellers in de menu's (.quote-count; js/quote.js werkt ze bij)
   ====================================================================== */
[hidden] {
  display: none !important;
}

/* teller: in het topmenu "(3)" achter het woord, op de zijbalkknop een rond label */
.cards-sidebar-top li {
  position: relative;
}

.cards-sidebar-top .quote-count.badge {
  position: absolute;
  top: -9px;
  right: -6px;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--hover);
  color: white;
  font: bold 12px/22px var(--font-ui);
  text-align: center;
  box-shadow: var(--shadow);
}

/* op de boompagina, onder de kenmerken */
.quote-box,
.tree-price {
  clear: both;
  margin: 0 30px 20px 30px;
  font-family: var(--font-text);
}

.quote-box {
  padding: 14px 18px;
  background: var(--chip-bg);
  border-radius: var(--radius-btn);
}

.quote-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}

.quote-form label {
  font-weight: bold;
  color: var(--ink);
}

.quote-form input[type="number"],
.quote-table input[type="number"] {
  box-sizing: border-box;
  width: 68px;
  padding: 7px 8px;
  font: inherit;
  color: #333;
  background: white;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.quote-form button,
.button-primary {
  display: inline-block;
  padding: 10px 22px;
  font: inherit;
  font-weight: bold;
  color: white;
  background: var(--submit);
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 4px white;
  cursor: pointer;
  text-decoration: none;
}

.quote-form button:hover,
.quote-form button:focus-visible,
.button-primary:hover,
.button-primary:focus-visible,
.quote-form button.done {
  background: var(--hover);
  color: white;
  text-decoration: none;
}

.quote-form button[disabled] {
  opacity: 0.7;
  cursor: wait;
}

.quote-note,
.quote-in-list,
.quote-privacy {
  margin: 10px 0 0 0;
  font-size: 0.9em;
  color: var(--earth);
}

.quote-in-list {
  color: var(--ink);
  font-weight: bold;
}

.subform + .quote-privacy {
  margin: 0 28px 16px 28px;
}

/* de lijst */
.quote-table {
  width: 100%;
  margin: 0 0 1.4em 0;
  border-collapse: collapse;
}

.quote-table th,
.quote-table td {
  padding: 8px 6px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-soft);
}

.quote-table th {
  font-size: 0.85em;
  font-weight: normal;
  color: var(--earth);
}

.quote-tree {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quote-thumb img {
  display: block;
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: var(--radius-img);
}

.quote-name small {
  color: var(--earth);
}

.quote-qty form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.quote-table button.small {
  padding: 6px 10px;
  font: inherit;
  font-size: 0.85em;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  cursor: pointer;
}

.quote-table button.small:hover {
  background: var(--panel);
}

.quote-flash {
  font-size: 0.85em;
  color: var(--hover);
}

.quote-remove {
  text-align: right;
}

.link-button {
  padding: 0;
  font: inherit;
  font-size: 0.9em;
  color: var(--link);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--error);
}

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 6px 0 4px 0;
}

.button-secondary {
  color: var(--link);
}

/* samenvatting boven het aanvraagformulier */
.quote-summary {
  margin: 0 0 8px 0;
  padding: 0;
  list-style: none;
}

.quote-summary li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
}

.quote-summary .qty {
  display: inline-block;
  min-width: 3em;
  font-weight: bold;
  color: var(--ink);
}

/* ======================================================================
   11. Lightbox (een <dialog> die js/site.js maakt voor a.open-popup-link)
   ====================================================================== */
dialog.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
}

dialog.lightbox[open] {
  display: flex;
}

dialog.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

dialog.lightbox figure {
  margin: 0;
  text-align: center;
  outline: none;
  pointer-events: none;
}

dialog.lightbox img {
  max-width: calc(100vw - 100px);
  max-height: calc(100vh - 80px);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

dialog.lightbox figcaption {
  margin-top: 8px;
  color: #ccc;
  font: 13px/1.4 var(--font-ui);
}

dialog.lightbox button {
  position: absolute;
  padding: 0;
  background: none;
  border: none;
  color: white;
  font-family: var(--font-ui);
  line-height: 1;
  opacity: 0.75;
  cursor: pointer;
}

dialog.lightbox button:hover,
dialog.lightbox button:focus-visible {
  opacity: 1;
}

dialog.lightbox .lightbox-close {
  top: 8px;
  right: 14px;
  font-size: 40px;
}

dialog.lightbox .lightbox-prev,
dialog.lightbox .lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  padding: 20px 10px;
  font-size: 60px;
}

.lightbox-prev {
  left: 8px;
}

.lightbox-next {
  right: 8px;
}

.lightbox-counter {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #ccc;
  font: 12px var(--font-ui);
}

/* ======================================================================
   12. Responsive
   ====================================================================== */

/* ---- telefoons ---- */
@media (max-width: 767px) {
  body {
    font-size: 80%;
  }

  .article-text table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .columnWrapper {
    padding: 5px;
  }

  .my_2_Container {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0 auto 20px auto;
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.3em;
  }

  .my_3_Container {
    width: 100%;
    float: none;
    margin: 20px auto;
  }

  .cards {
    margin: 10px;
    max-width: 100%;
    width: auto;
    padding: 15px;
  }

  .card-title {
    font-size: 1.1em;
    padding: 15px 10px 10px 10px;
  }

  .card-image {
    width: 90%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 15px auto;
  }

  .tree-card .card-image {
    width: 100%;
    max-width: none;
    margin: 6px 0 0 0;
  }

  .card-text {
    font-size: 0.9em;
    padding: 10px;
  }

  /* de hamburger staat op de kopregel; de woorden krijgen de rest */
  header {
    min-height: 62px;
    padding-right: 66px;
    box-sizing: border-box;
    gap: 6px;
  }

  header li {
    font-size: 2em;
    letter-spacing: 0.5px;
  }

  header li span {
    margin-right: 0.3em;
  }

  header li.sub {
    font-size: 1.2em;
    line-height: 1.2;
  }

  .logoWrapper {
    margin-right: 0;
  }

  .site-name {
    display: none;   /* op een telefoon is er naast de kopwoorden geen ruimte voor */
  }

  .logoWrapper img {
    width: 56px;
  }

  /* hamburger: drie streepjes rechtsboven; de checkbox schakelt het topmenu */
  .nav-toggle-label {
    display: block;
    position: absolute;
    top: 12px;
    right: 14px;
    width: 44px;
    height: 40px;
    margin: 0;
    padding: 6px 8px;
    box-sizing: border-box;
    background-color: var(--panel);
    border-radius: var(--radius-menu);
    box-shadow: var(--shadow);
    cursor: pointer;
    z-index: 2;
  }

  .nav-toggle-label span {
    display: block;
    height: 4px;
    margin: 4px 0;
    background-color: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* de checkbox zelf staat buiten beeld maar blijft met het toetsenbord bereikbaar */
  .nav-toggle {
    display: block;
    position: absolute;
    top: 12px;
    right: 14px;
    width: 44px;
    height: 40px;
    margin: 0;
    opacity: 0;
    z-index: 1;
  }

  .nav-toggle:focus-visible ~ .nav-toggle-label {
    outline: 3px solid var(--link);
    outline-offset: 2px;
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  #menu {
    display: none;
    width: auto;
    margin: 0 10px 12px 10px;
    background-color: var(--panel);
    border-radius: var(--radius-menu);
    box-shadow: var(--shadow);
  }

  .nav-toggle:checked ~ #menu {
    display: block;
  }

  #menu li,
  #menu ul li {
    float: none;
    display: block;
    text-align: left;
  }

  #menu ul,
  #menu li:hover > ul,
  #menu li:focus-within > ul {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    margin: 0;
    background: none;
    box-shadow: none;
    transition: none;
  }

  #menu a,
  #menu ul a {
    float: none;
    display: block;
    width: auto;
    padding: 10px 14px;
    font-size: 1.1em;
    text-align: left;
    white-space: normal;
    border-top: 1px solid #fff;
  }

  #menu > li:first-child > a {
    border-top: none;
  }

  #menu ul a {
    padding-left: 34px;
    font-size: 1em;
    font-weight: normal;
    min-width: 0;
  }

  #menu ul li:first-child > a:after {
    content: none;
  }

  /* volgorde: menu, zijbalk (knoppen + zoeken), inhoud, adres */
  .my_1_Container {
    display: flex;
    flex-direction: column;
  }

  #menu-wrap {
    order: -2;
  }

  .flash {
    order: -1;
  }

  .my_3_Container {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    margin: 8px auto 12px auto;
    text-align: center;
  }

  .cards-sidebar-top,
  ul.cards-sidebar-top {
    float: none;
    display: flex;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .cards-sidebar-top a {
    min-width: 100px;
    margin: 4px 2px;
    font-size: 1em;
  }

  .side-search {
    clear: none;
    width: 100%;
    max-width: 320px;
    margin: 4px 0 0 0;
  }

  /* categorieën staan op telefoons in het hamburgermenu (onder Bomen), het adres in de footer */
  .my_3_Container .csm,
  .my_3_Container .side-address,
  .my_3_Container .side-related {
    display: none;
  }

  /* de kenmerkfilters wel: als blok onder de knoppen, groepen dichtgeklapt */
  .my_3_Container .csm.filters {
    display: block;
    clear: none;
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 6px 0 0 0;
  }

  .my_3_Container .csm.filters summary,
  .my_3_Container .csm.filters details > ul > li > a {
    font-size: 1.15em;
  }

  .active-filters {
    display: flex;
    margin: 4px 0 0 0;
  }

  .category-grid {
    grid-template-columns: 1fr;
    margin: 0 8px 10px 8px;
  }

  .breadcrumb {
    margin: 10px 14px 0 14px;
  }

  footer {
    float: none;
    width: 100%;
    padding: 6px 10px 16px 10px;
    box-sizing: border-box;
    font-size: 1.1em;
    text-align: center;
  }

  .my_2_Container_artikel {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0 auto 20px auto;
    padding: 5px;
    box-sizing: border-box;
    font-size: 1.1em;
    border-radius: 10px;
  }

  .article-title,
  .article-text {
    margin-left: 4px;
  }

  .myfloater {
    float: none;
    clear: both;
    display: block;
    width: 70%;
    max-width: 280px;
    margin: 15px auto;
  }

  .tree-gallery {
    float: none;
    width: auto;
    max-width: none;
    margin: 12px 10px 0 10px;
  }

  .tree-thumbs {
    justify-content: center;
  }

  .kenmerken-wrap {
    margin: 10px 12px 16px 12px;
  }

  .kenmerken {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-logo {
    width: 220px;
  }

  /* formulieren: label boven het veld, velden over de volle breedte */
  .subform {
    margin: 10px 14px 15px 14px;
  }

  .subform .form-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .subform .label {
    text-align: left;
    padding-top: 0;
  }

  .subform input:not([type="radio"]):not([type="checkbox"]),
  .subform textarea,
  .subform select {
    max-width: 100%;
  }

  .subform button[type="submit"] {
    grid-column: 1;
  }

  /* offertelijst */
  .quote-box,
  .tree-price {
    margin: 0 14px 16px 14px;
  }

  .tree-prevnext {
    margin: 8px 14px 16px 14px;
  }

  .cards-sidebar-top .quote-count.badge {
    top: -4px;
  }

  .quote-thumb img {
    width: 64px;
    height: 48px;
  }

  .quote-table th,
  .quote-table td {
    padding: 6px 4px;
  }

  .subform + .quote-privacy {
    margin: 0 14px 16px 14px;
  }

  /* lightbox: foto over de volle breedte; vorige / teller / volgende in een eigen balk onder
     de foto, boven de browserbalk (dvh + safe area). Vegen gaat ook naar vorige / volgende. */
  dialog.lightbox {
    box-sizing: border-box;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  dialog.lightbox img {
    max-width: 100vw;
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px - env(safe-area-inset-bottom));
  }

  dialog.lightbox .lightbox-close {
    top: calc(4px + env(safe-area-inset-top));
    right: 12px;
    padding: 4px 12px;
  }

  dialog.lightbox .lightbox-prev,
  dialog.lightbox .lightbox-next {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: none;
    padding: 0 26px 6px 26px;
    font-size: 44px;
    height: 48px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    opacity: 1;
  }

  dialog.lightbox .lightbox-prev {
    left: 16px;
  }

  dialog.lightbox .lightbox-next {
    right: 16px;
  }

  .lightbox-counter {
    bottom: calc(29px + env(safe-area-inset-bottom));
    font-size: 14px;
  }
}

/* ---- masonry-kolommen naast elkaar: alles breder dan een telefoon ----
   Alleen het bomenoverzicht. Drie kolommen vanaf 1024px. Tussen 600 en 1023px (kleine tablets
   zoals een iPad mini, die verder de telefoonlayout krijgen, en tablets rechtop) verdeelt
   site.js de kaarten opnieuw over de eerste twee kolommen, met dezelfde media query: houd de
   twee gelijk. */
@media (min-width: 600px) {
  .columnWrapper.masonry {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 10px;
  }

  .columnWrapper.masonry > .mcol {
    display: block;
    flex: 1 1 0;
    min-width: 0;
  }

  .columnWrapper.masonry > .header-cards-row-title,
  .columnWrapper.masonry > .breadcrumb,
  .columnWrapper.masonry > .fotoboekregel,
  .columnWrapper.masonry > .empty-overview {
    flex: 0 0 100%;
    box-sizing: border-box;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- tablets (ook desktopvensters die te smal zijn voor de desktoplayout) ----
   Zijbalk rechts naast de inhoud, zoals op een desktop, maar smaller (230px). */
@media (min-width: 768px) and (max-width: 1139px) {
  .my_1_Container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    grid-template-areas:
      "menu menu"
      "flash flash"
      "content side"
      "footer footer";
    column-gap: 12px;
    align-items: start;
  }

  #menu-wrap {
    grid-area: menu;
  }

  .flash {
    grid-area: flash;
  }

  main {
    grid-area: content;
    min-width: 0;
  }

  /* flow-root: zoals de float op een desktop houdt het paneel de marges van zijn eerste en
     laatste kind (kruimelpad, vorige/volgende) en de zwevende foto's binnen de rand */
  .my_2_Container,
  .my_2_Container_artikel {
    display: flow-root;
    width: auto;
    max-width: none;
    float: none;
    margin: 0 0 20px 0;
  }

  .my_3_Container {
    grid-area: side;
    width: auto;
    float: none;
    margin: 0;
  }

  footer {
    grid-area: footer;
    float: none;
  }

  .columnWrapper {
    padding: 10px;
  }

  /* de blokken van de zijbalk vullen de kolom */
  ul.cards-sidebar-top,
  .side-search,
  .csm,
  ul.csm,
  .side-related,
  .side-address {
    float: none;
    width: auto;
    max-width: none;
    margin-left: 0;
  }

  /* andere bomen: twee naast elkaar in plaats van drie, anders passen de namen niet */
  .side-related ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* iets meer ruimte per regel voor vingers */
  .csm li > a,
  .csm summary {
    line-height: 1.7;
  }

  .csm details > ul > li > a {
    line-height: 1.8;
  }

  header li {
    font-size: 4em;
  }

  header li span {
    margin-right: 20px;
  }

  header li.sub {
    font-size: 2.2em;
  }

  .logoWrapper img {
    width: 90px;
  }

  /* topmenu als één omlopende rij. Het submenu van Bomen blijft dicht: de categorieën
     staan in de zijbalk ernaast, en op een aanraakscherm is er geen hover om het te openen.
     Links uitgelijnd boven het paneel, zoals op een desktop. */
  #menu {
    width: auto;
    margin: 5px 0 6px 12px;
    text-align: left;
  }

  #menu li {
    display: contents;
  }

  #menu ul,
  #menu li:hover > ul,
  #menu li:focus-within > ul {
    display: none;
  }

  #menu a {
    float: none;
    display: inline-block;
    width: auto;
    min-width: 0;
    padding: 10px 8px;
    font-size: 1.3em;
    text-align: center;
    white-space: normal;
  }
}

/* tablets rechtop: de zijbalk (zoeken, filters) blijft in beeld terwijl de pagina schuift en
   schuift zelf als hij hoger is dan het scherm (een opengeklapte filtergroep). De padding
   houdt de teller op de knop Offertelijst en de schaduw van de blokken binnen het schuifvak;
   de negatieve marge zet de blokken terug op hun plaats. Liggend schuift hij gewoon mee. */
@media (min-width: 768px) and (max-width: 1139px) and (min-height: 900px) {
  .my_3_Container {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    max-height: 100vh;
    overflow-y: auto;
    padding: 10px 8px 3px 0;
    margin: -10px -8px 0 0;
  }
}

/* ---- desktop: 825 + 275px naast elkaar, plus de bodymarge en een schuifbalk ---- */
@media (min-width: 1140px) {
  .my_2_Container {
    width: 825px;
    max-width: 825px;
    float: left;
    margin: 0 0 20px 0;
  }

  .my_3_Container {
    width: 275px;
    float: left;
    margin-top: 0;
  }

  #menu {
    width: 1100px;
  }

  .my_2_Container_artikel {
    width: 825px;
    float: left;
  }
}