/* ==========================================================================
   SURGE PEPT — bundelpagina
   Hoort bij snippets/bundle-media.liquid en snippets/bundle-contents.liquid.
   Wordt alleen geladen als product.type == 'Bundle'.

   Magenta blijft gereserveerd voor waarschuwingen (CLAUDE.md); accent is
   --sp-blue. Chakra Petch voor koppen, Manrope voor tekst.
   ========================================================================== */

.sp-bundlemedia { position: relative; z-index: 1; }

/* ── de mediakolom blijft in beeld ─────────────────────────────────────
   Op een gewone productpagina houdt .product__column-sticky de foto in beeld
   terwijl je de rechterkolom leest. De bundeltak rendert een eigen mediablok
   en heeft die wrapper niet, dus de foto scrolde meteen weg. Gemeten: bij een
   gewoon product verschuift de documentpositie van 194 naar 738 zodra je
   scrolt; bij een bundel bleef hij op 187 staan.

   Twee grenzen, met opzet:

   1. Het plakken loopt binnen .product__media-wrapper, en die eindigt binnen
      de productsectie. De kolom kan dus nooit over de blokken eronder heen
      komen — precies de fout die ontstond toen de staande pakketfoto via de
      standaardgalerij werd getoond.
   2. De hero wordt geklemd op de vensterhoogte. Zonder die klem blijft een
      blok dat hoger is dan het scherm hangen met zijn onderkant buiten beeld,
      en dan zie je "What's in the box" nooit.

   Alleen op breed: onder 750px staat alles onder elkaar en heeft plakken geen
   betekenis. */
@media screen and (min-width: 750px) {
  .sp-bundlemedia { position: sticky; top: 3rem; }
  .sp-bundlemedia__heroimg { max-height: calc(100vh - 20rem); }
}

.sp-bundlemedia__hero { margin: 0; }
/* Vierkant kader: de bronbestanden zijn 900px hoog maar 571 tot 1430 breed,
   dus alleen `contain` toont ze allemaal onvervormd én zonder layout shift. */
.sp-bundlemedia__heroimg {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: contain;
}

/* Vult de mediakolom wanneer er niets te tonen valt, zodat de
   tweekolomsopbouw niet inklapt. */
.sp-bundlemedia__none { min-height: 22rem; }

/* ── componentraster ─────────────────────────────────────────────────── */

.sp-bundlegrid--secondary { margin-top: 2.4rem; }

.sp-bundlegrid__label {
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.1rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sp-blue-ice, #9BE3FA); margin: 0 0 1.2rem;
}

.sp-bundlegrid__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr);
}
.sp-bundlegrid__list--1 { grid-template-columns: 1fr; }
.sp-bundlegrid__list--3 { grid-template-columns: repeat(3, 1fr); }

.sp-bundlegrid--secondary .sp-bundlegrid__list { gap: .9rem; }

.sp-bundlegrid__item {
  position: relative; border: 1px solid var(--sp-line, #1B2A40);
  border-radius: 1.2rem; padding: 1.2rem; background: rgba(0, 0, 0, .18);
  display: flex; align-items: center; justify-content: center;
}

.sp-bundlegrid__img {
  display: block; width: 100%; height: auto; max-height: 26rem;
  object-fit: contain;
}
.sp-bundlegrid__img--empty { aspect-ratio: 3 / 4; opacity: .25; }

.sp-bundlegrid__qty {
  position: absolute; right: .8rem; bottom: .8rem;
  font-family: "JetBrains Mono", monospace; font-size: 1.2rem; line-height: 1;
  color: #fff; background: rgba(0, 166, 240, .9);
  padding: .5rem .8rem; border-radius: 99px;
}

/* ── inhoudsblok in de tekstkolom ────────────────────────────────────── */

.sp-bundle {
  margin: 2.8rem 0 0; padding: 2.2rem;
  border: 1px solid var(--sp-line, #1B2A40); border-radius: 1.6rem;
  background: linear-gradient(180deg, rgba(11, 18, 32, .55), rgba(7, 12, 22, .75));
}

.sp-bundle__head { margin-bottom: 1.8rem; }

.sp-bundle__title {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: 1.7rem; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; margin: 0;
}

/* Maakt zichtbaar dat dit blok de bron is, zodat de lijst die nog in de
   productbeschrijving staat niet als tegenstrijdig leest. */
.sp-bundle__note {
  font-family: "Manrope", sans-serif; font-size: 1.25rem; line-height: 1.6;
  color: var(--sp-text-dim, #7E93AC); margin: .6rem 0 0;
}

.sp-bundle__list { list-style: none; margin: 0; padding: 0; }

.sp-bundle__item + .sp-bundle__item { border-top: 1px solid rgba(27, 42, 64, .7); }

.sp-bundle__link {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.2rem 0; text-decoration: none; color: inherit;
}
.sp-bundle__link:hover .sp-bundle__name { color: var(--sp-blue-ice, #9BE3FA); }

.sp-bundle__thumb {
  flex: none; width: 5rem; height: auto; object-fit: contain;
  border-radius: .6rem; background: rgba(0, 0, 0, .25);
}
.sp-bundle__thumb--empty { aspect-ratio: 3 / 4; opacity: .25; }

.sp-bundle__body { flex: 1; min-width: 0; display: block; }

.sp-bundle__name {
  display: block; font-family: "Manrope", sans-serif; font-weight: 600;
  font-size: 1.45rem; color: var(--sp-text, #E8F1FA); transition: color .15s;
}

.sp-bundle__meta {
  display: flex; align-items: baseline; gap: .9rem; margin-top: .4rem;
  font-family: "JetBrains Mono", monospace; font-size: 1.2rem;
  color: var(--sp-text-dim, #7E93AC);
}
.sp-bundle__qty { color: var(--sp-blue, #00A6F0); font-weight: 500; }

.sp-bundle__line {
  flex: none; font-family: "JetBrains Mono", monospace; font-size: 1.35rem;
  color: var(--sp-text, #E8F1FA); font-variant-numeric: tabular-nums;
}

/* ── cadeau-component ────────────────────────────────────────────────────
   De gratis BAC Water is een echte bundelcomponent met prijs 0. Hij krijgt
   een eigen regel onderaan de lijst en toont "Free" in plaats van een bedrag;
   "€ 0,00" leest als een fout in plaats van als een cadeau.

   IJsblauw, bewust niet magenta: magenta is in dit thema gereserveerd voor
   waarschuwingen en disclaimers (zie CLAUDE.md). */

.sp-bundle__item--free { background: rgba(155, 227, 250, .035); }

.sp-bundle__gift {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700; font-size: .95rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-blue-ice, #9BE3FA);
}

.sp-bundle__line--free {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700; font-size: 1.1rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sp-blue-ice, #9BE3FA);
}

/* ── besparing ───────────────────────────────────────────────────────── */

.sp-bundle__savings {
  margin-top: 1.8rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(27, 42, 64, .9);
}

.sp-bundle__savingsrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; margin-bottom: .7rem;
}

.sp-bundle__savingslabel {
  font-family: "Manrope", sans-serif; font-size: 1.3rem;
  color: var(--sp-text-dim, #7E93AC);
}

.sp-bundle__was {
  font-family: "JetBrains Mono", monospace; font-size: 1.35rem;
  color: var(--sp-text-dim, #7E93AC); text-decoration-thickness: 1px;
}

.sp-bundle__now {
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.9rem;
  color: #fff; font-variant-numeric: tabular-nums;
}

.sp-bundle__delta {
  margin: 1rem 0 0; padding: .9rem 1.2rem; border-radius: .9rem;
  background: rgba(0, 166, 240, .1); border: 1px solid rgba(0, 166, 240, .3);
  font-family: "Manrope", sans-serif; font-size: 1.35rem;
  color: var(--sp-blue-ice, #9BE3FA);
}
.sp-bundle__delta strong { color: #fff; }

/* Voorraad. Feitelijk, geen urgentietaal, en bewust niet magenta — dit is
   informatie, geen waarschuwing. */
.sp-bundle__stock {
  margin: 1.4rem 0 0; font-family: "JetBrains Mono", monospace;
  font-size: 1.25rem; color: var(--sp-text-dim, #7E93AC);
}

/* ── responsief ──────────────────────────────────────────────────────── */

@media screen and (max-width: 749px) {
  .sp-bundlegrid__list--3 { grid-template-columns: repeat(2, 1fr); }
  .sp-bundle { padding: 1.6rem; }
  .sp-bundle__link { gap: 1rem; }
  .sp-bundle__thumb { width: 4.2rem; }
}