/** Shopify CDN: Minification failed

Line 190:0 Unexpected "}"
Line 192:2 Unexpected "50%"
Line 193:2 Unexpected "75%"
Line 194:2 Unexpected "100%"
Line 195:0 Unexpected "}"
Line 256:2 Unexpected "}"

**/
/* Lashthing 2026-09-15: vertrouwenselementen van /products/starterkit-lp op de gewone
 * productpagina's: USP-bullets onder de prijs, en onder de koopknop de garantie, Klarna,
 * Trustpilot en de dragersregel met namen.
 * Rollback: dit bestand niet meer inladen in sections/main-product.liquid. */

.lt-usp {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.lt-usp li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  line-height: 1.35;
  color: #2a2620;
}

.lt-usp svg {
  flex: 0 0 auto;
  color: #a8572f;
}

.lt-guar {
  margin: 12px 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  color: #1a1a1a;
}

.lt-klarna {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 1.25rem;
  color: #4a423b;
}

.lt-klarna img {
  display: block;
}

.lt-tp-under {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 10px 0 0;
  font-size: 1.25rem;
  color: #4a423b;
}

.lt-tp-under__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.lt-tp-under__link strong {
  color: #1a1a1a;
}

.lt-tp-under__sep {
  color: #9a9088;
}

.lt-wearers {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 1.25rem;
  line-height: 1.35;
  color: #4a423b;
}

.lt-wearers__avatars {
  display: inline-flex;
  flex: 0 0 auto;
}

.lt-wearers__avatars img {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -1rem;
}

.lt-wearers__avatars img:first-child {
  margin-left: 0;
}

.lt-wearers__tekst strong {
  color: #1a1a1a;
}

/* ---------- garantieblok v3 (15-09-2026) ----------
 * Verzoek Thomas: de belofte moest duidelijker en netter uitgelijnd, met een schild en een
 * omlijning die zichzelf binnen het vak tekent, voor het gevoel van bescherming.
 * Deze regels staan bewust HIER en niet in lt-lp.css: de sectie laadt dit bestand zelf, dus
 * het laadt later en zou de opmaak uit lt-lp.css anders overschrijven. */
.lt-garantie {
  background: var(--lc-warm-50, #f7f3ee);
}

.lt-garantie__kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
  padding: 3.4rem 2.4rem 3.6rem;
  border: 0.1rem solid #e7ded4;
  border-radius: 1.6rem;
  background: #ffffff;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0.8rem 2.4rem rgba(26, 22, 18, 0.07);
}

/* de lijn die zichzelf rond het vak tekent */
.lt-garantie__rand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.lt-garantie__rand-lijn {
  fill: none;
  stroke: #a8572f;
  stroke-width: 2;
  stroke-linejoin: round;
  /* 17-09: lt-lp.js meet de echte lijnlengte en verdeelt die in vier balken,
     een per zijde. De waarden hieronder zijn de terugval als de JS niet draait. */
  stroke-dasharray: var(--lt-balk, 139) var(--lt-gat, 54);
  stroke-dashoffset: var(--lt-periode, 193);
  rx: 5;
  ry: 5;
}

.lt-garantie__kaart.is-in .lt-garantie__rand-lijn {
  animation: lt-rand-reis 5.2s linear infinite;
}

@keyframes lt-rand-teken {
  to { stroke-dashoffset: 0; }
}

/* Een cyclus loopt over twee zijden. Het keerpunt op 50% ligt op de hoek ertussen, en beide
   helften hebben hun eigen ease: vaart over de zijde, inhouden bij de hoek. Twee cycli is een
   hele ronde, dus ruim tien seconden. */
@keyframes lt-rand-reis {
  /* 17-09 (tweede melding Thomas: hij staat stil net rechts van de linkerbovenhoek).
   * Dat punt is geen toeval: het pad van een <rect> met afgeronde hoeken BEGINT op de bovenrand,
   * op x + rx, dus precies daar. Het traagste moment van de cyclus viel samen met dashoffset 0,
   * en dan ligt er per definitie een balkrand op dat beginpunt. Daarom parkeerde hij daar.
   * De reis loopt nu met een faseverschuiving (--lt-reis-*, gezet door lt-lp.js): op het traagste
   * moment liggen de balkranden op de echte hoeken van het vak, nooit meer op de naad. */
  0%   { stroke-dashoffset: var(--lt-reis-start, 292); animation-timing-function: cubic-bezier(0.32, 0.12, 0.68, 0.88); }
  50%  { stroke-dashoffset: var(--lt-reis-half, 195);  animation-timing-function: cubic-bezier(0.32, 0.12, 0.68, 0.88); }
  100% { stroke-dashoffset: var(--lt-reis-eind, 99); }
}
  to   { stroke-dashoffset: 0; }
}
  25%  { stroke-dashoffset: 75;  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  50%  { stroke-dashoffset: 50;  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  75%  { stroke-dashoffset: 25;  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { stroke-dashoffset: 0; }
}

}

/* schild met vinkje, tekent zichzelf na de omlijning */
.lt-garantie__schild {
  display: block;
  margin: 0 0 1.4rem;
  color: #a8572f;
  line-height: 0;
}

.lt-garantie__schild-vorm,
.lt-garantie__schild-vink {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.lt-garantie__kaart.is-in .lt-garantie__schild-vorm { animation: lt-rand-teken 0.9s ease forwards 0.15s; }
.lt-garantie__kaart.is-in .lt-garantie__schild-vink { animation: lt-rand-teken 0.45s ease forwards 0.9s; }

.lt-garantie__eyebrow {
  display: block;
  margin: 0 0 1.1rem;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: #a8572f;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
}

.lt-garantie__titel {
  width: 100%;
  margin: 0 0 1rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

.lt-garantie__tekst {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #4a423b;
}

.lt-garantie__tekst p { margin: 0; }

@media screen and (min-width: 750px) {
  .lt-garantie__kaart { padding: 4.2rem 4rem 4.4rem; }
  .lt-garantie__titel { font-size: 4rem; }
  .lt-garantie__eyebrow { font-size: 1.3rem; }
  .lt-garantie__tekst { font-size: 1.6rem; }
  .lt-garantie__rand-lijn,
  }

@media (prefers-reduced-motion: reduce) {
  .lt-garantie__rand-lijn,
  .lt-garantie__schild-vorm,
  .lt-garantie__schild-vink { stroke-dashoffset: 0; animation: none !important; }
  }

/* ---------- het schild laten leven (verzoek Thomas 15-09-2026) ----------
 * Zodra het tekenen klaar is (ongeveer 1,35 s) gaat het schild rustig ademen en zwelt er een
 * zachte merkbruine gloed achter mee. Bewust traag en klein: het moet leven, niet knipperen.
 * Staat uit bij prefers-reduced-motion. */
.lt-garantie__schild {
  position: relative;
  transform-origin: 50% 55%;
}

.lt-garantie__schild::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 55%;
  width: 9rem;
  height: 9rem;
  margin: -4.5rem 0 0 -4.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 87, 47, 0.22) 0%, rgba(168, 87, 47, 0.10) 45%, rgba(168, 87, 47, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.lt-garantie__schild > svg {
  position: relative;
  z-index: 1;
}

.lt-garantie__kaart.is-in .lt-garantie__schild {
  animation: lt-schild-adem 3.4s ease-in-out 1.5s infinite;
}

.lt-garantie__kaart.is-in .lt-garantie__schild::before {
  animation: lt-schild-gloed 3.4s ease-in-out 1.5s infinite;
}

@keyframes lt-schild-adem {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.05); }
}

@keyframes lt-schild-gloed {
  0%, 100% { transform: scale(0.85); opacity: 0.35; }
  45% { transform: scale(1.12); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-garantie__kaart.is-in .lt-garantie__schild,
  .lt-garantie__kaart.is-in .lt-garantie__schild::before { animation: none; }
  .lt-garantie__schild::before { opacity: 0.4; }
}