/* ==================================================================
   Nova Septem - Eigen zijwinkelwagen (side cart)
   ================================================================== */

.jh-sc{ position: fixed; inset: 0; z-index: 100000; }
.jh-sc[hidden]{ display: none; }

.jh-sc__waas{
  position: absolute; inset: 0;
  background: rgba(20, 28, 18, .42);
  opacity: 0; transition: opacity .25s ease;
}
.jh-sc.is-open .jh-sc__waas{ opacity: 1; }

.jh-sc__lade{
  position: absolute; top: 0; right: 0;
  height: 100%; width: 420px; max-width: 100%;
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(16, 24, 16, .18);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.jh-sc.is-open .jh-sc__lade{ transform: none; }

/* ---- Kop ---- */

.jh-sc__kop{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px;
}
.jh-sc__koptitel{
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 19px; font-weight: 800; color: #1e2a17; line-height: 1.2;
}
.jh-sc__telling{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: 999px; background: #476930; color: #fff;
  font-size: 12.5px; font-weight: 700;
}
.jh-sc__sluit{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: #5f6b57; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.jh-sc__sluit:hover{ background: #f5f8f1; color: #1e2a17; }

/* ---- Inhoud ---- */

.jh-sc__body{
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 20px 8px;
  display: flex; flex-direction: column;
}
.jh-sc__lijst{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.jh-sc__regel{
  display: flex; gap: 12px; padding: 10px;
  border-radius: 12px; background: #fff;
  transition: opacity .16s ease, transform .16s ease, background .15s ease;
}
.jh-sc__regel:hover{ background: #fafcf8; }
.jh-sc__regel.is-weg{ opacity: 0; transform: translateX(14px); }

.jh-sc__beeld{ flex: 0 0 62px; width: 62px; }
.jh-sc__beeld img{
  display: block; width: 62px; height: 62px;
  object-fit: contain; background: #f5f8f1;
  border-radius: 8px; padding: 5px; box-sizing: border-box;
}

.jh-sc__info{ flex: 1 1 auto; min-width: 0; }
.jh-sc__titel{
  font-size: 14.5px; line-height: 1.3; font-weight: 600; color: #1e2a17;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jh-sc__titel a{ color: inherit; text-decoration: none; }
.jh-sc__titel a:hover{ color: #476930; }
.jh-sc__sku{ font-size: 12px; color: #8a9486; margin-top: 2px; }
.jh-sc__onder{ display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* ---- Aantalregelaar ---- */

.jh-sc__stepper{
  display: inline-flex; align-items: center;
  border: 1px solid #dfe5db; border-radius: 10px;
  overflow: hidden; background: #fff;
}
.jh-sc__stap{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 32px; border: 0; background: transparent;
  color: #476930; cursor: pointer; transition: background .15s ease;
}
.jh-sc__stap:hover{ background: #f0f5ec; }
.jh-sc__aantal{
  width: 38px; height: 32px; border: 0 !important; text-align: center;
  font-size: 14px; font-weight: 600; color: #1e2a17;
  background: transparent; padding: 0 !important; -moz-appearance: textfield;
}
.jh-sc__aantal::-webkit-outer-spin-button,
.jh-sc__aantal::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.jh-sc__prijs{
  margin-left: auto; font-size: 15px; font-weight: 700;
  color: #1e2a17; white-space: nowrap;
}
.jh-sc__weg{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: #b3bcb0; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.jh-sc__weg:hover{ background: #fbeceb; color: #c0403f; }

/* ---- Voet ---- */

.jh-sc__voet{
  margin-top: auto; padding: 16px 0 20px;
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 18%);
}
.jh-sc__totaal{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: 12px; background: #f5f8f1;
  font-size: 15px; color: #5f6b57;
}
.jh-sc__totaal strong{ font-size: 19px; font-weight: 800; color: #476930; }
.jh-sc__notitie{ margin: 10px 0 12px; font-size: 12.5px; color: #8a9486; }

.jh-sc__knop{
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 18px; border-radius: 10px;
  font-size: 15.5px; font-weight: 700; text-decoration: none;
  box-sizing: border-box; transition: background .15s ease, color .15s ease;
}
.jh-sc__knop--groen{ background: #476930; color: #fff !important; }
.jh-sc__knop--groen:hover{ background: #3a5726; }
.jh-sc__knop--licht{ background: #f0f3ed; color: #1e2a17 !important; margin-top: 8px; }
.jh-sc__knop--licht:hover{ background: #e6ebe0; }

/* ---- Lege winkelwagen ---- */

.jh-sc__leeg{
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 40px 10px; color: #8a9486;
}
.jh-sc__leegtitel{ margin: 8px 0 0; font-size: 16px; font-weight: 700; color: #1e2a17; }
.jh-sc__leegtekst{ margin: 0 0 14px; font-size: 14px; max-width: 260px; }
.jh-sc__leeg .jh-sc__knop{ width: auto; padding: 12px 22px; }

/* ---- Bezig met bijwerken ---- */

.jh-sc__bezig{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55);
}

/* Het hidden-attribuut zet display:none via de browserstandaard, maar dat
   verliest het van de display:flex hierboven. Daarom expliciet terugzetten,
   anders blijft de laadsluier permanent zichtbaar. */
.jh-sc__bezig[hidden]{ display: none; }
.jh-sc__spinner{
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid #dfe5db; border-top-color: #476930;
  animation: jh-sc-draai .7s linear infinite;
}
@keyframes jh-sc-draai{ to { transform: rotate(360deg); } }
.jh-sc__lade.is-bezig .jh-sc__body{ pointer-events: none; }

/* ---- Achtergrond niet mee laten scrollen ---- */

body.jh-sc-open{ overflow: hidden; }

/* ---- Mobiel ---- */

@media (max-width: 520px){
  .jh-sc__lade{ width: 100%; }
  .jh-sc__kop{ padding: 14px 16px 10px; }
  .jh-sc__body{ padding: 0 16px 8px; }
  .jh-sc__beeld{ flex-basis: 54px; width: 54px; }
  .jh-sc__beeld img{ width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce){
  .jh-sc__lade, .jh-sc__waas, .jh-sc__regel{ transition: none; }
  .jh-sc__spinner{ animation-duration: 2s; }
}