/* Productcarrousel op de startpagina: vijf kaarten in beeld, pijlen aan de zijkanten,
   en per klik verschuift de rij precies één kaart. */

.mk-carousel {
  --mk-carousel-per-view: 5;
  --mk-carousel-gap: 16px;
  position: relative;
}

.mk-carousel-viewport {
  display: flex;
  gap: var(--mk-carousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 6px;
  margin: -4px -2px -6px;
}

.mk-carousel-viewport::-webkit-scrollbar { display: none; }
.mk-carousel-viewport:focus-visible { outline: 2px solid var(--mk-blue, #0056a3); outline-offset: 2px; }

.mk-carousel-item {
  flex: 0 0 calc((100% - (var(--mk-carousel-per-view) - 1) * var(--mk-carousel-gap)) / var(--mk-carousel-per-view));
  max-width: calc((100% - (var(--mk-carousel-per-view) - 1) * var(--mk-carousel-gap)) / var(--mk-carousel-per-view));
  scroll-snap-align: start;
  display: flex;
}

.mk-carousel-item > .mk-card { width: 100%; }

.mk-carousel-arrow {
  position: absolute;
  top: var(--mk-carousel-arrow-top, 50%);
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--mk-line, #e2e2e2);
  background: #fff;
  color: var(--mk-blue, #0056a3);
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.mk-carousel-arrow:hover { background: var(--mk-blue, #0056a3); color: #fff; }
.mk-carousel-arrow[disabled] { opacity: .35; pointer-events: none; }

.mk-carousel-prev { left: -21px; }
.mk-carousel-next { right: -21px; }

@media (max-width: 1280px) {
  .mk-carousel-prev { left: 2px; }
  .mk-carousel-next { right: 2px; }
}

@media (max-width: 1200px) { .mk-carousel { --mk-carousel-per-view: 3; } }
@media (max-width: 860px)  { .mk-carousel { --mk-carousel-per-view: 2; --mk-carousel-gap: 12px; } }
@media (max-width: 560px)  { .mk-carousel { --mk-carousel-per-view: 1; } }

/* Op smalle schermen stonden de pijlen midden op de kaart, dwars door de titel.
   Ze staan nu ter hoogte van de productfoto, net boven de tekst.
   De waarde volgt de vaste fotohoogte uit oc-catalog.css (168px / 118px). */
@media (max-width: 860px) { .mk-carousel { --mk-carousel-arrow-top: 118px; } }
@media (max-width: 420px) { .mk-carousel { --mk-carousel-arrow-top: 92px; } }

/* Kaarten in de carrousel op één basislijn houden, net als in de oude rij. */
.mk-carousel .mk-card { display: flex; flex-direction: column; }
.mk-carousel .mk-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.mk-carousel .mk-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.mk-carousel .mk-card-specs { min-height: 3.9em; }
.mk-carousel .mk-card-foot { margin-top: auto; }
.mk-carousel .mk-price-now,
.mk-carousel .mk-price-old { white-space: nowrap; }