/* ========================================================
   CUSTOM.CSS — OPSCHOOND & GESTRUCTUREERD
   Datum: 2025-09-25
   Richtlijnen:
   - Secties met duidelijke koppen
   - Dubbele / conflicterende regels verwijderd of samengevoegd
   - Consistente volgorde: Variabelen → Basis → Layout → Componenten → Utils → Responsive
   - Navbar/hamburger: één eenduidige implementatie
   ======================================================== */

/* ========================================================
   1) CSS VARIABELEN (THEMA-KLEUREN)
   ======================================================== */
:root {
  --color-custom: #e81c24;
  --color-title: #000;
  --color-actie-title: #fff;
  --color-custom-secondary: #ced4da;
  --color-custom-secondary-inverse: #252526;
  --color-custom-inverse: #fff;
  --promo-color: #8F5CAB;
}



/* ========================================================
   2) BASIS STYLES (teksten, links, helpers)
   ======================================================== */
html { -webkit-text-size-adjust: 100%; }

body { background-color: #f4f4f4; }

a {
  color: var(--color-custom);
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover,
a:focus { color: var(--color-custom); text-decoration: underline; }

/* Link varianten */
a.modal-link:hover { color: var(--color-custom) !important; text-decoration: underline; cursor: pointer; }

a.custom { color: var(--color-custom) !important; text-decoration: underline; }

a.text-white,
a.text-white:hover { color: #fff !important; text-decoration: none; }

a.custom-profiel { color: #374250 !important; text-decoration: none; }

a.custom-profiel:hover { color: var(--color-custom) !important; text-decoration: none; }

p.text-white { color: #fff !important; }

.text-custom { color: var(--color-custom) !important; }
.text-decoration-underline { text-decoration: underline; }
.label-block { display: block !important; }

.font-size-normal { font-size: 0.9rem !important; }
.font-size-small  { font-size: 75% !important; }
.text-small       { font-size: .7125rem !important; }

/* Material Icons (maten) */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0!important;
  margin-left: 0!important;
}

/* ========================================================
   3) LAYOUT (containers, secties)
   ======================================================== */
.main-shop { background: #f4f4f4; position: relative; z-index: 3; }

.beschikbaarheids-container { width: 100%; padding: 1.5em 0; }

.hidden-md-down { background-color: #f7f7f7; height: 100%; padding: 20px 0; }

/* 100% hoogte helpers */
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important; }
.shadow-lg { box-shadow: 0 7px 12px -5px rgba(33,33,33,.26); }

.bg-custom { background-color: #eee !important; color:#000!important;padding:1rem!important; }
.footer-custom { background-color: #222a40; }

/* ========================================================
   4) NAVBAR & DROPDOWNS
   - Altijd transparant boven hero
   - Mobiele hamburger rechtsboven (rood rondje met 3 witte strepen)
   ======================================================== */
/* Transparant gedrag (ook bij scroll) */
.navbar,
.navbar.bg-custom,
.navbar.fixed-top,
.navbar.sticky-top { background: transparent !important; box-shadow: none !important; }
.navbar.bg-custom::after { background-color: transparent !important; }

@media (max-width: 991.98px) {
  /* hogere specificiteit + belangrijker dan promoform */
  #sdp .nav-top-test.nav-top-test {
    padding-top: 0 !important;padding-right: 1rem !important;padding-bottom: 0 !important;padding-left: 0 !important;
  }
}

/* 06. Page-specific overrides — nav-link padding fix (overschrijft promoform.css) */
@media (max-width: 991.98px) {
  /* hogere specificiteit via #sdp en #sdp-navbar */
  #sdp #sdp-navbar .navbar-nav .nav-item .nav-link:first-of-type {
    /* swap: top -> bottom */
    padding: 0rem 0.75rem 0.9375rem 0.75rem !important;
  }
}
@media (max-width: 991.98px) {
  .navbar .navbar-collapse .navbar-nav > li.button-container {
    padding: 15px 15px 0 15px!important;
  }
}

/* Plaats bovenaan de hero */
.header-over-hero .navbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100; padding-top: 6px;
}

/* Dropdown hover states */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active {
  box-shadow: 0 4px 20px rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
  background-color: var(--color-custom);
  color: var(--color-custom-inverse);
}

/* Caret/pijltjes: inline behalve in sidebar */
#sidebar .dropdown-toggle::after { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; }
.btn.dropdown-toggle::after,
.navbar .dropdown-toggle::after,
.dropdown-toggle::after {
  position: static; display: inline-block; margin-left: .255em; vertical-align: .255em;
}

/* Mobiel: container-padding weghalen en toggler naar rechts */
@media (max-width: 991px) {
  .navbar .container,
  .navbar .container-lg { padding-left: 0; padding-right: 0; }
}

/* === Mobiele hamburger (één implementatie) === */
@media (max-width: 991px) {
  .navbar.bg-custom .navbar-toggler {
    margin-left: auto; margin-right: 0; margin-top: 0px;
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    background: #e81c24 !important; border: 2px solid #e81c24 !important;
    display: flex; align-items: center; justify-content: center; box-shadow: none;
    position: relative; background-image: none !important;
  }
  /* 3 strepen via ::before + box-shadow */
  .navbar.bg-custom .navbar-toggler::before {
    content: ""; width: 24px; height: 2px; background: #fff; border-radius: 2px; display: block;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
  }
  /* Onderdruk interne icon-span om dubbele lagen te voorkomen */
  .navbar.bg-custom .navbar-toggler .navbar-toggler-icon {
    display: none !important; background: none !important; background-image: none !important; box-shadow: none !important;
  }
}

/* Navbar links (hover/active) */
.navbar .navbar-nav .nav-item .nav-link:hover,
.navbar .navbar-nav .nav-item .nav-link.active { color: #fff; text-decoration: underline; }

/* ========================================================
   5) BUTTONS
   ======================================================== */
/* Primaire custom knop */
.btn.btn-danger {
  color: #fff !important;
  background-color: #e81c24!important;
  border-color:#e81c24!important;
  box-shadow: none;
}

.btn.btn-custom {
  color: var(--color-custom-inverse) !important;
  background-color: var(--color-custom);
  border-color: var(--color-custom);
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .btn.btn-danger {
    color: #000 !important;
    background-color: #eee!important;
    border-color:#eee!important;
    box-shadow: none;
    }

    .btn.btn-custom {
      color: #000 !important;
      background-color: #eee!important;
      border-color:#eee!important;
      box-shadow: none;
    }

}

.btn-custom:hover { color: var(--color-custom-inverse); background-color: #252526; border-color: #252526; }
.btn-custom:disabled, .btn-custom.disabled { color: #fff; background-color: #2196f3; border-color: #2196f3; }
.btn-custom:not(:disabled):not(.disabled):active,
.btn-custom:not(:disabled):not(.disabled).active,
.show>.btn-custom.dropdown-toggle { color: var(--color-custom-inverse); background-color: var(--color-custom); border-color: var(--color-custom); }
.btn-custom:not(:disabled):not(.disabled):active:focus,
.btn-custom:not(:disabled):not(.disabled).active:focus,
.show>.btn-custom.dropdown-toggle:focus { box-shadow: none, 0 0 0 0.2rem rgba(33,150,243,.5); }

/* Outline custom */
.btn.btn-outline-custom { color: var(--color-custom); background-color: transparent; border: 1px solid var(--color-custom) !important; }
.btn.btn-outline-custom:hover,
.btn.btn-outline-custom:focus { background-color: rgba(153,153,153,.05); }
.btn.btn-outline-custom:active,
.btn.btn-outline-custom.active,
.show>.btn.btn-outline-custom.dropdown-toggle { background-color: rgba(153,153,153,.2); box-shadow: 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px rgba(0,0,0,.12); }
.btn.btn-outline-custom:disabled,
.btn.btn-outline-custom.disabled { background-color: transparent; border-color: var(--color-custom); }

/* Banner-top knoppen (donker) */
.btn-banner-top,
.btn.btn-banner-top {
  color: #fff; background-color: #252526; border-color: #252526; box-shadow: 0 2px 2px rgba(37,37,38,.14), 0 3px 1px -2px rgba(37,37,38,.2), 0 1px 5px rgba(37,37,38,.12);
}
.btn-banner-top:hover,
.btn.btn-banner-top:hover,
.btn.btn-banner-top:focus { color: #fff; background-color: #000; border-color: #252526; }
.btn-banner-top:disabled,
.btn.btn-banner-top:disabled { color: #fff; background-color: #252526; border-color: #252526; }
.btn.btn-banner-top.btn-link { background-color: transparent; color: #252526; box-shadow: none; }

/* Secundaire varianten */
.btn-custom-secondary { color: var(--color-custom-secondary-inverse) !important; background-color: var(--color-custom-secondary); border-color: var(--color-custom-secondary); box-shadow: none; }
.btn-custom-secondary:disabled, .btn-custom-secondary.disabled { color: #fff; background-color: #606975; border-color: #606975; }
.btn-custom-secondary:hover,
.btn-custom-secondary:focus,
.btn-custom-secondary:active { color: var(--color-custom-secondary-inverse) !important; background-color: transparent !important; }

.btn-outline-custom-secondary { color: var(--color-custom-secondary-inverse) !important; background-color: transparent !important; border: 1px solid var(--color-custom-secondary) !important; }
.btn-outline-custom-secondary:hover,
.btn-outline-custom-secondary:focus,
.btn-outline-custom-secondary:active { color: var(--color-custom-secondary-inverse) !important; background-color: transparent !important; }
.btn-outline-custom-secondary:not([disabled]):not(.disabled):active,
.btn-outline-custom-secondary:not([disabled]):not(.disabled).active,
.show>.btn-outline-custom-secondary.dropdown-toggle { background-color: transparent !important; border-color: var(--color-custom-secondary) !important; box-shadow: 0 5px 11px rgba(0,0,0,.18), 0 4px 15px rgba(0,0,0,.15); }

/* Actieve/inactieve outline toggles */
.btn-outline-active-custom { color: var(--color-custom) !important; background-color: var(--color-custom-inverse) !important; border: 1px solid var(--color-custom) !important; }
.btn-outline-active-custom:hover,
.btn-outline-active-custom:focus,
.btn-outline-active-custom:active,
.btn-outline-active-custom.active { color: #fff !important; background-color: #252526 !important; border-color: #252526 !important; }

.btn-outline-inactive-custom { color: #252526 !important; background-color: #fff !important; border: 1px solid #252526 !important; }
.btn-outline-inactive-custom:hover,
.btn-outline-inactive-custom:focus,
.btn-outline-inactive-custom:active,
.btn-outline-inactive-custom.active { color: #fff !important; background-color: #252526 !important; border-color: #252526 !important; }

/* ========================================================
   6) KAARTEN / CARDS
   ======================================================== */
/* Algemene properties */
.card:first-child { border: 0; margin: 0 0 30px; }
.card-properties { border-radius: 6px; box-shadow: 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px rgba(0,0,0,.12); border: 1px solid #ddd !important; }
#shop-category-products .card-properties { padding-top: 10px; }
.card-img { border-bottom: 0; padding-top: 0; padding-bottom: 0; border-radius: 0; position: relative; }
.card-img .card-img-overlay-custom,
.card-header .card-img-overlay-custom { position: absolute; right: 0; bottom: 0; padding: 1rem; }
.img-winkelwagen { max-width: 100px; width: 100%; height: auto; }

/* Card columns */
.card-columns { padding-top: 30px; padding-bottom: 20px; }
@media (min-width: 576px) { .card-columns { column-count: 1; } }
@media (min-width: 992px) { .card-columns { column-count: 1; } }

/* Card collapse */
.card-collapse .card-header { border-bottom: 1px solid #ddd; padding: 10px; margin: 0; box-shadow: none !important; background: var(--color-custom); border-radius: .2rem; }
.card-collapse .card-header a { color: #fff; font-size: 1rem; font-weight: 500; display: block; }
.card-collapse .card-header a:hover,
.card-collapse .card-header a:active,
.card-collapse .card-header a[aria-expanded="true"] { color: #000; text-decoration: none; }
.card-collapse .card-header a i { float: right; position: relative; top: 0; }
.card-collapse .card-body { padding: 15px 10px 5px; }

/* Card plain */
.card-plain { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.card-plain-header { padding: .75rem 1.25rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); }
.card-plain-header:first-child { border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0; }
.card-plain-body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; }
.card-plain-footer { padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.125); }
.card-plain-footer:last-child { border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px); }

/* Card checkout/accordion */
.accordion .card-checkout { margin-bottom: 8px; border-bottom: 1px solid #e1e7ec !important; }
.accordion > .card-checkout { overflow: hidden; }
.card-checkout { border-radius: 7px !important; border-color: #e1e7ec; border-bottom-color: #e1e7ec; position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); }
.accordion > .card-checkout .card-header-checkout { margin-bottom: -1px; }
.card-header-checkout:first-child { border-radius: 7px 7px 0 0; }
.card-header-checkout, .card-footer-checkout { background-color: #f5f5f5; }
.card-header-checkout { padding: .75rem 1.25rem; margin-bottom: 0; border-bottom: 1px solid rgba(0,0,0,.125); border-bottom-color: #e1e7ec; }
.card-header-checkout h6 { margin-bottom: 0; }

/* Accordion toggles */
.accordion [data-toggle="collapse"] { display: block; position: relative; color: #606975; text-decoration: none; }
.accordion [data-toggle="collapse"]::after { position: absolute; top: 50%; right: 0; width: 0; height: 0; margin-top: -2px; transition: transform .25s; border-right: 5px solid transparent; border-bottom: 5px dashed; border-left: 5px solid transparent; content: ''; }
.accordion [data-toggle="collapse"].collapsed::after { transform: rotate(-180deg); }

/* Checkout steps */
.checkout-steps > a.active { background-color: #e1e7ec; color: #606975; }

/* ========================================================
   6A) CATALOG / REWARDS
   ======================================================== */

/* Header boven de grid */
.rewards-header{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.875rem 1rem; margin-bottom:1rem;
  background:#fff; border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.08);
}
.rewards-header .points-pill{
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  padding:.125rem .6rem; border-radius:999px; font-weight:700;
}

/* --- Belangrijk voor Optie B ---
   catalog-grid mag BINNEN een col geen layout bepalen */
.rewards-row .catalog-grid{ display:block; }

/* Row netjes laten wrappen en spacing geven */
.rewards-row{
  display:flex;
  flex-wrap:wrap;
  row-gap: 1.25rem;                 /* verticale ruimte tussen rijen */
}

/* Kolommen gebruiken de volledige kolombreedte, Bootstrap doet 1→2→3 */
.rewards-row > .col-12.col-sm-6.col-lg-4{
  /* geen max-width-limiter van andere CSS */
  max-width: 100%;
}

/* Kaarten vullen de kolom en hebben consistente styling */
.reward-card{
  width:100% !important;
  max-width:none !important;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex; flex-direction:column;
}

.reward-card__body{ padding:1rem; }
.reward-card__title{ font-weight:700; font-size:1.25rem; line-height:1.2; }
.reward-card__subtitle{ color:#6b7280; font-size:.9rem; margin-top:.25rem; }

/* Items-lijst binnen de kaart */
.reward-list{
  display:grid; grid-template-columns:1fr; gap:.75rem;
  padding: .75rem 1rem 1rem;
}
.reward-item{
  display:grid; grid-template-columns:84px 1fr auto; gap:.75rem; align-items:center;
  padding:.5rem; border:1px solid #eee; border-radius:10px; background:#fff;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.reward-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  border-color: #eaeaea;
}

.reward-item__thumb{
  width:84px; aspect-ratio:1/1; border-radius:8px; background:#f7f7f7;
  display:grid; place-items:center; overflow:hidden;
}
.reward-item__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }

.reward-item__title{ font-weight:600; line-height:1.25; }
.reward-item__points{ font-weight:700; white-space:nowrap; }

/* Kleine utilities */
.mt-xxs{ margin-top:.25rem; }

/* Cashback badge */
.cashback__amount{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cashback-badge{
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1;
  padding: .35rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* “vertegenwoordigt X punten” onder de badge */
.cashback__points{
  margin-top: .25rem;
  color: #6b7280;
  font-size: .95rem;
}

/* Productpunten als pill rechts */
.reward-item{
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .5rem;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}
.reward-item__points{
  background: rgba(0,0,0,.06);
  color: #111;
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: 999px;
  min-width: 72px;
  text-align: center;
}

/* Kleine variant als je secondary kleur wil gebruiken */
.reward-item__points--accent{
  background: color-mix(in oklab, var(--color-custom) 15%, white);
  color: #111;
}

/* Thumbs */
.reward-item__thumb{
  width: 84px; aspect-ratio: 1/1; border-radius: 8px;
  background: #f7f7f7; display: grid; place-items: center; overflow: hidden;
}
.reward-item__thumb img{ width: 100%; height: 100%; object-fit: contain; display: block; }

/* Mobiel: iets compacter */
@media (max-width: 480px){
  .cashback__amount{ font-size: 1.1rem; }
  .reward-item{ grid-template-columns: 72px 1fr auto; }
  .reward-item__thumb{ width: 72px; }
}

/* ===== Catalog / Rewards ===== */

/* 1) Header met totaalpunten */
.rewards-header{
  display:flex; align-items:center; gap:.5rem;
  padding:.875rem 1rem; margin-bottom:1rem;
  background:#fff; border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.08);
  font-weight:700;
}
.points-pill{
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  padding:.125rem .6rem; border-radius:999px;
}

/* 2) Cashbackregels los van producten */
.cashback-tiers{
  display:grid; gap:.5rem;
  margin-bottom:1.25rem;
}
.cashback-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  background:#fff; border:1px solid #eee; border-radius:12px; padding:.5rem .75rem;
}
.cashback-badge{
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  font-weight:700; border-radius:999px; padding:.50rem .6rem; line-height:1;
}
.cashback-points{
  color:#6b7280;
  font-size:.95rem;
}

/* 3) Productkaarten in 3 kolommen op ≥768px, 1 kolom op mobiel */
.rewards-row{ row-gap:1.25rem; }

.reward-card{
  background:#fff; border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.08);
  padding:1rem; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.reward-title{
  font-size:1.125rem; font-weight:700; margin:0 0 .75rem;
}
/*.reward-thumb{
  width: 220px; max-width:100%;
  aspect-ratio: 1 / 1; border-radius:12px; background:#f7f7f7;
  display:grid; place-items:center; overflow:hidden; margin-bottom:.75rem;
}*/

/* Rewards: afbeelding volledig tonen + pill onderaan */
.rewards .reward-thumb{
  overflow: visible !important;   /* niks meer afkappen */
  height: auto;                   /* natuurlijke hoogte */
  display: block;                 /* geen grid nodig */
  margin-bottom: .75rem;
}

.rewards .reward-thumb img{
  width: 100%;
  height: auto;                   /* behoud verhoudingen */
  object-fit: contain;            /* veilig als er toch een hoogte komt */
  display: block;
}

/* kaart als flex-kolom zodat de pill omlaag kan duwen */
.rewards .reward-card{
  display: flex;
  flex-direction: column;
}

/* titel gewoon boven de afbeelding */
.rewards .reward-title{ margin-bottom: .75rem; }

/* pill altijd onderaan de kaart, netjes gecentreerd */
.rewards .reward-points-pill{
  margin-top: auto;               /* duwt ‘m naar de onderkant */
  align-self: center;
}

@media (max-width: 768px){
  .rewards .reward-thumb img{
    max-height: 320px;            /* pas aan naar smaak */
  }
}

.reward-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }

.reward-points-pill{
  margin-top:.25rem;
  background: rgba(0,0,0,.06);
  color:#111;
  font-weight:700; padding:.35rem .75rem; border-radius:999px;
}

/* Kleine tweaks voor heel smalle schermen */
@media (max-width: 380px){
  .cashback-line{ padding:.5rem; }
  .reward-thumb{ border-radius:10px; }
}

.cashback-line{
  display: flex;
  align-items: center;
  gap: .5rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:.5rem .75rem;
}
.cashback-line__left{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}
.cashback-link{
  margin-left:auto;                 /* duwt de link naar rechts */
  text-decoration:none;
  font-weight:700;
  color: var(--color-custom);
}
.cashback-link:hover{ text-decoration:underline; }

/* op heel smal scherm mag hij onder de tekst vallen */
@media (max-width: 420px){
  .cashback-line{ flex-wrap:wrap; }
  .cashback-link{ margin-left:0; width:100%; text-align:right; }
}

/* Rewards – geen crop, verticaal centreren in een dynamische hoogte */
section.rewards{ --thumb-h: auto; }

@media (min-width: 576px){
  section.rewards .reward-card{ display:flex; flex-direction:column; }
  section.rewards .reward-thumb{
    height: var(--thumb-h);          /* wordt door JS gezet op hoogste img-hoogte */
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .75rem;
    overflow: visible;               /* niets afkappen */
  }
  section.rewards .reward-thumb img{
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;       /* behoud verhoudingen */
    object-fit: contain;
    display: block;
  }
  section.rewards .reward-points-pill{ margin-top: auto; align-self: center; }
}

/* Mobiel: natuurlijke hoogte, geen loze ruimte */
@media (max-width: 575.98px){
  section.rewards .reward-thumb{ height: auto; display:block; }
  section.rewards .reward-thumb img{ width: 100%; height: auto; }
}

/* ========================================================
   6B) CATALOG / REWARDS / DETAIL
   ======================================================== */
   
/* =============== 04. Components → Rewards Detail =============== */
.reward-detail{
  --card-radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --thumb-min-h: 340px;   /* desktop afbeelding-gebied */
  --gap: 1.25rem;
}

.reward-detail__card{
  background:#fff;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

/* Header */
.reward-detail__header{
  display:flex; align-items:center; gap:.75rem;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.reward-detail__title{
  font-size: clamp(1.25rem, 2.2vw, 2.25rem);
  font-weight: 800;
  margin: 0;
}
.points-pill{
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 999px;
}

/* Body: afbeelding + paneel */
.reward-detail__body{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 768px){
  .reward-detail__body{
    grid-template-columns: 1.2fr .8fr;  /* links beeld, rechts panel */
    align-items: start;
  }
}

/* Afbeelding */
.reward-detail__thumb{
  margin:0;
  background:#fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;                 /* ronde hoeken, geen crop van img nodig */
  display:flex; align-items:center; justify-content:center;
  min-height: var(--thumb-min-h);
}
.reward-detail__thumb img{
  max-width: 100%;
  max-height: 100%;
  width:auto; height:auto;
  object-fit: contain;
  display:block;
}

/* Paneel (qty + knop) */
.reward-detail__panel{
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 1rem;
  display:flex; flex-direction:column; gap:.75rem;
}

.reward-detail__label{ font-weight:700; margin-bottom:.25rem; }
.reward-detail__qty input{
  width: 100%;
  height: 44px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: .25rem .75rem;
  font-size: 1rem;
  outline: none;
}
.reward-detail__qty input:focus{ border-color: var(--color-custom); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-custom) 20%, transparent); }

/* Knop */
.btn-add-to-cart{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height: 48px;
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor:pointer;
}
.btn-add-to-cart:hover{ filter: brightness(0.95); }
.btn-add-to-cart__icon{ font-size: 1.1em; line-height:1; }

/* Footer */
.reward-detail__footer{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
.h4{ font-size:1.125rem; font-weight:700; margin:0 0 .25rem; }
.muted{ color:#6b7280; }
.mt-xxs{ margin-top:.25rem; }

/* Mobile-tuning: geen onnodige hoogte */
@media (max-width: 767.98px){
  .reward-detail__thumb{ min-height: 0; padding: .75rem; }
}

/* Rewards Detail — cap op beeldhoogte */
.reward-detail{ --thumb-max-h: 450px; }

/* desktop & tablet: afbeelding nooit hoger dan cap */
@media (min-width: 576px){
  .reward-detail__thumb img{
    max-height: var(--thumb-max-h) !important; /* bv. 450px */
    width: auto;
    height: 450px;
    object-fit: contain;
  }
}

/* mobiel: geen cap, natuurlijke hoogte voor kortere scroll */
@media (max-width: 575.98px){
  .reward-detail__thumb img{
    max-height: none !important;
  }
}

@media (min-width: 576px) and (max-width: 991.98px){ .reward-detail{ --thumb-max-h: 250px; } }
@media (min-width: 992px){ .reward-detail{ --thumb-max-h: 380px; } }

.reward-detail__header{ position: relative; }
.back-link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem;
  border-radius:999px;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  text-decoration:none; font-weight:700; color:#111;
}
.back-link__icon{ font-size:1.1em; line-height:1; }
.back-link:hover{ border-color:#e5e5e5; }
@media (max-width: 575.98px){
  .reward-detail__header{ gap:.5rem; flex-wrap:wrap; }
}




/* ========================================================
   7) CAROUSEL
   ======================================================== */
.carousel-control-prev,
.carousel-control-next { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 15%; color: #000; text-align: center; opacity: .5; }
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus { color: #000; outline: 0; opacity: .9; text-decoration: none; }
.carousel .carousel-indicators li { background: var(--color-custom); border-radius: 100px; }

/* ========================================================
   8) PROFIEL
   ======================================================== */
.user-info-wrapper { position: relative; width: 100%; margin-bottom: -1px; padding: 90px 0 30px; border: 1px solid #e1e7ec; border-top-left-radius: 7px; border-top-right-radius: 7px; overflow: hidden; }
.user-info-wrapper .user-cover { position: absolute; top: 0; left: 0; width: 100%; height: 120px; background-position: center; background-color: #f5f5f5; background-repeat: no-repeat; background-size: cover; }
.user-info-wrapper .user-cover .tooltip .tooltip-inner { width: 230px; max-width: 100%; padding: 10px 15px; }
.user-info-wrapper .info-label { display: block; position: absolute; top: 18px; right: 18px; height: 26px; padding: 0 12px; border-radius: 13px; background-color: #fff; color: #606975; font-size: 12px; line-height: 26px; box-shadow: 0 1px 5px rgba(0,0,0,.18); cursor: pointer; }
.user-info-wrapper .info-label>i { display: inline-block; margin-right: 3px; font-size: 1.2em; vertical-align: middle; }
.user-info-wrapper .user-info { display: table; position: relative; width: 100%; padding: 0 18px; z-index: 5; }
.user-info-wrapper .user-info .user-avatar,
.user-info-wrapper .user-info .user-data { display: table-cell; vertical-align: top; }
.user-info-wrapper .user-info .user-avatar { position: relative; width: 115px; }
.user-info-wrapper .user-info .user-avatar>img { display: block; width: 100%; border: 5px solid #fff; border-radius: 50%; }
.user-info-wrapper .user-info .user-avatar .edit-avatar { display: block; position: absolute; top: -2px; right: 2px; width: 36px; height: 36px; transition: opacity .3s; border-radius: 50%; background-color: #fff; color: #606975; line-height: 34px; box-shadow: 0 1px 5px rgba(0,0,0,.2); cursor: pointer; opacity: 0; text-align: center; text-decoration: none; }
.user-info-wrapper .user-info .user-avatar .edit-avatar::before { font-family: feather; font-size: 17px; content: '\e058'; }
.user-info-wrapper .user-info .user-avatar:hover .edit-avatar { opacity: 1; }
.user-info-wrapper .user-info .user-data { padding-top: 48px; padding-left: 12px; }
.user-info-wrapper .user-info .user-data h4 { margin-bottom: 2px; }
.user-info-wrapper .user-info .user-data span { display: block; color: #9da9b9; font-size: 13px; }
.user-info-wrapper + .list-group .list-group-item:first-child { border-radius: 0; }

/* Profiel steps */
.profiel-steps { margin-bottom: 40px; }
.profiel-steps::after { display: block; clear: both; content: ''; }
.profiel-steps > a { display: block; position: relative; width: 25%; height: 55px; float: left; transition: color .3s; border-top: 1px solid #e1e7ec; border-bottom: 1px solid #e1e7ec; background-color: #fff; color: #606975; font-size: 14px; font-weight: 500; line-height: 53px; text-decoration: none; text-align: center; border-right: 1px solid #e1e7ec; }
.profiel-steps > a:first-child { border-left: 1px solid #e1e7ec; }
.profiel-steps > a:hover { color: var(--color-custom); }
.profiel-steps > a.active { background-color: var(--color-custom); color: #fff; cursor: default; pointer-events: none; }
.profiel-steps > a.completed > .step-indicator { display: inline-block; margin-top: -5px; margin-right: 7px; border-radius: 50%; color: #43d9a3; font-size: 18px; line-height: 20px; text-align: center; vertical-align: middle; }
@media (max-width: 576px) {
  .profiel-steps > a { width: 100%; margin-bottom: 10px; float: none; border: 1px solid #e1e7ec; }
  .profiel-steps > a > .angle { display: none; }
}

/* ========================================================
   9) PROMOFORM / PROGRESS / SDP / CUSTOMERSERVICE
   ======================================================== */
#promoform-accordion .card-header { padding: 0; margin: 0; border-radius: 0; box-shadow: none; }
#promoform-accordion .card-header button { color: #fff; font-size: 24px; margin: 0; text-overflow: clip; overflow: hidden; border-radius: 0; background: var(--promo-color); }
#promoform-accordion .card-header button.collapsed { background-color: #f5f5f5; color: var(--promo-color); }
#promoform-accordion .card-header button:active { background: inherit; }
#promoform-accordion .card-header button:after { margin-right: 10px; }
#promoform-accordion .card-body { background-color: #f5f5f5; }
#promoform-accordion .form-module-section-hr { width: 8px; height: 8px; margin-top: 0; display: inline-block; background: var(--promo-color); }
#promoform-accordion .form-module-section-hr:after { content: ''; border: 1px solid #d8d8d8; width: 20px; height: 2px; display: inline-block; margin-left: 12px; margin-bottom: 12px; }

#promoform-progress-indicator { background-color: #f5f5f5; }
#promoform-progress-indicator .progress { height: 20px; }
#promoform-progress-indicator .progress-bar { background: var(--promo-color); }

#sdp .input-group input,
#sdp .input-group select { height: 2.5rem; }
.input-group-append button { height: 2.5rem; }
#sdp-actie-title-heading { -webkit-filter: drop-shadow(1px 1px 1px #000); filter: drop-shadow(1px 1px 1px #000); color: var(--color-actie-title) !important; }
#sdp .card-transparent { box-shadow: none; border: 0; }
#sdp .bg-custom-navbar { background-color: var(--color-custom); }
#sdp .shadow-none { box-shadow: none; }
#sdp .owl-nav .owl-prev,
#sdp .owl-nav .owl-next,
#sdp .owl-carousel .owl-dot { background: var(--promo-color); }

#customerservice-nav .active { background-color: #f1f1f1; }
#customerservice-faq-accordion .customerservice-faq-card-header { background-color: #fff; }
#customerservice-faq-accordion .customerservice-faq-card-header a { color: #000; }

/* ========================================================
   10) TITLES / HEADINGS KLEURSTELLING
   ======================================================== */
body,
.title,
.title a,
.card-title,
.card-title a,
.info-title,
.info-title a,
.footer-brand,
.footer-brand a,
.footer-big h5,
.footer-big h5 a,
.footer-big h4,
.footer-big h4 a,
.media .media-heading,
.media .media-heading a { color: var(--color-title) !important; text-decoration: none;font-family: "Inter 18pt"!important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Inter 18pt"!important;
}

/* ========================================================
   11) NOTIFICATIES / VOORBEELD-BOXEN
   ======================================================== */
.melding { border: 1px solid var(--color-custom); background: var(--color-custom); font-size: 90%; padding: 1em; border-radius: 3px; color: #fff; }
.melding a { color: #fff; text-decoration: underline; }

.voorbeeld-box { background: var(--color-custom); color: #fff; font-size: 85%; border-radius: .25rem; padding: .375rem .75rem; display: block; height: 100%; }
.voorbeeld-box a { color: #fff; text-decoration: underline; }
.voorbeeld-box-2 { background: #fff; border: 1px solid #ced4da; color: #000; font-size: 85%; border-radius: .25rem; padding: .375rem .75rem; margin-top: .5rem; display: inline-block; }
.voorbeeld-box-danger { background: #dc3545; color: #fff; font-size: 85%; border-radius: .25rem; padding: .375rem .75rem; margin-top: .5rem; display: inline-block; }

/* ========================================================
   12) MODALS / INHOUD / VOORWAARDEN
   ======================================================== */
.modal p { color: #000; font-weight: 300; font-size: 16px; line-height: 24px; }
.modal-body h2 { margin-bottom: .2em; }
#image-gallery .modal-footer { display: block; }

ul.voorwaarden { list-style-type: decimal; margin-bottom: 1.5em; list-style-position: outside; }
ul.voorwaarden li { font-weight: 300; font-size: 16px; line-height: 24px; color: #000; }

ul.voorwaarden_extra { list-style-type: disc; list-style-position: outside; }
ul.voorwaarden_extra li { font-weight: 300; font-size: 16px; line-height: 24px; color: #000; }

table.voorwaarden { border-collapse: collapse; width: 100%; }
table.voorwaarden tr { border-top: 1px solid #000; }
table.voorwaarden tr:last-child { border-bottom: 1px solid #000; }
table.voorwaarden td:nth-child(1) { width: 20%; vertical-align: top; }
table.voorwaarden td:nth-child(2) { width: 60%; }
table.voorwaarden td:nth-child(3) { width: 20%; text-align: center; vertical-align: top; }

/* ========================================================
   13) DIVERSE UTILITIES
   ======================================================== */
.border-right { border-right: 1px solid #dee2e6 !important; }
@media (max-width: 768px) { .border-right { border-right: 0 !important; } }

.cursor-pointer { cursor: pointer; }

div.modal-backdrop { display: none; }

#staging_banner { position: absolute; top: 0; left: 0; width: 320px; padding: 4px; opacity: .8; z-index: 99000; background-color: #ffe01b; color: #000; font-size: 15px; border-radius: 0 0 20px 0; }
#sdp .staging_banner_preview { width: 100px; }

.input-group { justify-content: center; margin-bottom: 0 !important; margin-top: 2em !important; color: #fff; font-weight: bold; }

#sdp-hide-top-banner { margin-top: 145px; }

/* Responsive visibility helpers */
.sm-only { display: none; }
@media (max-width: 768px) {
  .col-sm-hidden { display: none; }
  .sm-hidden { display: none; }
  .sm-only { display: block; }
}

/* ========================================================
   14) TITELS / ACTIE-TITEL (SDP)
   ======================================================== */
#sdp-actie-title-heading { color: var(--color-actie-title) !important; }

/* ========================================================
   15) HEADER HAMBURGER
   ======================================================== */
   
#sdp-top-banner .navbar-toggler.navbar-toggler-main{
  /* match met de paarse FAB */
  --fab-diameter: 56px;          /* zet op 48px als jouw FAB 48 is */
  --fab-line-w: 22px;
  --fab-gap: 6px;                /* afstand tussen de streepjes */

  width: var(--fab-diameter) !important;
  height: var(--fab-diameter) !important;
  border-radius: 50% !important;
  background: #e31b23 !important;
  box-shadow: 0 6px 10px rgba(0,0,0,.14),
              0 1px 18px rgba(0,0,0,.12),
              0 3px 5px rgba(0,0,0,.20) !important;
  border: 0 !important;
  padding: 0 !important;
  margin-right: 12px !important;
  position: relative !important;   /* we positioneren de balkjes absoluut */
  display: block !important;
  line-height: 1 !important;
  box-sizing: border-box;
}

/* Reset Bootstrap icon en maak 3 echte lijnen */
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon{
  background-image: none !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--fab-line-w) !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 1px !important;
  margin: 0 !important;
}

/* BELANGRIJK: sr-only is child(1), de 3 lijnen zijn child(2)(3)(4) */
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon:nth-child(2){
  top: calc(50% - (2px + var(--fab-gap))) !important; /* bovenste */
}
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon:nth-child(3){
  top: 50% !important;                                   /* midden */
}
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon:nth-child(4){
  top: calc(50% + var(--fab-gap)) !important;            /* onderste */
}

/* (optioneel) sr-only echt uit de flow houden — visueel geen verschil */
#sdp-top-banner .navbar-toggler.navbar-toggler-main .sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

#sdp-top-banner .navbar-toggler.navbar-toggler-main{
  /* Afstemmen op paarse FAB */
  --fab-diameter: 40px;        /* was 56px → kleiner cirkeltje */
  --fab-line-w: 20px;          /* langere streepjes */
  --fab-line-h: 3px;           /* iets dikker voor betere zichtbaarheid */
  --fab-gap: 5px;              /* ruimte tussen streepjes (hart-op-hart) */

  width: var(--fab-diameter) !important;
  height: var(--fab-diameter) !important;
  border-radius: 50% !important;
  background: #e81c24 !important;
  /*background: rgba(227,27,35,0.9)!important;*/
  /*box-shadow: 0 6px 10px rgba(0,0,0,.14),
              0 1px 18px rgba(0,0,0,.12),
              0 3px 5px rgba(0,0,0,.20) !important;*/
  border: 0 !important;
  padding: 0 !important;

  /* gelijke uitlijning boven en rechts */
  margin-right: 12px !important;
  margin-top: 12px !important;

  position: relative !important;
  display: block !important;
  line-height: 1 !important;
  box-sizing: border-box;
}

/* Reset + precieze positionering van de drie lijnen (sr-only is child 1) */
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon{
  background-image: none !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;   /* centreer elke lijn op z'n top */
  width: var(--fab-line-w) !important;
  height: var(--fab-line-h) !important;
  background: #fff !important;
  border-radius: 1px !important;
  margin: 0 !important;
}

/* Boven / midden / onder — offsets op basis van lijnhoogte + gap */
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon:nth-child(2){
  top: calc(50% - (var(--fab-line-h) + var(--fab-gap))) !important;
}
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon:nth-child(3){
  top: 50% !important;
}
#sdp-top-banner .navbar-toggler.navbar-toggler-main .navbar-toggler-icon:nth-child(4){
  top: calc(50% + (var(--fab-line-h) + var(--fab-gap))) !important;
}

/* sr-only visueel verbergen (blijft toegankelijk) */
#sdp-top-banner .navbar-toggler.navbar-toggler-main .sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* === FAB in paarse balk: zelfde kleur als balk + zwarte streepjes === */
/* Je paarse balk gebruikt var(--color-custom); laat de knop dat ook gebruiken */
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main) {
  background-color: var(--color-custom) !important;  /* match balkkleur */
  border-radius: 50% !important;                     /* blijft rond */
  /* geen maat/verplaatsing aanpassen; alleen kleur */
}

/* De drie lijntjes in die knop zwart maken */
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main) .navbar-toggler-icon {
  background-color: #000 !important;
  background-image: none !important; /* override evt. bootstrap-svg */
}

/* ===== Variabelen voor paarse balk FAB ===== */
:root{
  --fab-bar-bg: var(--color-custom); /* kleur van de balk */
  --fab-bar-lines: #000000!important;             /* kleur van de 3 streepjes (nu zwart) */
}

/* FAB in paarse balk: zelfde kleur als balk, geen rode rand */
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main){
  background-color: var(--fab-bar-bg) !important;
  border: 0 !important;                 /* verwijdert rode border */
  outline: 0 !important;
  box-shadow: none !important;          /* voor het geval ring via shadow kwam */
}

/* Streepjes in de knop: zwart en niet de Bootstrap-SVG */
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main) .navbar-toggler-icon{
  background-image: none !important;
  background-color: var(--fab-bar-lines) !important; /* streepjeskleur */
}

/* fallback voor mogelijke hamburger-lib varianten binnen die knop */
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main) .hamburger-inner,
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main) .hamburger-inner::before,
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main) .hamburger-inner::after,
#sdp-navbar .navbar-toggler:not(.navbar-toggler-main) .icon-bar{
  background-color: var(--fab-bar-lines) !important;
}

/* 06. Page-specific overrides — navbar toggler zichtbaarheid */

/* ≥ lg: hamburger weg, menu zichtbaar */
@media (min-width: 992px) {
  nav#sdp-top-banner .navbar-translate > button.navbar-toggler,
  nav#sdp-top-banner .navbar-translate > button.navbar-toggler-main,
  nav#sdp-top-banner button.navbar-toggler.navbar-toggler-main,
  nav#sdp-top-banner .navbar-toggler,
  nav#sdp-top-banner .navbar-toggler-main {
    display: none !important;
  }
  nav#sdp-top-banner .navbar-collapse {
    display: flex !important;
  }
}

/* < lg: hamburger tonen */
@media (max-width: 991.98px) {
  nav#sdp-top-banner .navbar-toggler,
  nav#sdp-top-banner .navbar-toggler-main {
    display: inline-flex !important;
  }
}

/* ===== NAV LINKS ===== */

.navbar .navbar-nav .nav-item .nav-link {
  position: relative;
  color: #ffffff!important;
  padding: 0.9375rem !important;
  font-weight: 600!important;
  font-size: 0.900rem;
  font-size: 1.0rem !important;
  text-transform: none !important;
  border-radius: 3px;
  line-height: 20px;
}

/* ========================================================
   15) BANNER
   ======================================================== */

/* 04.03 Banner / Hero (Art-direction) */
.banner{
  width: 100%;
  /*aspect-ratio: 21/9;         vaste verhouding voor stabiele hoogte */
}
.banner-img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* of: cover */
  object-position: 50% 35%;   /* focuspunt indien cover */
  display: block;
  background-color: #f0f0f0;  /* kleur achter randen bij contain */
}


/* Page-specific overrides — Upload rij centreren op mobiel */
@media (max-width: 991.98px){
  /* optioneel: als de row zelf iets wil schuiven */
  .row.promoform_upload{
    justify-content: center !important;
  }

  /* centreer de inhoud binnen de kolommen */
  .promoform_upload .col-md-6,
  .promoform_upload .col-md-4,
  .promoform_upload [class*="col-"]{
    display: flex !important;
    flex-direction: column;
    align-items: center !important;  /* horizontaal */
    text-align: center !important;   /* tekst en inline elementen */
  }

  /* widgets met vaste breedte ook echt in het midden */
  .promoform_upload .fileinput,
  .promoform_upload .thumbnail,
  .promoform_upload .btn,
  .promoform_upload img,
  .promoform_upload .text-center{
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }
}


/* ========================================================
   16) LANDINGPAGE
   ======================================================== */

/* ========== Landingpage: twee flows ========== */
.flows-landing{
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --gap: 1.25rem;
}

/* Intro */
.flows-intro{
  margin-bottom: 1rem;
}
.flows-title{
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800; margin: 0 0 .25rem;
}
.flows-lead{
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7; margin: .25rem 0 .75rem;
}
.points-summary{
  background:#fff; border-radius: 999px; box-shadow: var(--shadow);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
}
.points-summary .points-pill{
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  font-weight: 700; padding:.2rem .6rem; border-radius:999px;
}

/* Grid met 2 kaarten */
.flows-grid{
  display:grid; grid-template-columns: 1fr; gap: var(--gap);
  margin-top: 1rem;
}
@media (min-width: 992px){
  .flows-grid{ grid-template-columns: 1fr 1fr; }
}

/* Kaart */
.flow-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1rem 1.1rem;
  display:flex; flex-direction:column; gap:.6rem;
  position: relative;
}
.flow-card__step{
  position:absolute; top:.75rem; left:.75rem;
  width:36px; height:36px; border-radius:999px;
  background: var(--color-custom); color: var(--color-custom-inverse);
  font-weight:800; display:grid; place-items:center;
}
.flow-card__icon{
  font-size: 2rem; line-height: 1; margin-left: 2.25rem; /* ruimte voor step-badge */
}
.flow-card__title{
  font-size: 1.35rem; font-weight: 800; margin: 0 0 .1rem 2.25rem;
}
.flow-card__text{ margin: 0 0 .25rem 2.25rem; color:#374151; }

.flow-list{
  margin: .25rem 0 .25rem 2.25rem; padding: 0 0 0 1rem; color:#4b5563;
}
.flow-list li{ margin:.2rem 0; }

/* CTA’s */
.btn-primary,
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; border-radius:12px; padding:0 1.1rem; font-weight:800;
  text-decoration:none;
}
.btn-primary{
  background: var(--color-custom); color: var(--color-custom-inverse);
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
.btn-primary:hover{ filter: brightness(.96); }
.btn-secondary{
  background:#111; color:#fff;
}
.btn-secondary:hover{ filter: brightness(.96); }

.flow-card__cta{ align-self: start; margin-left: 2.25rem; }
.flow-secondary{ margin: .25rem 0 0 2.25rem; color:#6b7280; font-size:.95rem; }

/* “Hoe werkt het” blok */
.flows-how{
  margin-top: 1.25rem; padding: 1rem;
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
}
.flows-how h3{ margin:0 0 .5rem; font-weight:800; }
.flows-how ol{ margin:.25rem 0 0 1.25rem; color:#374151; }
.flows-how li{ margin:.25rem 0; }


/* ========================================================
   17) CART
   ======================================================== */


.cart{
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --gap: 1rem;
}

/* Header */
.cart__header{
  display:flex; align-items:center; gap:.75rem; justify-content:space-between;
  margin: .25rem 0 1rem;
}
.cart__title{
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800; margin:0;
}
.points-pill{
  background: var(--color-custom);
  color: var(--color-custom-inverse);
  font-weight: 800;
  padding:.35rem .75rem; border-radius:999px;
}

/* Lijst met items */
.cart__items{
  display:flex; flex-direction:column; gap: var(--gap);
  margin: 0 0 1rem;
}

/* Item-kaart */
.cart-item{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .85rem 1rem;
  display:grid;
  grid-template-columns: 112px 1fr auto auto auto; /* thumb | title | qty | points | remove */
  align-items:center; gap: .75rem;
}
@media (max-width: 768px){
  .cart-item{
    grid-template-columns: 88px 1fr auto;
    grid-template-areas:
      "thumb  title  remove"
      "thumb  meta   meta";
    row-gap: .5rem;
  }
}

.cart-item__thumb{
  width:112px; height:112px; border-radius: 12px; background:#f7f7f7;
  display:grid; place-items:center; overflow:hidden;
}
.cart-item__thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }

.cart-item__title{
  font-weight: 800; margin:0; line-height:1.25;
}
.cart-item__meta{ color:#6b7280; font-size:.95rem; }

.cart-item__qty{
  display:flex; align-items:center; gap:.5rem;
}
.cart-item__qty input,
.cart-item__qty select{
  width:84px; height:40px; border:1px solid #e5e7eb; border-radius:10px;
  padding:.25rem .5rem; font-size:1rem; outline:none;
}
.cart-item__qty input:focus,
.cart-item__qty select:focus{
  border-color: var(--color-custom);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-custom) 18%, transparent);
}

.cart-item__points{
  font-weight: 800; white-space: nowrap;
  background: #f1f5f9; border-radius: 999px; padding:.4rem .65rem;
}
.cart-item__remove{
  color: #c1121f; text-decoration:none; font-size:1.25rem; line-height:1;
  padding:.25rem; border-radius:8px;
}
.cart-item__remove:hover{ background:#fee2e2; }

/* Totals / summary */
.cart__summary{
  margin-top:.5rem;
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .9rem 1rem;
  display:flex; align-items:center; gap:.75rem; justify-content:space-between;
}
.cart__totals{
  display:flex; flex-wrap:wrap; gap: .75rem 1rem; align-items:center;
}
.cart__totals .line{
  font-weight: 700;
}
.cart__totals .muted{ color:#6b7280; font-weight:400; }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:48px; padding:0 1.25rem;
  background: var(--color-custom); color: var(--color-custom-inverse);
  border:0; border-radius:12px; font-weight:800; letter-spacing:.01em; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.07);
}
.btn-primary:hover{ filter:brightness(.96); }
.btn-primary:active{ transform:translateY(1px); }

/* Lege staat */
.cart-empty{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding:1.25rem; text-align:center;
}
.cart-empty p{ margin:.25rem 0 .75rem; color:#6b7280; }

/* ==== Cart: mobile fixes (≤ 480–576px) ==== */
@media (max-width: 575.98px){
  /* itemkaart: duidelijke, enkelkoloms flow */
  .cart-item{
    grid-template-columns: 72px 1fr;          /* thumb | tekst */
    grid-template-areas:
      "thumb title"
      "thumb meta"
      "thumb points"
      "thumb qty"
      "remove remove";
    align-items: start;
    gap: .5rem .75rem;
    padding: .75rem .75rem;
  }

  .cart-item__thumb{ grid-area: thumb; width:72px; height:72px; border-radius:10px; }
  .cart-item__title{ grid-area: title; margin: 0; }
  .cart-item__meta{  grid-area: meta;  font-size:.9rem; color:#6b7280; }

  .cart-item__points{
    grid-area: points;
    justify-self: start;              /* pill niet tegen rand rechts */
    margin-top: .15rem;
    padding: .25rem .5rem;
    font-size: .95rem;
  }

  .cart-item__qty{
    grid-area: qty;
    justify-self: start;
  }
  .cart-item__qty input,
  .cart-item__qty select{ height: 38px; width: 78px; }

  .cart-item__remove{
    grid-area: remove;
    justify-self: start;              /* kruisje onderaan links */
    font-size: 1.1rem;
    padding: .15rem .25rem;
  }

  /* header & back-knop wat compacter */
  .cart__header{ gap:.5rem; margin: .25rem 0 .75rem; }
  .cart__title{ font-size: 1.6rem; }

  /* summary-blok: volle breedte, niet te groot */
  .cart__summary{
    padding: .75rem;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .cart__totals{ justify-content: space-between; }
  .btn-primary{ height: 44px; width: 100%; }
}

/* (optioneel) sticky checkout bar op kleine schermen */
@media (max-width: 575.98px){
  .cart__summary--sticky{
    position: sticky; bottom: 12px; z-index: 20;
    background: #fff; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }
}
/* Cart header: saldo-pill niet overlappen op mobiel */
.cart__header{
  display:flex;
  align-items:center;
  gap:.5rem;
  justify-content:flex-start;
}

/* saldo rechts op desktop */
.cart__saldo{
  margin-left:auto;
  position:static !important;   /* reset evt. absolute posities */
  white-space:nowrap;
}

/* mobiel: header mag wrappen; saldo onder de titel */
@media (max-width: 575.98px){
  .cart__header{ flex-wrap:wrap; }
  .back-link{ order:1; }
  .cart__title{
    order:2;
    flex: 1 1 100%;
    margin-top:.25rem;
  }
  .cart__saldo{
    order:3;
    margin-left:0;
    margin-top:.5rem;
    font-size:.85rem;
    padding:.25rem .5rem;        /* compactere pill */
  }
}
/* Cart mobile: zet remove-icoon naast de punten-pill */
@media (max-width: 575.98px){
  .cart-item{
    /* 3 kolommen: thumb | content | remove */
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "thumb title  remove"
      "thumb points remove";
    gap: .5rem .75rem;
    padding: .75rem .75rem;
    align-items: start;
  }

  .cart-item__thumb{ grid-area: thumb; width:72px; height:72px; border-radius:10px; }
  .cart-item__title{ grid-area: title; margin:0; }
  .cart-item__points{
    grid-area: points;
    justify-self: start;
    margin-top: .15rem;
    padding: .25rem .5rem;
    font-size: .95rem;
  }

  /* het kruisje rechts, uitgelijnd met titel/pill */
  .cart-item__remove{
    grid-area: remove;
    justify-self: end;
    align-self: start;
    margin-left: .5rem;
    font-size: 1.2rem;
    padding: .2rem .3rem;       /* grotere hit area */
  }
}

/* ========================================================
   FAQ — schoon & robuust (zonder :has, geen global side-effects)
   Vereist: .faq-row, .faq-navcol, .faq-maincol
   ======================================================== */

/* ====== LAYOUT 1/3 – 2/3 ====== */
.faq-row{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,2fr); /* 1/3 – 2/3 */
  gap: 1.25rem;

  /* Bootstrap container-gutters herstellen binnen deze row */
  margin-left: -15px;
  margin-right: -15px;
  width: 100%;
}

.faq-row > [class*="col-"]{
  /* neutraliseer Bootstrap kolombreedtes in deze ENE row */
  flex: unset !important;
  max-width: unset !important;
  min-width: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.faq-navcol  { grid-column: 1; }
.faq-maincol { grid-column: 2; }

/* Eventuele extra/derde kolom (telefoon/icons) hard uitzetten */
.faq-row > [class*="col-"]:not(.faq-navcol):not(.faq-maincol){
  display: none !important;
}

/* Mobiel onder elkaar */
@media (max-width: 991.98px){
  .faq-row{ grid-template-columns: 1fr; }
  .faq-navcol, .faq-maincol { grid-column: auto; }
}

/* ====== SIDEBAR (links) ====== */
#customerservice-nav.card{
  border: 1px solid #eee !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  overflow: hidden;
  background: #fff;
}

#customerservice-nav .nav{
  display: grid;
  gap: .5rem;
  padding: .5rem;
}

#customerservice-nav .nav-link{
  display: block;
  padding: .6rem .8rem;
  border-radius: 10px;
  color: #111;
  text-decoration: none;
  border: 1px solid #eee;
  background: #fff;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

#customerservice-nav .nav-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-color: #eaeaea;
}

#customerservice-nav .nav-link.active{
  border-color: var(--color-custom);
  box-shadow: inset 3px 0 0 0 var(--color-custom);
  background: color-mix(in oklab, var(--color-custom) 6%, white);
  font-weight: 700;
}

/* ====== CONTENTPANEEL (rechts) + ACCORDION ====== */
#customerservice-faq-accordion{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  padding: 1rem;
}
@media (max-width: 480px){
  #customerservice-faq-accordion{ padding: .875rem; }
}

/* Kaartjes */
#customerservice-faq-accordion .card,
#customerservice-faq-accordion .card-custom,
#customerservice-faq-accordion .card-custom-collapse{
  border: 1px solid #eee !important;
  border-radius: 14px !important;
  /*box-shadow: 0 6px 22px rgba(0,0,0,.08);*/
  overflow: hidden;
  background: #fff;
}
#customerservice-faq-accordion .card + .card{ margin-top: .75rem; }

/* Header */
#customerservice-faq-accordion .card-header,
#customerservice-faq-accordion .customerservice-faq-card-header{
  background: #fff !important;
  border-bottom: 1px solid #eee !important;
  padding: .875rem 1rem !important;
}

/* Trigger link */
#customerservice-faq-accordion .card-header a[role="tab"],
#customerservice-faq-accordion .card-header [data-toggle="collapse"],
#customerservice-faq-accordion .customerservice-faq-card-header a{
  display: block;
  color: #111 !important;
  font-weight: 600;
  text-decoration: none !important;
  position: relative;
  padding-right: 2rem; /* ruimte voor chevron */
}
#customerservice-faq-accordion .card-header a:hover{
  background: rgba(0,0,0,.03);
}

/* Chevron */
#customerservice-faq-accordion .card-header [data-toggle="collapse"]::after,
#customerservice-faq-accordion .customerservice-faq-card-header [data-toggle="collapse"]::after{
  content: "";
  position: absolute;
  top: 50%;
  right: .75rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(-45deg);
  opacity: .7;
}
#customerservice-faq-accordion .card-header [data-toggle="collapse"].collapsed::after,
#customerservice-faq-accordion .customerservice-faq-card-header [data-toggle="collapse"].collapsed::after{
  transform: translateY(-40%) rotate(45deg);
  opacity: .5;
}

/* Open state accent */
#customerservice-faq-accordion .card-header a[aria-expanded="true"]{
  background: color-mix(in oklab, var(--color-custom) 6%, white) !important;
  box-shadow: inset 3px 0 0 0 var(--color-custom);
}

/* Body */
#customerservice-faq-accordion .card-body,
#customerservice-faq-accordion .customerservice-faq-card-body{
  background: #fff;
  color: #374151;
  padding: .875rem 1rem 1rem !important;
  line-height: 1.6;
}

/* ====== Jouw bestaande resets blijven geldig ====== */
.card-collapse{ margin: 0; }
.card-collapse, .card-collapse .card-header{
  box-shadow: none;
  background-color: transparent;
  border-radius: 0;
}

/* Parent-fix: haal het centreren en knijpen van #main-cell weg */
#main-cell.ml-auto,
#main-cell.mr-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#main-row,
#main-cell {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
}

/* Zorg dat de direct binnenste .row de normale gutters heeft */
#main-cell > .row {
  margin-left: -15px !important;
  margin-right: -15px !important;
}
#main-cell > .row > [class*="col-"] {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
/* FAQ — 1/3–2/3 layout */
.faq-row{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,2fr);
  gap: 1.25rem;
  margin-left: -15px;   /* nette Bootstrap-gutters */
  margin-right: -15px;
  width: 100%;
}

.faq-row > [class*="col-"]{
  flex: unset !important;
  max-width: unset !important;
  min-width: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.faq-navcol  { grid-column: 1; }
.faq-maincol { grid-column: 2; }

/* Verberg eventuele derde icoon/telefoon-kolom */
.faq-row > [class*="col-"]:not(.faq-navcol):not(.faq-maincol){
  display: none !important;
}

@media (max-width: 991.98px){
  .faq-row{ grid-template-columns: 1fr; }
  .faq-navcol, .faq-maincol { grid-column: auto; }
}

/* Sidebar kaart */
#customerservice-nav.card{
  border: 1px solid #eee !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  overflow: hidden;
  background: #fff;
}
#customerservice-nav .nav{ display:grid; gap:.5rem; padding:.5rem; }
#customerservice-nav .nav-link{
  display:block; padding:.6rem .8rem; border-radius:10px; color:#111; text-decoration:none;
  border:1px solid #eee; background:#fff;
  transition: transform .12s, box-shadow .12s, border-color .12s;margin-bottom:1.5rem;box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
#customerservice-nav .nav-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-color: #eaeaea;
}
#customerservice-nav .nav-link.active{
  border-color: var(--color-custom);
  box-shadow: inset 3px 0 0 0 var(--color-custom);
  background: color-mix(in oklab, var(--color-custom) 6%, white);
  font-weight: 700;
}

/* Accordion kaart + chevrons */
#customerservice-faq-accordion{
  background:#fff; border:1px solid #eee; border-radius:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.08); padding:1rem;
}
@media (max-width:480px){ #customerservice-faq-accordion{ padding:.875rem; } }

#customerservice-faq-accordion .card,
#customerservice-faq-accordion .card-custom,
#customerservice-faq-accordion .card-custom-collapse{
  border:1px solid #eee !important; border-radius:14px !important;
  /*box-shadow:0 6px 22px rgba(0,0,0,.08);*/ overflow:hidden; background:#fff;
}
#customerservice-faq-accordion .card + .card{ margin-top:.75rem; }

#customerservice-faq-accordion .card-header,
#customerservice-faq-accordion .customerservice-faq-card-header{
  background:#fff !important; border-bottom:1px solid #eee !important; padding:.875rem 1rem !important;
}
#customerservice-faq-accordion .card-header a[role="tab"],
#customerservice-faq-accordion .card-header [data-toggle="collapse"],
#customerservice-faq-accordion .customerservice-faq-card-header a{
  display:block; color:#111 !important; font-weight:600; text-decoration:none !important;
  position:relative; padding-right:2rem;
}
#customerservice-faq-accordion .card-header a:hover{ background:rgba(0,0,0,.03); }

#customerservice-faq-accordion .card-header [data-toggle="collapse"]::after,
#customerservice-faq-accordion .customerservice-faq-card-header [data-toggle="collapse"]::after{
  content:""; position:absolute; top:50%; right:.75rem; width:10px; height:10px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-60%) rotate(-45deg); opacity:.7;
}
#customerservice-faq-accordion .card-header [data-toggle="collapse"].collapsed::after,
#customerservice-faq-accordion .customerservice-faq-card-header [data-toggle="collapse"].collapsed::after{
  transform:translateY(-40%) rotate(45deg); opacity:.5;
}

#customerservice-faq-accordion .card-header a[aria-expanded="true"]{
  background: color-mix(in oklab, var(--color-custom) 6%, white) !important;
  box-shadow: inset 3px 0 0 0 var(--color-custom);
}

#customerservice-faq-accordion .card-body,
#customerservice-faq-accordion .customerservice-faq-card-body{
  background:#fff; color:#374151; padding:.875rem 1rem 1rem !important; line-height:1.6;
}

/* Resets die jij al gebruikte */
.card-collapse{ margin:0; }
.card-collapse, .card-collapse .card-header{ box-shadow:none; background-color:transparent; border-radius:0; }

/* ===== FAQ chevron — definitieve, consistente variant ===== */

/* 0) Globale accordion-driehoek NIET toepassen binnen de klantenservice-FAQ */
#customerservice-faq-accordion .card-header [data-toggle="collapse"]::after {
  content: none !important; /* eerst alles neutraliseren */
  border: 0 !important;
}

/* 1) Inline iconen in FAQ-header uitzetten (we tekenen zelf de chevron) */
#customerservice-faq-accordion .card-header i,
#customerservice-faq-accordion .card-header .material-icons {
  display: none !important;
}

/* 2) Eén duidelijke chevron voor de FAQ-headerlink */
#customerservice-faq-accordion .card-header [data-toggle="collapse"]{
  position: relative;
  padding-right: 2rem !important; /* ruimte voor chevron rechts */
  text-decoration: none !important;
  color: #111 !important;
  font-weight: 600;
}

/* dicht: ► (met CSS-borders) */
#customerservice-faq-accordion .card-header [data-toggle="collapse"]::after{
  content: "";
  position: absolute;
  top: 50%;
  right: .75rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);   /* wijst naar rechts/beneden */
  opacity: .65;
}

/* open: ▼ */
#customerservice-faq-accordion .card-header [data-toggle="collapse"][aria-expanded="true"]::after{
  transform: translateY(-40%) rotate(135deg);  /* wijst naar beneden */
  opacity: .9;
}

/* optioneel: kleine hover feedback */
#customerservice-faq-accordion .card-header [data-toggle="collapse"]:hover{
  background: rgba(0,0,0,.03);
}

/* FAQ: ademruimte rechts bij actief (geopend) item */
#customerservice-faq-accordion .card-header a{
  border-radius: 10px;                 /* mooi afgerond */
}

#customerservice-faq-accordion .card-header a[aria-expanded="true"]{
  margin-right: .5rem;                  /* ruimte rechts */
  padding-right: 2.25rem !important;    /* chevron blijft passen */
  /* jouw bestaande accent mag blijven staan */
  /* background + inset left bar komen uit je eerdere rules */
}

/* optioneel: op heel smal scherm iets compacter */
@media (max-width: 480px){
  #customerservice-faq-accordion .card-header a[aria-expanded="true"]{
    margin-right: .375rem;
  }
}

/* --- NIEUW --- */

.section {
    padding: 0px!important;
}

footer ul li a {
    color: #777!important;
    padding: 0.9375rem;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
    position: relative;
    display: block;
}

#sdp #sdp-top-banner-header {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 35%;
    display: block;
    background-color: #f0f0f0;
    max-width: 1140px !important;
    margin: 0 auto !important;
}

.card {
    font-weight: 400;
    border: 0;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.form-control-custom {
    background-color: #e81c24!important;
}