/** Shopify CDN: Minification failed

Line 111:20 Unexpected "{"
Line 111:29 Expected ":"
Line 111:35 Unexpected "{"

**/
/* =========================
   DRYE — Homepage Hero (clean)
   ========================= */

.hero-section.homepage-hero {
  position: relative;
  display: flow-root;
  background: var(--bg, #fff);
  padding-block: var(--pad-top, 96px) var(--pad-bottom, 128px);
  overflow: visible; /* viktigt för bleed / rundade hörn */
}

/* ===== Desktop grid (≥1025px default) ===== */
.hero-section.homepage-hero .hero-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 16px;
  display: grid;
  column-gap: var(--col-gap-desktop, 48px);
  row-gap: var(--row-gap-desktop, 32px);
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "title media"
    "body  media"
    "cta   media";
  align-items: center;
}

/* ===== Tablet (768–1024) – en kolumn, låst bredd ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section.homepage-hero .hero-grid {
    max-width: 928px;           /* hela layouten låst till 928 */
    margin: 0 auto;
    padding: 32px 16px;
    column-gap: var(--col-gap-tablet, 32px);
    row-gap: var(--row-gap-tablet, 24px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "body"
      "cta";
    justify-items: flex-start;  /* vänsterställd text/CTA */
  }

  /* Rubrikbredd */
  .hero-section.homepage-hero .hero-title {
    max-width: 569px;
    margin-top: var(--title-offset-tablet, 0px);
  }

  /* Text + CTA följer gridbredden */
  .hero-section.homepage-hero .review,
  .hero-section.homepage-hero .cta-row {
    max-width: 928px;
    width: 100%;
  }

  /* Bild-wrapper: fyller gridbredden, fast höjd */
  .hero-section.homepage-hero .hero-media-wrap,
  .hero-section.homepage-hero .hero-media-wrap.square {
    grid-area: media;
    position: relative;
    overflow: hidden;
    justify-self: center;
    margin: 0;
    width: 100%;
    max-width: 928px;
    height: 486px;
    border-radius: var(--corner, 16px);
    padding: 0 !important;
    transform: translateX(0);
  }

  .hero-section.homepage-hero .hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--media-pos-tablet, center);
  }

  .hero-section.homepage-hero .cta-row {
    justify-content: flex-start; /* knapp + avatars, vänsterbaserat */
  }
}

/* ===== Mobil (≤ 767) ===== */
@media (max-width: 767px) {
  .hero-section.homepage-hero .hero-grid {
    max-width: 928px; /* container, inte viewport */
    margin: 0 auto;
    padding: 0 16px;
    column-gap: var(--col-gap-mobile, 20px);
    row-gap: var(--row-gap-mobile, 20px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "body"
      "cta";
    justify-items: flex-start;
  }
@media (max-width: 767px){
  #shopify-section-{{ section.id }}{
    margin-top: -12px; /* testa -8, -12, -16 */
  }
}

  .hero-section.homepage-hero .hero-title {
    max-width: var(--title-max-w-mobile, 92vw);
    margin-top: var(--title-offset-mobile, 0px);
  }

  .hero-section.homepage-hero .review,
  .hero-section.homepage-hero .cta-row {
    max-width: 100%;
    width: 100%;
  }

  /* Bilden fyller sin kolumn på mobil,
     höjd kan styras via settings (media_h_mobile) eller fall back till 295px */
  .hero-section.homepage-hero .hero-media-wrap,
  .hero-section.homepage-hero .hero-media-wrap.square {
    grid-area: media;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: var(--media-h-mobile, 295px);
    margin: 0;
    border-radius: var(--corner, 16px);
    padding: 0 !important;
    transform: translateX(0);
  }

  .hero-section.homepage-hero .hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--media-pos-mobile, center);
  }

  /* Mobil: behåll staplad CTA om du gillar nuvarande känsla.
     Vill du hellre ha knapp + avatars på samma rad: ändra flex-direction till row. */
  .hero-section.homepage-hero .cta-row {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Titel – desktop basic ===== */
.hero-section.homepage-hero .hero-title {
  grid-area: title;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-family: var(--font-display, 'ClashGrotesk-Variable', sans-serif);
  font-weight: 300;
  font-variation-settings: "wght" 300;
  font-synthesis-weight: none;
  max-width: var(--title-max-w-desktop, 680px);
  margin-top: var(--title-offset-desktop, 0px);
}

/* ===== Media wrapper – desktop (≥1025px) ===== */
@media (min-width: 1025px) {
  .hero-section.homepage-hero .hero-media-wrap {
    grid-area: media;
    position: relative;
    overflow: hidden;
    justify-self: end;
    margin-left: auto;
    margin-right: 0;
    width: var(--media-w-desktop, auto);
    height: var(--media-h-desktop, auto);
    max-width: 100%;
    border-radius: var(--corner, 16px);
    padding: 0 !important;
    transform: translateX(var(--media-shift-desktop, 0px));
  }

  .hero-section.homepage-hero .hero-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--media-pos-desktop, center);
    border-radius: inherit;
    margin: 0;
  }
}

/* Corner patterns */
.hero-section.homepage-hero .hero-media-wrap.corners-tlbr {
  border-radius: var(--corner, 16px) 0 var(--corner, 16px) 0;
}

.hero-section.homepage-hero .hero-media-wrap.corners-trbl {
  border-radius: 0 var(--corner, 16px) 0 var(--corner, 16px);
}

.hero-section.homepage-hero .hero-media-wrap.square {
  border-radius: 0;
}

/* Text body */
.hero-section.homepage-hero .review {
  grid-area: body;
  max-width: var(--text-max-w-desktop, 608px);
}

.hero-section.homepage-hero .review-text {
  margin: 0 0 16px;
  font-family: var(--font-body, 'InterVariable', sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
}

/* CTA + Avatars */
.hero-section.homepage-hero .cta-row {
  grid-area: cta;
  display: flex;
  align-items: center;
  gap: var(--cta-gap, 16px);
  margin-top: var(--cta-top-gap, 32px);
}

@media (min-width: 769px) {
  .hero-section.homepage-hero .cta-row {
    flex-wrap: nowrap; /* knapp vänster, avatars höger på en rad */
  }
}

.hero-section.homepage-hero .cta-row.avatars-right .button { order: 1; }
.hero-section.homepage-hero .cta-row.avatars-right .avatars { order: 2; }
.hero-section.homepage-hero .cta-row.avatars-left .avatars { order: 1; }
.hero-section.homepage-hero .cta-row.avatars-left .button { order: 2; }
.hero-section.homepage-hero .cta-row.avatars-below .avatars { flex-basis: 100%; order: 2; }
.hero-section.homepage-hero .cta-row.avatars-below .button { order: 1; }

.hero-section.homepage-hero .avatars {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hero-section.homepage-hero .avatars .stack {
  display: flex;
  align-items: center;
}

.hero-section.homepage-hero .avatars .stack img:not(:first-child) {
  margin-left: -10px;
  border-radius: 999px;
}

/* Logos */
.hero-section.homepage-hero .logos {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* Editor safety */
.shopify-design-mode .hero-section.homepage-hero {
  overflow: visible !important;
  isolation: isolate;
}

/* Extra media radius */
.homepage-hero .hero-media-wrap,
.homepage-hero .image,
.homepage-hero .video-wrapper {
  overflow: hidden;
  border-top-left-radius: 56px !important;
  border-bottom-right-radius: 56px !important;
}

.homepage-hero .image img,
.homepage-hero .video-wrapper img,
.homepage-hero .video-wrapper video {
  border-top-left-radius: 56px !important;
  border-bottom-right-radius: 56px !important;
}

@media (max-width: 767px) {
  .homepage-hero .hero-media-wrap,
  .homepage-hero .image,
  .homepage-hero .video-wrapper,
  .homepage-hero .image img,
  .homepage-hero .video-wrapper img,
  .homepage-hero .video-wrapper video {
    border-top-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
  }
}
@media (max-width: 767px) {
  .hero-section.homepage-hero { padding-top: 0; }   /* eller 8–16px */
  .hero-section.homepage-hero .hero-grid { padding-top: 0; }
}