@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@400;500;600;700&display=swap");

@font-face{font-family:'Recoleta';src:url('../fonts/Recoleta-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Recoleta';src:url('../fonts/Recoleta-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Recoleta';src:url('../fonts/Recoleta-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Recoleta';src:url('../fonts/Recoleta-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Recoleta';src:url('../fonts/Recoleta-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ── Design tokens (overschrijfbaar om op het thema af te stemmen) ── */
.gbr-matrix-root{
  --gbr-terra:#AE7250; --gbr-terra-deep:#925B3C; --gbr-terra-dark:#7D4E34;
  --gbr-lav:#DFBFD7; --gbr-lav-light:#EEE2EB; --gbr-lav-soft:#F4EAF1; --gbr-lav-bg:#F7F0F5;
  --gbr-bg:#F6F6F6; --gbr-cream:#FAF9F5; --gbr-white:#FFFFFF;
  --gbr-ink:#181C1B; --gbr-slate:#3B3E3D; --gbr-gray:#828282; --gbr-faint:#A9A29B;
  --gbr-line:#EBE6E0; --gbr-line-soft:#F0ECE6; --gbr-sage:#7E976B;
  --gbr-serif:'Recoleta','Lora',Georgia,serif;
  --gbr-sans:'Raleway',system-ui,sans-serif;
}

.gbr-matrix-root *{box-sizing:border-box;}
.gbr-matrix-root{ color:var(--gbr-slate); line-height:1.5; -webkit-font-smoothing:antialiased; }
/* Plugin-font alleen op de tabel zelf; toelichtingen erven de site-brede typografie. */
.gbr-matrix-root .gbr-matrix-wrap, .gbr-matrix-root .gbr-pkg-switch, .gbr-matrix-root .gbr-footnotes{ font-family:var(--gbr-sans); }

/* ── matrix ── */
.gbr-matrix-wrap{ overflow-x:auto; }
.gbr-pkg-switch{ display:none; }
table.gbr-matrix{ width:100%; border-collapse:collapse; }

.gbr-matrix thead th{ vertical-align:top; padding:16px 14px 8px; text-align:center; font-weight:400; }
.gbr-th-tag .gbr-tagcell{ vertical-align:top; text-align:center; padding:6px 14px 24px; }
.gbr-htag{ margin:0 auto; max-width:240px; font-family:var(--gbr-serif); font-style:italic; font-size:15px; color:var(--gbr-gray); line-height:1.4; }
.gbr-ribbon-slot{ height:26px; margin-bottom:4px; display:flex; align-items:flex-start; justify-content:center; }
.gbr-matrix thead .gbr-corner{ background:transparent; vertical-align:bottom; padding:0 10px 8px 0; }
.gbr-ph{ display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; }
.gbr-ph img{ width:74px; height:74px; object-fit:contain; margin-bottom:6px; }
.gbr-ph .gbr-pname{ font-family:var(--gbr-serif); font-weight:600; font-size:23px; color:var(--gbr-terra); }
.gbr-ph .gbr-pprice{ font-family:var(--gbr-serif); font-weight:600; font-size:34px; color:var(--gbr-ink); line-height:1.1; margin-top:2px; }
.gbr-draagkracht{ display:flex; align-items:flex-start; gap:8px; text-align:left; margin-left:30px;
  background:var(--gbr-lav-soft); border:1px solid var(--gbr-lav-light); border-radius:12px; padding:10px 12px;
  font-size:12px; line-height:1.4; font-weight:600; color:var(--gbr-terra-dark); text-decoration:none; }
.gbr-draagkracht svg{ flex:0 0 auto; margin-top:1px; }
.gbr-draagkracht .gbr-u{ text-decoration:underline; text-underline-offset:2px; }
.gbr-ribbon{ display:inline-block; background:var(--gbr-terra); color:var(--gbr-lav-light); border-radius:999px;
  font-weight:700; font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; padding:5px 13px; }

/* feature rows */
.gbr-matrix tbody th.gbr-feat{ text-align:left; font-weight:500; font-size:15px; color:var(--gbr-slate);
  padding:15px 16px 15px 4px; border-top:1px solid var(--gbr-line); }
.gbr-matrix tbody td{ text-align:center; border-top:1px solid var(--gbr-line); padding:15px 14px; vertical-align:middle; }
.gbr-matrix tbody tr:first-child th, .gbr-matrix tbody tr:first-child td{ border-top:none; }

.gbr-ico-yes{ display:inline-block; vertical-align:middle; }
.gbr-ico-no{ display:inline-block; width:16px; height:2.5px; background:#BBAC9F; border-radius:2px; vertical-align:middle; }
.gbr-val{ font-family:var(--gbr-serif); font-style:italic; font-size:14.5px; color:var(--gbr-terra-dark); }
.gbr-fnstar{ color:var(--gbr-terra); font-weight:700; font-size:1.65em; vertical-align:-0.32em; line-height:0; margin-left:2px; }
.gbr-feat-sub{ display:block; font-size:12.5px; color:var(--gbr-gray); font-weight:500; margin-top:4px; line-height:1.4; max-width:300px; }
.gbr-nvt{ display:inline-block; max-width:150px; font-style:italic; font-size:12.5px; color:var(--gbr-faint); line-height:1.35; }

/* klikbare label-link naar toelichting */
.gbr-feat .gbr-uitleg-link{ color:var(--gbr-terra-dark); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; cursor:pointer; transition:color .15s; }
.gbr-feat .gbr-uitleg-link:hover{ color:var(--gbr-terra); }

/* highlighted (featured) column */
.gbr-hl{ background:var(--gbr-lav-soft); }
.gbr-matrix thead th.gbr-hl{ border-radius:16px 16px 0 0; }
.gbr-matrix tfoot td.gbr-hl{ border-radius:0 0 16px 16px; }

/* footer / cta */
.gbr-matrix tfoot td{ padding:22px 16px 8px; text-align:center; }
.gbr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:230px;
  background:var(--gbr-terra); color:var(--gbr-lav-light); font-weight:700; letter-spacing:.3px; font-size:15px;
  padding:13px 18px; border:none; border-radius:999px; cursor:pointer; text-decoration:none; transition:background .16s, transform .16s; }
.gbr-btn:hover{ background:var(--gbr-terra-deep); transform:translateY(-1px); color:var(--gbr-lav-light); }

/* ── voetnoten (geen achtergrond — zo onderscheidend t.o.v. de toelichtingen) ── */
.gbr-footnotes{ display:grid; gap:12px; margin-top:36px; padding:0; max-width:880px; }
.gbr-fn{ display:flex; gap:13px; }
.gbr-fn .gbr-mark{ font-family:var(--gbr-serif); font-size:16px; color:var(--gbr-terra); line-height:1.2; flex:0 0 auto; width:14px; }
.gbr-fn p{ margin:0; font-size:13.5px; color:var(--gbr-slate); }
.gbr-fn p strong{ color:var(--gbr-ink); font-family:var(--gbr-serif); font-weight:600; }

/* ── toelichtingen (anchor-doelen onder de tabel) ──
   Typografie volgt de site-brede instellingen via de Elementor-CTA-classes:
   géén eigen font-family/-size/-color forceren. */
/* Even breed als de tabel (geen max-width). */
.gbr-explanations{ display:grid; gap:14px; margin-top:24px; }
.gbr-uitleg{ scroll-margin-top:90px; background:var(--gbr-cream); border:1px solid var(--gbr-line);
  border-radius:16px; padding:18px 22px; transition:background .4s, box-shadow .4s; }
/* Met afbeelding: foto links, tekst springt als geheel in. Zonder: normaal blok. */
.gbr-uitleg.gbr-has-image{ display:flex; gap:24px; align-items:flex-start; }
.gbr-uitleg-image{ flex:0 0 300px; width:300px; height:300px; object-fit:cover; border-radius:12px; display:block; }
.gbr-uitleg-body{ flex:1 1 auto; min-width:0; }
.gbr-uitleg .gbr-uitleg-title{ margin:0 0 6px; }
.gbr-uitleg .gbr-uitleg-desc{ margin:0; }
.gbr-uitleg:target{ background:var(--gbr-lav-soft); box-shadow:0 0 0 2px var(--gbr-lav) inset; }
.gbr-uitleg-back{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-family:var(--gbr-sans);
  font-size:13px; font-weight:600; color:var(--gbr-terra-dark); text-decoration:none; cursor:pointer; transition:color .15s; }
.gbr-uitleg-back:hover{ color:var(--gbr-terra); }
.gbr-uitleg-back svg{ flex:0 0 auto; }

@media (max-width:760px){
  .gbr-pkg-switch{ display:flex; gap:8px; margin:0 0 22px; }
  .gbr-pkg-switch button{ flex:1; font-family:var(--gbr-sans); font-weight:700; font-size:13px; letter-spacing:.2px;
    color:var(--gbr-terra-dark); background:var(--gbr-cream); border:1px solid var(--gbr-line); border-radius:999px;
    padding:11px 6px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
  .gbr-pkg-switch button.active{ background:var(--gbr-terra); color:#fff; border-color:var(--gbr-terra); }

  .gbr-matrix-wrap{ overflow-x:visible; }
  table.gbr-matrix{ min-width:0 !important; table-layout:auto; }
  table.gbr-matrix col{ width:auto !important; }

  .gbr-matrix thead th{ padding:12px 8px 6px; }
  .gbr-ph img{ width:60px; height:60px; }
  .gbr-ph .gbr-pprice{ font-size:30px; }
  .gbr-ph .gbr-pname{ font-size:21px; }
  .gbr-th-tag .gbr-tagcell{ padding:6px 8px 18px; }
  .gbr-htag{ font-size:14px; max-width:none; }

  .gbr-matrix tbody th.gbr-feat{ font-size:14px; padding:13px 8px 13px 2px; }
  .gbr-matrix tbody td{ padding:13px 6px; }
  .gbr-matrix tfoot td{ padding:20px 8px 6px; }
  .gbr-btn{ font-size:14px; padding:12px 14px; }

  .gbr-draagkracht{ margin-left:0; }
  .gbr-matrix thead th.gbr-hl{ border-radius:14px 14px 0 0; }

  /* Toelichting met afbeelding: stapel foto boven de tekst. */
  .gbr-uitleg.gbr-has-image{ flex-direction:column; gap:16px; }
  .gbr-uitleg-image{ flex-basis:auto; width:100%; max-width:300px; height:auto; aspect-ratio:1/1; }
}