/* ============================================================
   goud999safe — pagina-CSS: Over goud999safe
   Afgesplitst uit de oude pagina-CSS (fase 2). Alleen deze pagina('s).
   ============================================================ */

  /* ─────────────────────────────────────────────
     Over goud999safe — bedrijfs- en bankgegevens + knoppenrijen.
     Hergebruikt .card, .card-header-row, .card-body en .btn-on-white--ghost.
     Eigen ab-namespace.
     ───────────────────────────────────────────── */
  .ab-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 720px; margin-left: auto; margin-right: auto; }
  .ab-company-block { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--grey-line); }
  .ab-company { font-size: var(--fs-16); font-weight: 700; color: var(--ink); margin-bottom: 10px; }
  .ab-contact-line { display: flex; align-items: center; gap: 9px; font-size: var(--fs-14); font-weight: 600; color: var(--forest); padding: 4px 0; }
  .ab-contact-line svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--forest); }
  .ab-contact-line:hover { text-decoration: underline; }
  .ab-bank { display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; margin-bottom: 22px; }
  .ab-bank dt { font-size: var(--fs-13); color: var(--text-muted); }
  .ab-bank dd { font-size: var(--fs-13); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .ab-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

  @media (max-width: 768px) {
    /* Volledige breedte op mobiel. Moet hier staan (page-CSS laadt ná goud999.css),
       anders wint de base .ab-grid{max-width:720px; margin:auto} van de gedeelde
       full-bleed-regel. margin:0 is nodig omdat .content een flex-kolom is:
       margin:auto zou het item laten krimpen i.p.v. uitrekken. */
    .ab-grid { max-width: none; margin-left: 0; margin-right: 0; }
    .ab-buttons { flex-direction: column; }
    .ab-buttons .btn-on-white--ghost { width: 100%; justify-content: center; }
  }