/* =====================================================================
   Voorbeeld eigen shop-stylesheet (jeeigenweb.shop)
   Plak dit in de site-instelling 'custom_css', of upload als themabestand
   naar cdn.jeeigenweb.shop/{website_id}/theme/style.css en zet de instelling
   'theme_stylesheet' op de bestandsnaam.

   Alles hieronder overschrijft de standaard Bootstrap 5.3-stijl via
   CSS-variabelen. Pas de kleuren/waardes aan naar wens.
   ===================================================================== */

:root {
  /* Merkkleuren */
  --brand:            #6f42c1;   /* hoofd-/accentkleur */
  --brand-hover:      #59349c;

  /* Algemene tekst */
  --bs-body-color:        #2b2b2b;   /* tekstkleur */
  --bs-body-bg:           #ffffff;   /* achtergrond */
  --bs-body-font-size:    1rem;      /* tekstgrootte */
  --bs-body-font-family:  'Poppins', system-ui, -apple-system, sans-serif;

  /* Randen */
  --bs-border-color:      #e6e6e6;
  --bs-border-radius:     .5rem;
}

/* Links en merkonderdelen */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
.navbar-brand { color: var(--brand); font-weight: 600; }

/* Primaire knop (bv. "In winkelwagen"-alternatief, filters, betalen) */
.btn-primary {
  --bs-btn-bg:              var(--brand);
  --bs-btn-border-color:    var(--brand);
  --bs-btn-hover-bg:        var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg:       var(--brand-hover);
  --bs-btn-color:           #ffffff;   /* knop-tekstkleur */
  --bs-btn-hover-color:     #ffffff;
}

/* Groene bestel-/winkelwagenknop */
.btn-success {
  --bs-btn-bg:           #1f8f4e;
  --bs-btn-border-color: #1f8f4e;
  --bs-btn-hover-bg:     #17703d;
  --bs-btn-hover-border-color: #17703d;
  --bs-btn-color:        #ffffff;
}

/* Prijzen wat opvallender */
.fw-bold { color: var(--brand); }

/* Kaarten (product-/categorietegels) */
.card { border-color: var(--bs-border-color); border-radius: var(--bs-border-radius); }