/* Bestelknop op kaart, detailpagina, nieuws en Eerder besteld (KaartWinkelwagen).
   Apart bestand: ook nodig op pagina's zonder ed-product-list.css (detailpagina). */

/* Bestelknop op kaart / Eerder besteld (KaartWinkelwagen):
   niet in wagen = één knop; in wagen = [ − N + ] + "in winkelwagen". */
.kaart-bestel,
.artikel_lijst.cardlijst .product-card .card-footer > div.kaart-bestel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
}
.kaart-bestel .kaart-bulk,
.kaart-bestel .kaart-stepper,
.kaart-bestel .kaart-status {
  display: none;
}
.kaart-bestel.is-in-wagen .kaart-toevoegen {
  display: none;
}
.kaart-bestel.is-in-wagen .kaart-stepper {
  display: inline-flex;
  align-items: stretch;
}
.kaart-bestel.is-in-wagen .kaart-status {
  display: block;
  width: 100%;
  text-align: center;
  color: #2e7d32;
  font-size: 12px;
  line-height: 1.3;
}
.kaart-bestel.article_ordered {
  background-color: transparent !important;
}
.kaart-stepper .btn {
  min-width: 30px;
  padding: 3px 8px;
  font-weight: 600;
}
.kaart-stepper .kaart-aantal {
  width: 3.4em;
  height: auto;
  text-align: center;
  padding: 3px 2px;
  margin: 0 3px;
  -moz-appearance: textfield;
}
.kaart-stepper .kaart-aantal::-webkit-outer-spin-button,
.kaart-stepper .kaart-aantal::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kaart-bestel.is-in-wagen .kaart-stepper .kaart-aantal {
  border-color: #5cb85c;
  background: #f3faf3;
  font-weight: 600;
}
.kaart-bestel.is-bezig {
  opacity: 0.75;
}
.kaart-bestel .kaart-hint {
  width: 100%;
  text-align: center;
  color: #8a6d3b;
}

/* "Meerdere selecteren" (bulk): vinkje + aantal i.p.v. de directe knop */
body.meerdere-selecteren .kaart-bestel .kaart-bulk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.meerdere-selecteren .kaart-bestel .kaart-bulk .winkelwagenInputVeld {
  width: 3.6em;
  display: inline-block;
}
body.meerdere-selecteren .kaart-bestel .kaart-toevoegen,
body.meerdere-selecteren .kaart-bestel .kaart-stepper {
  display: none !important;
}
body:not(.meerdere-selecteren) .bulk-alleen {
  display: none !important;
}
.meerdere-selecteren-schakelaar {
  font-weight: normal;
  font-size: 13px;
  margin: 0 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
}
.meerdere-selecteren-schakelaar input {
  margin: 0 4px 0 0;
  vertical-align: -1px;
}

/* Telefoon: − en + groot genoeg voor een duim */
@media (max-width: 767px) {
  .kaart-stepper .btn {
    min-width: 42px;
    min-height: 40px;
    font-size: 18px;
    line-height: 1;
  }
  .kaart-stepper .kaart-aantal {
    width: 3.6em;
    min-height: 40px;
    font-size: 16px;
  }
}

/* Nieuwskaarten: vinkje + aantal blijven zichtbaar ("Selecteer zichtbare producten"),
   knop alleen als icoon; in de wagen [ − N + ] naast het vinkje. */
.kaart-bestel.bulk-altijd .kaart-bulk {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.kaart-bestel.bulk-altijd .kaart-bulk .winkelwagenInputVeld {
  width: 3.4em;
  display: inline-block;
}
.kaart-bestel.bulk-altijd .kaart-knop-tekst {
  display: none;
}
.kaart-bestel.bulk-altijd.is-in-wagen .kaart-bulk .winkelwagenInputVeld {
  display: none;
}

/* Detailpagina: bestelknop iets ruimer */
.kaart-detail .kaart-bestel {
  justify-content: flex-start;
  margin: 6px 0 10px;
}
.kaart-detail .kaart-toevoegen {
  padding: 6px 16px;
  font-size: 15px;
}
.kaart-detail .kaart-bestel.is-in-wagen .kaart-status {
  text-align: left;
}

/* Detailpagina, uitverkocht: leverstatus bij de knop + alternatieven op voorraad */
.detail-levering {
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
}
.detail-levering--later {
  background: #fff7e6;
  border: 1px solid #f3d19c;
  color: #6b4a12;
}
.detail-levering--weg {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #666;
}
.detail-levering-uitleg {
  font-size: 13px;
  margin-top: 2px;
}
.detail-alternatieven {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}
.detail-alternatieven-kop {
  margin: 0 0 8px;
  font-weight: 600;
}
.detail-alt-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px;
  margin: 0 -6px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}
.detail-alt-item:hover,
.detail-alt-item:focus {
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.detail-alt-foto {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-alt-foto img {
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}
.detail-alt-info {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.detail-alt-naam {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  color: #23527c;
}
.detail-alt-item:hover .detail-alt-naam {
  text-decoration: underline;
}
.detail-alt-regel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 13px;
}
.detail-alt-prijs {
  font-weight: 600;
}
.detail-alt-regel .stock-indication {
  font-size: 12px;
}
.detail-alt-regel .stock-indication--op-voorraad {
  color: #2e7d32;
}
.detail-levering-datum {
  white-space: nowrap;
}