/** Shopify CDN: Minification failed

Line 75:30 Expected ":"

**/
/* === Skippify Hero (framework) === */
@import url('tokens.css');

.sk-hero {
  position: relative;
  overflow: clip;
}
.sk-hero__bg,
.sk-hero__overlay {
  position: absolute; inset: 0;
}
.sk-hero__overlay {
  pointer-events: none;
  background: linear-gradient(180deg, var(--hero-overlay-from), var(--hero-overlay-to));
}

.sk-hero__container {
  position: relative;
  max-width: var(--hero-container-max, 1280px);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}
.sk-hero__inner {
  display: grid;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}

/* layout varianten */
.sk-hero--layout-image-left .sk-hero__inner {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}
.sk-hero--layout-image-right .sk-hero__inner {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  direction: rtl; /* snelle swap; we corrigeren content zelf */
}
.sk-hero--layout-image-right .sk-hero__content { direction: ltr; }
.sk-hero--layout-stacked .sk-hero__inner {
  grid-template-columns: 1fr;
}

.sk-hero--full {
  min-height: 100vh;
}

@media (min-width: 769px){
  .sk-hero { padding-top: var(--hero-pt-desktop, 120px); padding-bottom: var(--hero-pb-desktop, 120px); }
}
@media (max-width: 768px){
  .sk-hero { padding-top: var(--hero-pt-mobile, 80px); padding-bottom: var(--hero-pb-mobile, 80px); }
}

.sk-hero__content {
  max-width: var(--hero-content-max, 900px);
}

/* alignment */
.sk-hero--align-left .sk-hero__content { text-align: left; margin-left: 0; margin-right: auto; }
.sk-hero--align-center .sk-hero__content { text-align: center; margin-left: auto; margin-right: auto; }
.sk-hero--align-right .sk-hero__content { text-align: right; margin-left: auto; margin-right: 0; }

.sk-hero__badge {
  display: inline-block;
  padding: .35em .7em;
  border-radius: 999px;
  font-size: .8rem;
  background: rgba(255,255,255,.12);
  color: var(--hero-text-color, #fff);
  backdrop-filter: blur(6px);a
  margin-bottom: .75rem;
}

.sk-hero__title {
  color: var(--hero-title-color, #fff);
  font-size: clamp(var(--hero-title-fs-mobile, 32px), 6vw, var(--hero-title-fs-desktop, 64px));
  line-height: var(--hero-title-lh, 1.1);
  letter-spacing: var(--hero-title-ls, 0.5px);
  margin: 0 0 .5em 0;
}

.sk-hero__richtext {
  color: var(--hero-text-color, #fff);
  opacity: .9;
  margin: 0 0 1.25rem 0;
}

.sk-hero__buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
.sk-btn {
  --_bg: var(--sk-btn-bg, #ffcc70);
  --_fg: var(--sk-btn-fg, #0b0b0f);
  display: inline-block;
  background: var(--_bg);
  color: var(--_fg);
  border-radius: var(--hero-btn-radius, 40px);
  padding: .9em 1.3em;
  text-decoration: none;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}
.sk-btn:hover { transform: translateY(-2px); opacity: .95; box-shadow: 0 8px 18px rgba(0,0,0,.25); }

.sk-hero__media { display: flex; justify-content: center; }
.sk-hero__img {
  width: 100%;
  max-width: var(--hero-image-max, 600px);
  height: auto;
  border-radius: var(--hero-radius, 16px);
  object-fit: contain;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sk-hero__img:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }

/* mobiel: stacked altijd */
@media (max-width: 900px){
  .sk-hero__inner { grid-template-columns: 1fr !important; }
}