select {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    padding: 10px 15px;
}

/* Cart & buttons overrides */
.cart-badge {
  border-radius: 50%;
  padding: 3px 6px;
  font-size: 12px;
}

/* generic btn-getstarted style (outside header) */
.btn-getstarted{
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  border-radius: 50px;
  transition: 0.3s;
  display:inline-block;
  border:none;
  box-shadow:none;
}
.btn-getstarted:hover,
.btn-getstarted:focus{
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.add-to-cart-detail.btn-getstarted,
#cart-checkout.btn-getstarted{
  font-size:14px;
}

.cart-icon-btn{
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Sponsors Section
--------------------------------------------------------------*/
.sponsors-intro {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.sponsor-groep {
  margin-bottom: 46px;
}

.sponsor-niveau {
  font-family: var(--heading-font);
  font-size: 34px;
  color: var(--accent-color);
  text-align: center;
  margin-bottom: 22px;
  position: relative;
}

.sponsor-niveau::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--accent-color);
  margin: 6px auto 0;
  border-radius: 3px;
}

.sponsor-kaart {
  text-align: center;
}

/* De PNG's zijn allemaal in hetzelfde vak van 900 x 450 gezet
   (eetdag/sponsorlogos/normaliseer.py), dus een vaste hoogte volstaat om
   een rustig raster te krijgen. */
.sponsor-kaart img {
  max-width: 100%;
  height: 92px;
  object-fit: contain;
  filter: none;
  transition: transform 0.3s;
}

.sponsor-kaart a:hover img {
  transform: scale(1.06);
}

.sponsor-naam {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* Hoofdsponsors kregen in het dossier "de meest prominente plaats" beloofd:
   groter logo en drie per rij in plaats van vier. Zilver, brons en de vrienden
   kochten geen logo op de website, alleen een naamsvermelding. */
.sponsor-groep-hoofdsponsor .sponsor-kaart img { height: 130px; }

.sponsor-namen {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

.sponsor-namen li {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 50px;
  padding: 7px 18px;
  font-size: 15px;
}

.sponsor-namen li a {
  color: inherit;
}

.sponsor-namen li a:hover {
  color: var(--accent-color);
}

.sponsors-slot {
  margin-top: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/* Eén regel onder de naam, voor sponsors waarbij de naam alleen niet zegt wat
   ze doen. Kleiner en lichter dan de naam, zodat het raster rustig blijft. */
.sponsor-ondertekst {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.sponsor-namen li em {
  font-style: normal;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}
.sponsor-namen li em::before { content: " · "; }

/*--------------------------------------------------------------
# Kinderanimatie
--------------------------------------------------------------*/
.animatie-intro {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.animatie-kaart {
  background: var(--surface-color);
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 82%);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  transition: transform .3s, border-color .3s;
}
.animatie-kaart:hover {
  transform: translateY(-4px);
  border-color: var(--accent-color);
}

.animatie-beeld { aspect-ratio: 4 / 3; overflow: hidden; }
.animatie-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.animatie-tekst { padding: 20px 22px 22px; text-align: center; }

.animatie-wie {
  display: block;
  font-family: var(--heading-font);
  font-size: 40px;
  line-height: 1;
  color: var(--accent-color);
}

/* Het uur is het tweede dat je moet weten en het eerste dat je moet kunnen
   onthouden, dus het staat als een pil onder de naam. */
.animatie-uur {
  display: inline-block;
  margin-top: 12px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  padding: 7px 20px;
  font-size: 15px;
  font-weight: 600;
}

/* Zonder foto moet de kaart op eigen kracht staan: meer lucht en een grotere
   naam, zodat het geen lege doos lijkt.

   Staat er naast een kaart mét foto, dan is dat niet genoeg: die naast hem is
   dan veel hoger en de tekst hangt bovenaan in de lege ruimte. Daarom centreert
   de kaart zijn inhoud en rekt hij mee op tot dezelfde hoogte. Zo leest het als
   een tijdkaart die er zo hoort te staan, en niet als een foto die niet
   ingeladen is. Zodra er wél een foto is, doet deze regel niets meer. */
.animatie-kaart.zonder-beeld {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.animatie-kaart.zonder-beeld .animatie-tekst { padding: 40px 22px 42px; }
.animatie-kaart.zonder-beeld .animatie-wie { font-size: 52px; }

.animatie-slot {
  margin-top: 32px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}