/** Shopify CDN: Minification failed

Line 703:0 Unexpected "<"
Line 1666:0 Expected "}" to go with "{"

**/
.card__quick-add--below {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  transform: none !important;
  margin-top: 10px;
  text-align: center;
}

.card__quick-add--below .button,
.card__quick-add--below .btn,
.card__quick-add--below [type="submit"] {
  white-space: nowrap;
  border: 1.5px solid var(--color-foreground, #111);
  border-radius: 999px;
  background: #fff;
  color: var(--color-foreground, #111);
  padding: 10px 18px;
  font-weight: 600;
}

.card__quick-add--below .button:hover,
.card__quick-add--below .btn:hover,
.card__quick-add--below [type="submit"]:hover {
  background: var(--color-foreground, #111);
  color: #fff;
}

/* Dölj gamla overlay-knappar */
.card__quick-add-container--desktop,
.card__quick-add-container--mobile {
  display: none !important;

}





.card_quick-add-container--desktop {
  display: block;
  margin-top: 12px;
  text-align: center;
}

.card_quick-add-container--desktop .button,
.card_quick-add-container--desktop .btn {
  display: inline-block;
  border: 1.5px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  padding: 10px 18px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.card_quick-add-container--desktop .button:hover,
.card_quick-add-container--desktop .btn:hover {
  background: #111;
  color: #fff;
}
.card_quick-add-container--desktop {
  margin-top: -200px !important;
  position: relative !important;
  z-index: 1000 !important;


}

/* Justera avståndet för köpknappen på desktop */
.wt-product__add-to-cart_form-wrapper {
  margin-top: -40px !important; /* flyttar upp knappen */
}
/* Bild-med-text: bredda texten på mobil, vänsterställ och undvik ordglapp */
[data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__overlay {
  left: 0 !important;
  right: 0 !important;            /* overlay får använda hela bredden */
}

[data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__overlay__content {
  max-width: none !important;     /* ta bort maxbredd */
  width: 200% !important;         /* använd hela bredden */
  margin: 0 !important;           /* inga auto-marginaler som centrerar */
  padding-left: 0px !important;  /* lite trygg innermarginal mot kanten */
  padding-right: 0px !important;
}

[data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__text.rte {
  text-align: center !important;    /* vänsterställ (ingen justification = inga stora ordglapp) */
  line-height: 1.6 !important;
  hyphens: auto;                  /* tillåt avstavning där det behövs */
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;        /* radbryt hellre än stora mellanslag */
  word-break: normal;
  text-justify: auto;
}

[data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__title {
  text-wrap: balance;             /* snyggare radbrytning i rubriken (stöds brett) */
  margin-bottom: 12px;
}

/* Säkerställ att layouten inte låser två kolumner på mobil */
/* === Bild med text – fullt kant-till-kant på MOBIL === */
@media (max-width: 749px){
  /* Ta bort all intern padding */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__overlay,
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__overlay__content,
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  /* Bryt ut själva innehållet till FULLA viewporten */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__overlay__content{
    width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important; /* bredda utanför förälderns padding */
  }
  

  /* Se till att textblocken inte lägger till egen padding */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__title,
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__text{
    width: 100% !important;
    padding-inline: 4vw !important;
    margin-inline: 4vw !important;
    text-align: center !important;   /* centrera texten */
  }

  /* Inga avstavningar / konstiga radbrytningar */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .rte p{
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.6 !important;
  }
}

/* === RUBRIK: full-bleed på MOBIL (samma sektion) === */
@media (max-width: 749px){
  /* 1) Ta bort intern padding som kan låsa rubriken */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__overlay,
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__overlay__content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Full bredd + centrera + egen kantmarginal med vw */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__title{
    display: block !important;
    width: 120vw !important;
    max-width: 120vw !important;

    /* flytta ut till viewportens kanter (bryter ur page-width) */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* justera HUR MYCKET LUFT du vill ha från kanterna */
    padding-left: 1vw !important;
    padding-right: 1vw !important;

    text-align: center !important;

    /* inga avstavningar eller konstiga radbrytningar */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}
/* === DESKTOP – rubrik + brödtext: större, utan avstavning === */
@media (min-width: 990px){
  /* Rubriken */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__title{
    /* stoppa avstavning/fula radbrytningar */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    /* typografi – justera efter smak */
    font-size: clamp(40px, 3.2vw, 64px) !important;  /* större rubrik */
    line-height: 1.30 !important;                    /* lite tätare än standard */
    letter-spacing: -0.01em;                         /* subtilt tight */
    text-wrap: balance;                              /* snyggare radbrytning när det stöds */
  }

  /* Brödtexten under rubriken */
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__text{
    max-width: 1100px;           /* håller raderna läsbara */
    margin-inline: auto;         /* centrera på desktop */
  }
  [data-section-id="template--26191385952594__image_with_text_WxXpEB"] .hero__text p{
    hyphens: none !important;    /* inga bindestreck */
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    font-size: clamp(18px, 1.15vw, 22px) !important; /* lite större brödtext */
    line-height: 1.65 !important;                    /* luftigare rader */
  }
}





















/* Bild-med-text: bredda texten på mobil, vänsterställ och undvik ordglapp */
[data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__overlay {
  left: 0 !important;
  right: 0 !important;            /* overlay får använda hela bredden */
}

[data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__overlay__content {
  max-width: none !important;     /* ta bort maxbredd */
  width: 200% !important;         /* använd hela bredden */
  margin: 0 !important;           /* inga auto-marginaler som centrerar */
  padding-left: 0px !important;  /* lite trygg innermarginal mot kanten */
  padding-right: 0px !important;
}

[data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__text.rte {
  text-align: center !important;    /* vänsterställ (ingen justification = inga stora ordglapp) */
  line-height: 1.6 !important;
  hyphens: auto;                  /* tillåt avstavning där det behövs */
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;        /* radbryt hellre än stora mellanslag */
  word-break: normal;
  text-justify: auto;
}

[data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__title {
  text-wrap: balance;             /* snyggare radbrytning i rubriken (stöds brett) */
  margin-bottom: 12px;
}

/* Säkerställ att layouten inte låser två kolumner på mobil */
/* === Bild med text – fullt kant-till-kant på MOBIL === */
@media (max-width: 749px){
  /* Ta bort all intern padding */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__overlay,
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__overlay__content,
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  /* Bryt ut själva innehållet till FULLA viewporten */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__overlay__content{
    width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important; /* bredda utanför förälderns padding */
  }
  

  /* Se till att textblocken inte lägger till egen padding */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__title,
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__text{
    width: 100% !important;
    padding-inline: 4vw !important;
    margin-inline: 4vw !important;
    text-align: center !important;   /* centrera texten */
  }

  /* Inga avstavningar / konstiga radbrytningar */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .rte p{
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.6 !important;
  }
}

/* === RUBRIK: full-bleed på MOBIL (samma sektion) === */
@media (max-width: 749px){
  /* 1) Ta bort intern padding som kan låsa rubriken */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__overlay,
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__overlay__content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Full bredd + centrera + egen kantmarginal med vw */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__title{
    display: block !important;
    width: 120vw !important;
    max-width: 120vw !important;

    /* flytta ut till viewportens kanter (bryter ur page-width) */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* justera HUR MYCKET LUFT du vill ha från kanterna */
    padding-left: 1vw !important;
    padding-right: 1vw !important;

    text-align: center !important;

    /* inga avstavningar eller konstiga radbrytningar */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}
/* === DESKTOP – rubrik + brödtext: större, utan avstavning === */
@media (min-width: 990px){
  /* Rubriken */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__title{
    /* stoppa avstavning/fula radbrytningar */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    /* typografi – justera efter smak */
    font-size: clamp(40px, 3.2vw, 64px) !important;  /* större rubrik */
    line-height: 1.30 !important;                    /* lite tätare än standard */
    letter-spacing: -0.01em;                         /* subtilt tight */
    text-wrap: balance;                              /* snyggare radbrytning när det stöds */
  }

  /* Brödtexten under rubriken */
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__text{
    max-width: 1100px;           /* håller raderna läsbara */
    margin-inline: auto;         /* centrera på desktop */
  }
  [data-section-id="template--26191385952594__image_with_text_WUqYPt"] .hero__text p{
    hyphens: none !important;    /* inga bindestreck */
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    font-size: clamp(18px, 1.15vw, 22px) !important; /* lite större brödtext */
    line-height: 1.65 !important;                    /* luftigare rader */
  }
}

/* 0) Låt inget runt FAQ klippa bort skuggan */
.wt-collapse-menu,
.wt-collapse__wrapper{
  overflow: visible !important; /* viktigast för att skuggan ska synas utanför */
}

/* 1) Slå av temats skugga på endast rubriken */
.wt-collapse-menu .wt-collapse__trigger{
  box-shadow: none !important;
  background: transparent !important; /* skugga ska ligga på hela kortet */
}

/* 2) Skugga på HELA kortet med pseudo-element (robust mot inre bakgrunder) */
.wt-collapse-menu .wt-collapse{
  position: relative;           /* ankare för ::before */
  background: #fff;             /* vit karta för hela kortet */
  border-radius: 12px;
  overflow: visible;            /* pseudo-element får “sticka ut” */
  isolation: isolate;           /* egen stack – minskar konstiga overlap-problem */
}

/* Pseudo-elementet ÄR skuggan */
.wt-collapse-menu .wt-collapse::before{
  content: "";
  position: absolute;
  inset: -6px;                  /* låt skuggan breda ut sig utanför kortet */
  border-radius: 14px;          /* lite större än kortets radie */
  box-shadow: 0 10px 28px rgba(0,0,0,.14);   /* justera styrka här */
  opacity: 0;
  pointer-events: none;         /* klickar inte det här lagret */
  transition: opacity .25s ease;
}

/* Visa skuggan både vid hover och när kortet är öppet */
.wt-collapse-menu .wt-collapse:hover::before,
.wt-collapse-menu .wt-collapse:has(.wt-collapse__trigger[aria-expanded="true"])::before{
  opacity: 1;
}

/* 3) Lite kompaktare spacing (frivilligt; lämna om du redan gjort detta) */
.wt-collapse-menu .wt-collapse__trigger{
  padding: 14px 18px !important;
}
.wt-collapse-menu .wt-collapse__target{
  padding: 0 18px 16px !important;
}

/* 4) Normalvikt på titel (inte bold) – lämna om du redan satt detta */
.wt-collapse-menu .wt-collapse__trigger__title{
  font-weight: 400 !important;
}






/* Premium hover-effekt för Handla nu-knappar */
.bsc-btn {
  transition: all 0.35s ease;
  border: 1.5px solid #111;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

/* Hover-effekt: färgskifte + lyft + skugga */
.bsc-btn:hover {
  background: linear-gradient(135deg, #111, #333) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Liten pulserande effekt på hover */
.bsc-btn:hover::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(25deg);
  animation: shine 1.5s infinite linear;
}

/* Shine/pulse animation */
@keyframes shine {
  from { transform: translateX(-100%) rotate(25deg); }
  to { transform: translateX(100%) rotate(25deg); }
}




/* --- CTA: premium hover + press + extra bottenluft --- */
.bsc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 1.5px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  transition:
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .08s ease;
  overflow: hidden; /* krävs för gradient-lagret */
}

/* (1) Gradient-lager som “tänder” på hover */
.bsc-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,#111 0%,#4b4b4b 50%,#777 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
}

.bsc-btn > * {
  position: relative;
  z-index: 1; /* så att texten ligger över gradienten */
}

/* Hover */
.bsc-btn:hover,
.bsc-btn:hover *,
.bsc-btn:focus-visible,
.bsc-btn:focus-visible *,
.bsc-btn:active,
.bsc-btn:active * {
  color: #fff !important;   /* texten blir vit */
  fill:  #fff !important;   /* ev. ikoner blir vita */
}
.bsc-btn:hover::before { opacity: 1; }
.bsc-btn:hover { box-shadow: 0 10px 28px rgba(0,0,0,.14); }

/* (2) “Press”-känsla vid klick */
.bsc-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* (3) Extra avstånd under knappen */
.bsc-card .bsc-btn {
  margin-bottom: 18px; /* justera efter smak */
}

/* Extra touchtarget på mobil */
@media (max-width: 749px) {
  .bsc-btn { min-height: 54px; }
}


/* === BSC CTA – vattentät vit text på hover/focus/active === */
/* 1) Grund: säkerställ att texten ligger ovanpå gradientlagret */
.bsc-btn > * { position: relative; z-index: 1; }

/* 2) Vit text oavsett temaregler (inkl. visited och text-fill) */
.bsc-card a.bsc-btn:hover,
.bsc-card a.bsc-btn:hover *,
.bsc-card a.bsc-btn:focus-visible,
.bsc-card a.bsc-btn:focus-visible *,
.bsc-card a.bsc-btn:active,
.bsc-card a.bsc-btn:active * {
  color: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;  /* <- viktigt i Safari/Chromium */
  text-shadow: none !important;
}

/* 3) Om temat har varianter som .bsc-btn--link, täck dem också */
.bsc-card a.bsc-btn.bsc-btn--link:hover,
.bsc-card a.bsc-btn.bsc-btn--link:hover *,
.bsc-card a.bsc-btn.bsc-btn--link:focus-visible,
.bsc-card a.bsc-btn.bsc-btn--link:focus-visible *,
.bsc-card a.bsc-btn.bsc-btn--link:active,
.bsc-card a.bsc-btn.bsc-btn--link:active * {
  color: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 4) Se till att gradientlagret visas men inte täcker texten */
.bsc-btn::before { z-index: 0; pointer-events: none; }

/* Premium hover-effekt för Handla nu-knappar */
.bsc-btn {
  transition: all 0.35s ease;
  border: 1.5px solid #111;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

/* Hover-effekt: färgskifte + lyft + skugga */
.bsc-btn:hover {
  background: linear-gradient(135deg, #111, #333) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Liten pulserande effekt på hover */
.bsc-btn:hover::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(25deg);
  animation: shine 1.5s infinite linear;
}

/* Shine/pulse animation */
@keyframes shine {
  from { transform: translateX(-100%) rotate(25deg); }
  to { transform: translateX(100%) rotate(25deg); }
}




/* --- CTA: premium hover + press + extra bottenluft --- */
.bsc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 1.5px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  transition:
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .08s ease;
  overflow: hidden; /* krävs för gradient-lagret */
}

/* (1) Gradient-lager som “tänder” på hover */
.bsc-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,#111 0%,#4b4b4b 50%,#777 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
}

.bsc-btn > * {
  position: relative;
  z-index: 1; /* så att texten ligger över gradienten */
}

/* Hover */
.bsc-btn:hover,
.bsc-btn:hover *,
.bsc-btn:focus-visible,
.bsc-btn:focus-visible *,
.bsc-btn:active,
.bsc-btn:active * {
  color: #fff !important;   /* texten blir vit */
  fill:  #fff !important;   /* ev. ikoner blir vita */
}
.bsc-btn:hover::before { opacity: 1; }
.bsc-btn:hover { box-shadow: 0 10px 28px rgba(0,0,0,.14); }

/* (2) “Press”-känsla vid klick */
.bsc-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* (3) Extra avstånd under knappen */
.bsc-card .bsc-btn {
  margin-bottom: 18px; /* justera efter smak */
}

/* Extra touchtarget på mobil */
@media (max-width: 749px) {
  .bsc-btn { min-height: 54px; }
}


/* === BSC CTA – vattentät vit text på hover/focus/active === */
/* 1) Grund: säkerställ att texten ligger ovanpå gradientlagret */
.bsc-btn > * { position: relative; z-index: 1; }

/* 2) Vit text oavsett temaregler (inkl. visited och text-fill) */
.bsc-card a.bsc-btn:hover,
.bsc-card a.bsc-btn:hover *,
.bsc-card a.bsc-btn:focus-visible,
.bsc-card a.bsc-btn:focus-visible *,
.bsc-card a.bsc-btn:active,
.bsc-card a.bsc-btn:active * {
  color: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;  /* <- viktigt i Safari/Chromium */
  text-shadow: none !important;
}

/* 3) Om temat har varianter som .bsc-btn--link, täck dem också */
.bsc-card a.bsc-btn.bsc-btn--link:hover,
.bsc-card a.bsc-btn.bsc-btn--link:hover *,
.bsc-card a.bsc-btn.bsc-btn--link:focus-visible,
.bsc-card a.bsc-btn.bsc-btn--link:focus-visible *,
.bsc-card a.bsc-btn.bsc-btn--link:active,
.bsc-card a.bsc-btn.bsc-btn--link:active * {
  color: #fff !important;
  fill: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 4) Se till att gradientlagret visas men inte täcker texten */
.bsc-btn::before { z-index: 0; pointer-events: none; }

<a class="bsc-btn bsc-btn--link"><span>Handla nu</span></a>
/* ---- SÄKER TEXT: skriv etiketten i ett eget topplager ---- */

/* 0) Stäng av ev. "shine" som tidigare använde ::after */
.bsc-card .bsc-btn:hover::after,
.bsc-card .bsc-btn:focus-visible::after {
  animation: none !important;
  background: none !important;
}

/* 1) Dölj den ursprungliga textnoden (bara visuellt) */
.bsc-btn {
  position: relative;
  color: transparent !important;          /* döljer originaltexten */
  -webkit-text-fill-color: transparent !important;
}

/* 2) Rita etiketten i ett eget lager ovanpå allt */
.bsc-btn::after {
  content: "Handla nu";                   /* alla dina knappar har samma text */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;                             /* över gradient/shine */
  color: #111;
  -webkit-text-fill-color: #111;
  font: inherit;
  letter-spacing: inherit;
  pointer-events: none;                   /* klick går till knappen */
  transition: color .25s ease, -webkit-text-fill-color .25s ease;
}

/* 3) På hover/focus – gör etiketten vit */
.bsc-btn:hover::after,
.bsc-btn:focus-visible::after {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 4) Behåll din befintliga hover-bakgrund och skugga (från din kod) */
/* (inget mer behövs här – din gradient/lyft ligger kvar) */


/* 0) Kill the old shine that used ::after (so it doesn't cover text) */
.bsc-btn:hover::after,
.bsc-btn:focus-visible::after {
  content: none !important;
  animation: none !important;
  background: none !important;
}

/* 1) Create a safe text layer on top of everything */
.bsc-card a.bsc-btn {
  position: relative;
  isolation: isolate;                     /* own stacking context */
}

/* Keep any inner nodes visible/normal just in case */
.bsc-card a.bsc-btn,
.bsc-card a.bsc-btn * {
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* The label that always sits above gradients etc. */
.bsc-card a.bsc-btn::after{
  /* If you ever add data-label on the link it will use it,
     otherwise it falls back to “Handla nu” */
  content: attr(data-label) "Handla nu";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;                             /* above ::before/backgrounds */
  pointer-events: none;                   /* clicks go to the link */

  /* Make sure size is never zeroed by theme rules */
  font-size: clamp(14px, 1.1rem, 18px) !important;
  font-weight: 700;
  letter-spacing: .02em;

  /* Default (non-hover) text color */
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* On hover/focus the label turns white (stays on top) */
.bsc-card a.bsc-btn:hover::after,
.bsc-card a.bsc-btn:focus-visible::after {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* === NUCLEAR LABEL FIX: keep "Handla nu" visible on hover === */

/* 0) No pseudo overlays on/above the text */
.bsc-card a.bsc-btn::before,
.bsc-card a.bsc-btn::after,
.bsc-card a.bsc-btn:hover::before,
.bsc-card a.bsc-btn:hover::after {
  content: none !important;
  display: none !important;
}

/* 1) Reset any gradient-text tricks that make text transparent */
.bsc-card a.bsc-btn,
.bsc-card a.bsc-btn * {
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  font-size: inherit !important; /* defeats font-size:0 hacks */
  visibility: visible !important;
}

/* 2) Your hover: dark gradient + guaranteed white label */
.bsc-card a.bsc-btn:hover,
.bsc-card a.bsc-btn:focus-visible {
  background: linear-gradient(135deg, #111, #333) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  transform: translateY(-3px) scale(1.03);
}

/* 3) Make sure descendants (spans etc) also stay white */
.bsc-card a.bsc-btn:hover *,
.bsc-card a.bsc-btn:focus-visible * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* ================== PREMIUM GLINT + KLICK-KÄNSLA ================== */
/* Vi utgår från att din nuvarande lösning med vit text på hover redan fungerar.
   Den här biten lägger bara till premium-känsla – ingen risk för “försvunnen” text. */

/* 1) Bas – se till att vi kan animera tryggt */
.bsc-btn {
  will-change: transform, box-shadow, background-position;
  outline: none;
}

/* 2) GLINT: lägger till ett extra bakgrundslager som sveper över knappen vid hover.
      Lager 1 = din mörka gradient (redan från din hover-regel)
      Lager 2 = en semitransparent vit “glans”-banderoll som rör sig horisontellt */
.bsc-card .bsc-btn:hover,
.bsc-card .bsc-btn:focus-visible {
  /* lägg till ett andra lager ovanpå befintlig bakgrund */
  background-image:
    linear-gradient(135deg, #111 0%, #333 100%),            /* bas (du har redan denna via din hover) */
    linear-gradient(90deg, rgba(255,255,255,0) 0%,
                          rgba(255,255,255,0.28) 50%,
                          rgba(255,255,255,0) 100%);        /* glint */
  background-size: 100% 100%, 220% 100%;
  background-position: center center, -180% 0;              /* start utanför till vänster */
  animation: bsc-btn-glint 1.4s linear infinite;            /* svep mjukt */
  /* premium-lyft – behåll din befintliga shadow/transform om du vill */
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transform: translateY(-3px) scale(1.03);
}

/* 3) KLICK/press-känsla – kort, fysisk respons */
.bsc-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 6px 16px rgba(0,0,0,.26);
}

/* 4) Subtil “andnings”-puls på hover (ser dyrt ut, stör inte texten) */
@keyframes bsc-btn-breathe {
  0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,.18); }
  50%      { box-shadow: 0 16px 34px rgba(0,0,0,.26); }
}
.bsc-card .bsc-btn:hover {
  animation: bsc-btn-glint 1.4s linear infinite, bsc-btn-breathe 1.8s ease-in-out infinite;
}

/* 5) Glint-animationen – flytta det vita bandet tvärs över knappen */
@keyframes bsc-btn-glint {
  to { background-position: center center, 180% 0; }
}

/* 6) Tillgänglig fokus – snygg ring utan att dölja text */
.bsc-btn:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255,255,255,.7),
    0 0 0 6px rgba(17,17,17,.35),
    0 12px 28px rgba(0,0,0,.22);
}

/* 7) Respektera “reduced motion” */
@media (prefers-reduced-motion: reduce) {
  .bsc-card .bsc-btn:hover,
  .bsc-card .bsc-btn:focus-visible {
    animation: none;
    background-image: linear-gradient(135deg, #111, #333); /* stilla gradient */
  }
}
/* PREMIUM: lyft + glow + klick — utan overlay, kan inte gömma texten */

/* Hover/focus: lyft + halo-glow */
.bsc-card a.bsc-btn.bsc-btn--link:hover,
.bsc-card a.bsc-btn.bsc-btn--link:focus-visible,
a.bsc-btn.bsc-btn--link:hover,
a.bsc-btn.bsc-btn--link:focus-visible {
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 1px 0 rgba(255,255,255,.12) inset !important;
  transform: translateY(-3px) scale(1.03) !important;
}

/* Klick/press: kort fysisk respons */
.bsc-card a.bsc-btn.bsc-btn--link:active,
a.bsc-btn.bsc-btn--link:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.26) !important;
}

/* Valfri “andnings”-puls på hover (känns premium) */
@keyframes bsc-btn-breathe {
  0%, 100% { box-shadow: 0 12px 28px rgba(0,0,0,.18); }
  50%      { box-shadow: 0 16px 34px rgba(0,0,0,.26); }
}
.bsc-card a.bsc-btn.bsc-btn--link:hover,
a.bsc-btn.bsc-btn--link:hover {
  animation: bsc-btn-breathe 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bsc-card a.bsc-btn.bsc-btn--link:hover,
  a.bsc-btn.bsc-btn--link:hover { animation: none; }
}
/* ... dina tidigare regler för knappen ... */

/* Tvingad premium-hover fix */
html body .bsc-card a.bsc-btn.bsc-btn--link:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}
/* ... dina tidigare regler för knappen ... */

/* Tvingad premium-hover fix */
html body .bsc-card a.bsc-btn.bsc-btn--link:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

/* === PREMIUM GLINT (utan pseudo) — lägg ALLRA sist === */
html body a.bsc-btn:hover,
html body a.bsc-btn:focus-visible,
html body .bsc-btn.bsc-btn--link:hover,
html body .bsc-btn.bsc-btn--link:focus-visible{
  /* Basfärg + två lager: 1) mörk gradient 2) rörlig vit glans */
  background-color: #111 !important;
  background-image:
    linear-gradient(135deg, #111 0%, #333 100%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%,
                          rgba(255,255,255,0.28) 50%,
                          rgba(255,255,255,0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 220% 100%;
  background-position: center center, -180% 0;   /* start utanför till vänster */
  animation: bsc-glint-bg 1.4s linear infinite;

  /* premium lyft (kan justeras) */
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;

  /* garantera vit, synlig text */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;

  will-change: background-position, transform, box-shadow;
}

/* Klick/press-känsla */
html body a.bsc-btn:active,
html body .bsc-btn.bsc-btn--link:active{
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.26) !important;
}

/* Glint-animationen: flytta glanslagret tvärs över knappen */
@keyframes bsc-glint-bg {
  to { background-position: center center, 180% 0; }
}

/* Reduced motion: stilla gradient utan svep */
@media (prefers-reduced-motion: reduce) {
  html body a.bsc-btn:hover,
  html body a.bsc-btn:focus-visible,
  html body .bsc-btn.bsc-btn--link:hover,
  html body .bsc-btn.bsc-btn--link:focus-visible{
    animation: none;
    background-image: linear-gradient(135deg, #111, #333) !important;
  }
}









/* === Basstil för knappen === */
.bsc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 1.5px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.35s ease;
  z-index: 0;
}

/* Texten */
.bsc-btn__label {
  position: relative;
  z-index: 2; /* alltid över shine-lagret */
  color: inherit;
  transition: color 0.35s ease;
}

/* Shine-lagret */
.bsc-btn__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -100% 0;
  opacity: 0;
  z-index: 1; /* under texten men över bakgrunden */
  transition: opacity 0.35s ease;
}

/* Hover-effekt */
.bsc-btn:hover {
  background: linear-gradient(135deg, #111, #333);
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.bsc-btn:hover .bsc-btn__label {
  color: #fff; /* texten alltid vit */
}

.bsc-btn:hover .bsc-btn__shine {
  opacity: 1;
  animation: shine-slide 1.5s linear infinite;
}

/* Klick-animation */
.bsc-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* Shine keyframes */
@keyframes shine-slide {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}


































/* === HEADER: Gäller endast surfplatta + desktop (≥769px) === */
@media screen and (min-width: 769px) {

  /* Ta bort extra spacer/höjd */
  #shopify-section-sections--26191386149202__header .wt-header__spacer {
    display: none !important;
  }

  /* Kompakt header utan vertikal padding/marginaler */
  #shopify-section-sections--26191386149202__header .wt-header__body,
  #shopify-section-sections--26191386149202__header .page-header,
  #shopify-section-sections--26191386149202__header .wt-header,
  #shopify-section-sections--26191386149202__header .header,
  #shopify-section-sections--26191386149202__header .header-wrapper,
  #shopify-section-sections--26191386149202__header .header__container,
  #shopify-section-sections--26191386149202__header .page-width {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Logotyp – lite större och centrerad */
  #shopify-section-sections--26191386149202__header .wt-header__logo__link {
    display: inline-flex !important;
    align-items: center !important;
  }
  #shopify-section-sections--26191386149202__header .wt-header__logo__img {
    max-height: 32px !important; /* justera 28–36px efter smak */
    height: auto !important;
    width: auto !important;
  }

  /* Meny – tajtare mellanrum och lite större text (ej bold) */
  #shopify-section-sections--26191386149202__header .wt-page-nav-mega__list {
    gap: 8px !important; /* testa 6–10px vid behov */
    align-items: center !important;
  }
  #shopify-section-sections--26191386149202__header .wt-page-nav-mega__link {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    line-height: 1.2 !important;
    font-size: 15px !important; /* större utan att bryta layouten */
    font-weight: 400 !important; /* inte bold */
  }

  /* Ikonpanelen – inga extra paddings */
  #shopify-section-sections--26191386149202__header .wt-header__panel {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #shopify-section-sections--26191386149202__header .wt-header__panel__link {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sticky-läge: behåll den kompakta höjden */
  .shopify-section-header-sticky
  #shopify-section-sections--26191386149202__header .wt-header__body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}







 /* === Logo-slider: responsiv slotbredd + centrering === */
#shopify-section-template--26191385297234__logo_marquee_tJVHXM .lm__track{
  display: grid;
  grid-auto-flow: column;
  gap: 12px;                              /* måste matcha JS */
  grid-auto-columns: var(--slot-w, 160px);/* fylls av JS */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  place-items: center;                    /* vertikal centrering av varje cell */
}

#shopify-section-template--26191385297234__logo_marquee_tJVHXM .lm__item{
  display:flex; align-items:center; justify-content:center;
  height: 120px;
}
@media (min-width:1024px){
  #shopify-section-template--26191385297234__logo_marquee_tJVHXM .lm__item{ height:190px; }
}

#shopify-section-template--26191385297234__logo_marquee_tJVHXM .lm__img{
  height:100%; width:auto; object-fit:contain;
  max-width: var(--slot-w, 160px);
  display:block; margin:0 auto;
}

/* Logo-slider – mer avstånd mellan loggor på mobil */
@media (max-width: 599px){
  .wt-brands--swipe .wt-brands__item {
    padding: 0 !important;
    margin: 0 !important;
  }

  .wt-brands--swipe .wt-brands__image {
    max-width: 85px !important;   /* lite mindre loggor */
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* Lägg extra spacing mellan loggor */
  .wt-brands--swipe .swiper-slide {
    margin-right: 20px !important; /* öka mellanrummet, testa 16–24px */
  }
}

/* Dölj badge-containern i just din produktgrid-sektion */
#shopify-section-template--26254863892818__product-grid .card__badges {
  display: none !important;
}



/* --- Återställ barens höjd/utseende --- */
.wt-announcement-bar,
.wt-announcement {
  min-height: 38px !important;      /* normal desktop-höjd */
}

#wt-announcement__container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  justify-content: center;           /* eller flex-start om du vill vänsterställa */
}

/* Meddelande-chip: ge tillbaka lite vertikal luft (höjd) */
#wt-announcement__container .wt-announcement__body {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  /* Viktigt: ge vertikal padding + rimlig line-height */
  padding: 6px 0 !important;         /* återställer höjd utan att öka sidomarginal */
  line-height: 1.35 !important;      /* gör att baren inte blir “för smal” */
  margin: 0 !important;              /* ingen extra höjd via margin */
}

/* Enda horisontella spacingen mellan meddelanden */
#wt-announcement__container .wt-announcement__body + .wt-announcement__body {
  margin-left: 14px !important;      /* öka/minska efter smak */
}

/* Ikon nära texten */
#wt-announcement__container .wt-announcement__body svg {
  margin-left: 6px !important;
}

/* Marquee-läge: samma spacing, en rad */
.wt-announcement__container--marquee { overflow: hidden; white-space: nowrap; }
.wt-announcement__container--marquee .wt-announcement__marquee {
  padding-right: 50px !important;   /* samma värde som gap */
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap !important;
  gap: 50px !important;              /* matcha 14px ovan */
  animation: pmc-marquee var(--time, 20s) linear infinite;
  vertical-align: middle;
}
@keyframes pmc-marquee-2 {
  from { transform: translateX(100%); }  /* startar precis till höger om spår 1 */
  to   { transform: translateX(0); }      /* glider in och täcker sömlöst */
}

@keyframes pmc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Mobil: lite tajtare mellanrum men behåll höjd */
@media (max-width: 390px){
  #wt-announcement__container .wt-announcement__body { padding: 6px 0 !important; line-height: 0 !important; }
  #wt-announcement__container .wt-announcement__body + .wt-announcement__body { margin-left: 10px !important; }
  .wt-announcement__container--marquee .wt-announcement__marquee { gap: 10px !important; }
  .wt-announcement__container--marquee .wt-announcement__marquee:nth-of-type(2){ margin-left: 10px !important; }
}






/* ===============================
   Image with Text – mobilanpassning
   =============================== */

/* Bredda texten på mobil för denna sektion */
@media (max-width: 749px){
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text__content,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text__text,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__wrapper,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .hero--grid {
    max-width: 100% !important;
    width: 100% !important;
  }

  #shopify-section-template--26191385297234__image_with_text_QhjpMr .page-width,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text {
    padding-left: 0px !important;   /* ändra till 0 om du vill helt kant-till-kant */
    padding-right: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #shopify-section-template--26191385297234__image_with_text_QhjpMr .rte,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .rte * {
    max-width: none !important;
    width: 100% !important;
  }
}

/* ===============================
   Justera "LÄS MER"-strecket
   =============================== */

/* ===============================
   Image with Text – mobilanpassning
   =============================== */

/* Bredda texten på mobil för denna sektion */
@media (max-width: 749px){
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text__content,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text__text,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__wrapper,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .hero--grid {
    max-width: 100% !important;
    width: 100% !important;
  }

  #shopify-section-template--26191385297234__image_with_text_QhjpMr .page-width,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text {
    padding-left: 0px !important;   /* ändra till 0 om du vill helt kant-till-kant */
    padding-right: 0px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

 /* ===============================
   Image with Text – mobilanpassning
   =============================== */

/* Bredda texten på mobil för denna sektion */
@media (max-width: 749px){
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text__content,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text__text,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__wrapper,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .hero--grid {
    max-width: 100% !important;
    width: 100% !important;
  }

  #shopify-section-template--26191385297234__image_with_text_QhjpMr .page-width,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .image-with-text {
    padding-left: 0 !important;   /* ändra till 8–12px om du vill lite sidluft */
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #shopify-section-template--26191385297234__image_with_text_QhjpMr .rte,
  #shopify-section-template--26191385297234__image_with_text_QhjpMr .rte * {
    max-width: none !important;
    width: 100% !important;
  }
}

/* ===============================
   "LÄS MER" – Ny metod: rita kort linje via BACKGROUND på <span>
   (och stäng av alla möjliga långa linjer runtom)
   =============================== */

/* 1) Slå AV alla helbredds-linjer i området (wrapper/overlay) */
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__overlay,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__overlay::before,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__overlay::after,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__overlay__content,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__overlay__content::before,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__overlay__content::after,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__button--gap,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__button--gap::before,
#shopify-section-template--26191385297234__image_with_text_QhjpMr .hero__button--gap::after {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;         /* täcker gradient-underlines på container */
  background-image: none !important;
}

/* 2) Slå AV alla linjer direkt på länken (oavsett teknik) */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link,
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link::before,
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link::after {
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;         /* vissa teman använder inset-shadow som linje */
  background: none !important;         /* vissa använder gradient som underline */
  background-image: none !important;
  outline: 0 !important;
}

/* 3) Slå AV ev. pseudo-linje på TEXT-spanet */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link span::before,
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link span::after {
  content: none !important;
}

/* 4) Vår ENDA korta linje: bakgrund på <span> (inte pseudo) */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link span{
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* avstånd text–linje */

  /* rita kort, centrerad linje */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100px 1px;     /* ← ÄNDRA LÄNGDEN HÄR, t.ex. 80px/120px */
  background-position: 50% 100%;
}

/* Grundstil – ingen linje synlig först */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link span {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

/* Hover: linjen växer utåt från mitten */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link:hover span::after {
  width: 100px;  /* längden på linjen */
}

/* Premium: animerad underline för "Läs mer" i just denna sektion */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link {
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Grundläge: linjen är osynlig (0px bred) men definierad som bakgrund */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link span {
  --underline-width: 100px;                 /* <- ändra längden här */
  --underline-thickness: 2px;               /* <- ändra tjockleken här */
  --underline-color: currentColor;          /* eller en hex/var(--brand-color) */

  display: inline-block;
  padding-bottom: 4px;                      /* avstånd text–linje */
  background-image: linear-gradient(var(--underline-color), var(--underline-color)) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 100% !important; /* centrerad under texten */
  background-size: 0 var(--underline-thickness) !important;  /* start: 0 */
  transition: background-size 0.28s ease !important;
}

/* Hover/focus: linjen växer ut (från mitten) till vald längd */
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link:hover span,
#shopify-section-template--26191385297234__image_with_text_QhjpMr a.hero__button--link:focus-visible span {
  background-size: var(--underline-width) var(--underline-thickness) !important;
}

/* Bredda texten i Newsletter with image */
@media (max-width: 749px){
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .newsletter__content,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .newsletter__text,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .newsletter__wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .page-width,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .newsletter {
    padding-left: 0 !important;   /* sätt t.ex. 8px om du vill ha lite sidluft */
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .rte,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .rte * {
    max-width: none !important;
    width: 100% !important;
  }
}

/* Newsletter – centrera rubrik + brödtext på mobil */
@media (max-width: 749px){
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .page-width,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .newsletter__wrapper,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .newsletter__content,
  #shopify-section-template--26191385297234__newsletter_with_image_PcQe9x .newsletter__text {
    padding-left: 4 !important;
    padding-right: 4 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}





/* ===============================
   Image with Text – mobilanpassning
   =============================== */

/* Bredda texten på mobil för denna sektion */
@media (max-width: 749px){
  #shopify-section-template--26214436634962__image_with_text_WxXpEB .image-with-text__content,
  #shopify-section-template--26214436634962__image_with_text_WxXpEB .image-with-text__text,
  #shopify-section-template--26214436634962__image_with_text_WxXpEB .hero__wrapper,
  #shopify-section-template--26214436634962__image_with_text_WxXpEB .hero--grid {
    max-width: 100% !important;
    width: 100% !important;
  }

  #shopify-section-template--26214436634962__image_with_text_WxXpEB .page-width,
  #shopify-section-template--26214436634962__image_with_text_WxXpEB .image-with-text {
    padding-left: 0 !important;   /* ändra till 8–12px om du vill lite sidluft */
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #shopify-section-template--26214436634962__image_with_text_WxXpEB .rte,
  #shopify-section-template--26214436634962__image_with_text_WxXpEB .rte * {
    max-width: none !important;
    width: 100% !important;
  }
}


/* Image with Text – kant till kant (sektion kRcpFR) */
@media (max-width: 749px){
  /* Nolla alla vanliga wrappers i sektionen */
  [id*="__image_with_text_kRcpFR"] .page-width,
  [id*="__image_with_text_kRcpFR"] .image-with-text,
  [id*="__image_with_text_kRcpFR"] .grid,
  [id*="__image_with_text_kRcpFR"] .grid__item,
  [id*="__image_with_text_kRcpFR"] .image-with-text__content,
  [id*="__image_with_text_kRcpFR"] .image-with-text__text,
  [id*="__image_with_text_kRcpFR"] .rte {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Ta bort eventuella grid-gaps som ställer till det */
  [id*="__image_with_text_kRcpFR"] .grid {
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  /* Om temat sätter inner-padding på textblocket, nolla även den */
  [id*="__image_with_text_kRcpFR"] .image-with-text__text > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }

  /* I vissa teman används padding-inline – nolla den också */
  [id*="__image_with_text_kRcpFR"] .page-width,
  [id*="__image_with_text_kRcpFR"] .image-with-text,
  [id*="__image_with_text_kRcpFR"] .image-with-text__content,
  [id*="__image_with_text_kRcpFR"] .image-with-text__text {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }
}