:root {
  --bs-shadow-tint: 96, 72, 52;
  --bs-shadow-section:
    0 1px 2px rgba(var(--bs-shadow-tint), .05),
    0 12px 32px -12px rgba(var(--bs-shadow-tint), .18),
    inset 0 0 0 1px rgba(214, 200, 184, .45);
  --bs-shadow-box:
    0 1px 2px rgba(var(--bs-shadow-tint), .05),
    0 6px 18px -8px rgba(var(--bs-shadow-tint), .16),
    inset 0 0 0 1px rgba(214, 200, 184, .45);
}

/* Grote sand/knit-secties, zoals "In 3 stappen" */
.bs-shadow-section { box-shadow: var(--bs-shadow-section); }

/* Kleinere infoblokken, zoals "Belangrijk bij het afrekenen" */
.bs-shadow-box { box-shadow: var(--bs-shadow-box); }

/* Optioneel: stapnummers iets laten "liggen" */
.bs-shadow-section .bs-step-number {
  box-shadow: 0 2px 6px -1px rgba(182, 89, 76, .35);
}

@media (max-width: 767px) {
  .bs-shadow-section {
    box-shadow:
      0 1px 2px rgba(var(--bs-shadow-tint), .05),
      0 8px 20px -10px rgba(var(--bs-shadow-tint), .16),
      inset 0 0 0 1px rgba(214, 200, 184, .45);
  }
}