html{
  scrollbar-gutter: stable;
}
/* ===== CTA: Logga in / Bli kund (meny/landningsyta) ===== */
.sv-login-cta{
  text-align: center;
  margin: 40px 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.sv-login-cta__text{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.sv-login-cta__buttons{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.sv-login-cta__btn{
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  background: #EADE06;
  color: #111;
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  flex: 0 0 auto; /* så knappar inte växer */
}

.sv-login-cta__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  background: #f3e633;
}

/* Outline-variant */
.sv-login-cta__btn--outline{
  background: transparent;
  border: 2px solid #EADE06;
  color: #111;
  box-shadow: none;
}

.sv-login-cta__btn--outline:hover{
  background: #EADE06;
}

/* ===== Form-styling (om du använder egna fält någonstans) ===== */
.sv-modal__form{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.sv-modal__form input,
.sv-modal__form select,
.sv-modal__form textarea{
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  font-family: inherit;
}

.sv-modal__form textarea{
  resize: vertical;
  min-height: 90px;
}

/* ===== Kontaktsidan: egen rubrik + intro ===== */
.sv-contact-header{
  max-width: 720px;
  margin: 40px auto 20px;
  text-align: left; /* mindre "konstigt" än center */
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.sv-contact-header h1{
  display: block !important;
  margin: 0 0 10px !important;
  font-size: 34px;
}

.sv-contact-header p{
  margin: 0;
  font-size: 16px;
  color: #555;
  line-height: 1.5;
}

/* Dölj Abicarts standardrubrik på kontaktsidan, men visa din */
body h1{
  display: none;
}
body .sv-contact-header h1{
  display: block !important;
}
.sv-contact-after{
  max-width: 720px;
  margin: 14px auto 40px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #666;
  text-align: center;
}

.sv-contact-after p{
  margin: 0 0 6px;
  font-size: 14px;
}

.sv-contact-after__small{
  font-size: 12px;
  opacity: .7;
}
/* ===== Kundtjänst-knapp + hover-meny ===== */
.sv-support-widget{
  position: relative;
  display: inline-block;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.sv-support-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid #EADE06;
  background: #EADE06;
  color: #111;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.sv-support-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  background: #f3e633;
}

.sv-support-caret{
  font-size: 14px;
  opacity: .9;
}

/* Meny */
.sv-support-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;

  background: #fff;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);

  display: none;
  z-index: 9999;
}

.sv-support-choice{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.sv-support-choice:hover{
  background: rgba(0,0,0,.05);
}

/* Hover öppnar menyn på desktop */
@media (hover:hover){
  .sv-support-widget:hover .sv-support-menu{ display: block; }
}

/* JS kan också toggla menyn */
.sv-support-widget.sv-open .sv-support-menu{ display:block; }

/* ===== Modal ===== */
.sv-support-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
}

.sv-support-modal.sv-show{
  display: block;
}

.sv-support-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.sv-support-card{
  position: relative;
  width: min(92vw, 520px);
  margin: 10vh auto;
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 20px 70px rgba(0,0,0,.25);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  animation: svSupportIn .18s ease;
}

@keyframes svSupportIn{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sv-support-close{
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

.sv-support-title{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: #111;
}

.sv-support-meta{
  margin: 0 0 14px;
  color: #555;
  line-height: 1.5;
  font-size: 14px;
}

.sv-support-grid{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.sv-support-row{
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: #222;
  font-size: 14px;
}

.sv-support-label{
  width: 92px;
  color: #666;
  font-weight: 600;
  flex: 0 0 auto;
}

.sv-support-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.sv-support-linkbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #EADE06;
  background: #EADE06;
  color: #111;
}

.sv-support-linkbtn--ghost{
  background: transparent;
  color: #111;
}
/* ===== Floating placering ===== */
.sv-support-widget{
  position: fixed;              /* floating */
  right: 22px;
  top: 100px;                   /* "ganska högt" – justera 140–220px */
  z-index: 100000;              /* över det mesta */
}

/* Mobil: lite lägre så den inte stör */
@media (max-width: 768px){
  .sv-support-widget{
    top: auto;
    bottom: 22px;
    right: 16px;
  }
}

/* ===== Hover-gap fix ===== */

/* Gör ett "hover-område" som inkluderar både knapp och menyn */
.sv-support-widget{
  padding-bottom: 14px;         /* OSYNLIG BRO mellan knapp och meny */
}

/* Menyn utgår från widgetens kant (inte knappens) */
.sv-support-menu{
  top: calc(100% - 6px);        /* drar upp menyn så den överlappar bron lite */
  left: 50%;
  transform: translateX(-50%);
}

/* Visa menyn när man hovrar över hela widgeten (inkl menyn) */
@media (hover:hover){
  .sv-support-widget:hover .sv-support-menu{
    display: block;
  }
}
/* ================================
   GÅRDSLAGRET – Dölj toppikoner
   Kugghjul, Sök, Cookie, Varukorg
================================ */

/* ⚙️ Audience selector (kugghjul) */
.tws-audience-selector,
.tws-audience-selector--audience-button {
  display: none !important;
}

/* 🔍 Sök-ikon */
.trailblazer--search-button,
.tws-header-search,
.header-search-button {
  display: none !important;
}

/* 🍪 Cookie-knapp */
.tws-accept-cookies--open-btn {
  display: none !important;
}

/* 🛒 Varukorg */
.tws-mini-cart,
.tws-mini-cart--header-cart-button {
  display: none !important;
}
/* ===== Support-widget: diskret vid scroll ===== */
.sv-support-widget{
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  transform-origin: top right;
}

/* När sidan scrollas: gör den mindre + mer diskret */
.sv-support-widget.sv-scrolled{
  opacity: .62;
  transform: translateY(-10px) scale(.86); /* lite upp + mindre */
  filter: saturate(.9);
}

/* Vid hover: “vaknar” den igen */
@media (hover:hover){
  .sv-support-widget.sv-scrolled:hover{
    opacity: 1;
    transform: translateY(-10px) scale(.92);
    filter: none;
  }
}

/* Mobil: brukar kännas bäst att INTE göra den diskret (valfritt) */
@media (max-width: 768px){
  .sv-support-widget.sv-scrolled{
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* ===== Support-widget: diskret vid scroll ===== */
.sv-support-widget{
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  transform-origin: top right;
}

/* När sidan scrollas: gör den mindre + mer diskret */
.sv-support-widget.sv-scrolled{
  opacity: .62;
  transform: translateY(-10px) scale(.86); /* lite upp + mindre */
  filter: saturate(.9);
}

/* Vid hover: “vaknar” den igen */
@media (hover:hover){
  .sv-support-widget.sv-scrolled:hover{
    opacity: 1;
    transform: translateY(-10px) scale(.92);
    filter: none;
  }
}

/* Om menyn är öppen: låt den vara “vaken” även om man har scrollat */
.sv-support-widget.sv-open.sv-scrolled{
  opacity: 1;
  transform: translateY(-10px) scale(.92);
  filter: none;
}

/* Mobil: brukar kännas bäst att INTE göra den diskret (valfritt) */
@media (max-width: 768px){
  .sv-support-widget.sv-scrolled{
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* =======================================
   Gårdslagret – Cards (REN / PREMIUM 2026)
   Bild vänster – text höger
   Ljus neutral yta + mjuk skugga
   Klistra in och ersätt ALL gammal card-CSS
   ======================================= */

/* GRID */
html body .sv-cards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;
}
@media (max-width: 980px){
  html body .sv-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 620px){
  html body .sv-cards{ grid-template-columns:1fr !important; }
}

/* CARD */
html body .sv-cards a.sv-card{
  display:flex !important;
  align-items:stretch !important;

  background:#fafafa !important;                 /* väldigt ljus grå */
  border:1px solid rgba(0,0,0,.06) !important;   /* diskret kant */
  border-radius:22px !important;
  overflow:hidden !important;

  text-decoration:none !important;
  color:#111 !important;

  box-shadow:0 10px 26px rgba(0,0,0,.06) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;

  min-height:0 !important;
}

html body .sv-cards a.sv-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.10) !important;
  border-color:rgba(0,0,0,.10) !important;
}

/* MEDIA (bild) */
html body .sv-cards a.sv-card .sv-card__media{
  flex:0 0 55% !important;
  width:55% !important;
  min-width:0 !important;
  position:relative !important;
}

/* Bilden */
html body .sv-cards a.sv-card .sv-card__img{
  width:100% !important;
  height:100% !important;
  min-height:260px !important;
  object-fit:cover !important;
  display:block !important;
}

/* “Soft separation” mellan bild och text (diskret) */
html body .sv-cards a.sv-card .sv-card__media::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  right:-1px !important;
  width:42px !important;
  height:100% !important;
  pointer-events:none !important;
  background:linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0)) !important;
  opacity:.10 !important;
}

/* BODY (text) */
html body .sv-cards a.sv-card .sv-card__body{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  padding:30px !important;
  background:#fafafa !important;
}

/* Typografi */
html body .sv-cards a.sv-card .sv-card__title{
  font-size:24px !important;
  font-weight:800 !important;
  letter-spacing:-0.2px !important;
  margin:0 0 12px !important;
}

html body .sv-cards a.sv-card .sv-card__text{
  font-size:16px !important;
  line-height:1.65 !important;
  margin:0 !important;
  opacity:.88 !important;
}

/* MOBIL: stapla */
@media (max-width: 768px){
  html body .sv-cards a.sv-card{
    flex-direction:column !important;
  }

  html body .sv-cards a.sv-card .sv-card__media{
    width:100% !important;
    flex:0 0 auto !important;
  }

  html body .sv-cards a.sv-card .sv-card__img{
    min-height:0 !important;
    height:220px !important;
  }

  html body .sv-cards a.sv-card .sv-card__media::after{
    /* På mobil behövs inte “sidskuggan” */
    display:none !important;
  }
}
.sv-support-choice.sv-support-choice--link{
  display:block;
  text-decoration:none;
}
.sv-support-subtitle{
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #111;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.sv-support-section:first-of-type .sv-support-subtitle{
  border-top: none;
  padding-top: 0;
}
/* ===== Kundtjänst-modal: tydlig separation mellan regioner ===== */
.sv-support-section{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Första sektionen ska inte ha linje/extra padding */
.sv-support-section:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sv-support-subtitle{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: #111;
}

/* Lite tajtare grid i sektionerna så det känns “enhetligt” */
.sv-support-section .sv-support-grid{
  margin-top: 6px;
}

/* Länken i menyn ska bete sig exakt som knapparna */
.sv-support-choice.sv-support-choice--link{
  display: block;
  text-decoration: none;
}
.sv-support-section .sv-support-actions{
  margin-top: 12px;
}
/* ===== Mjuk scroll-effekt för Kontakta oss ===== */
.sv-support-widget{
  --sv-scroll-t: 0;
  opacity: calc(1 - (var(--sv-scroll-t) * 0.35));
  transform: translateY(calc(var(--sv-scroll-t) * -10px))
             scale(calc(1 - (var(--sv-scroll-t) * 0.14)));
  filter: saturate(calc(1 - (var(--sv-scroll-t) * 0.1)));
}

/* Vid hover vaknar den igen */
@media (hover:hover){
  .sv-support-widget:hover{
    opacity: 1;
    filter: none;
  }
}
.sv-support-widget{
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              opacity .35s ease,
              filter .35s ease;
}
/* ===== Mobilfix: öppna meny inåt från höger ===== */
@media (max-width: 768px){
  .sv-support-widget{
    top: 80px;      /* samma som desktop */
    bottom: auto;
    right: 8px;
  }
}
/* =========================
   SV Cards – Premium polish
   (lägg sist i CSS)
   ========================= */

/* Lite mer “glassig” yta + lugnare kant */
html body .sv-cards a.sv-card{
  background: #f6f6f6 !important;
  border-color: rgba(0,0,0,.05) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06) !important;
}

/* Subtil highlight på hover (Apple-ish) */
@media (hover:hover){
  html body .sv-cards a.sv-card:hover{
    box-shadow: 0 22px 60px rgba(0,0,0,.10) !important;
  }
}

/* Gör bilddelen lite mer premium med en diskret overlay */
html body .sv-cards a.sv-card .sv-card__media::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background: linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0) 55%) !important;
  opacity: .35 !important;
}

/* Gör “soft separation” aningen tydligare (men fortfarande subtil) */
html body .sv-cards a.sv-card .sv-card__media::after{
  opacity: .14 !important;
}

/* Typography: rubrik lite tightare, text clamp (så grid känns lugn) */
html body .sv-cards a.sv-card .sv-card__title{
  line-height: 1.15 !important;
}

html body .sv-cards a.sv-card .sv-card__text{
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Affordance: liten diskret pil som säger “det här går någonstans” */
html body .sv-cards a.sv-card .sv-card__body{
  position: relative !important;
  padding-right: 54px !important; /* plats för pilen */
}

html body .sv-cards a.sv-card .sv-card__body::after{
  content: "→" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  opacity: .55 !important;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .25s ease !important;
}

/* Pil “vaknar” lite på hover */
@media (hover:hover){
  html body .sv-cards a.sv-card:hover .sv-card__body::after{
    transform: translateY(-50%) translateX(3px) !important;
    opacity: .85 !important;
  }
}

/* Touch-känsla på mobil */
html body .sv-cards a.sv-card:active{
  transform: translateY(-2px) scale(.995) !important;
}

/* Fokus (tangentbord) – premium och tillgängligt */
html body .sv-cards a.sv-card:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(234,222,6,.35), 0 18px 44px rgba(0,0,0,.10) !important;
}
/* =========================================
   Fast Logga in-knapp (samma stil & scroll)
   ========================================= */

.sv-login-floating{
  position: fixed;
  top: 150px; /* lite under Kontakta oss */
  right: 8px;
  z-index: 99999;

  --sv-scroll-t: 0;

  opacity: calc(1 - (var(--sv-scroll-t) * 0.35));
  transform: translateY(calc(var(--sv-scroll-t) * -10px))
             scale(calc(1 - (var(--sv-scroll-t) * 0.14)));
  filter: saturate(calc(1 - (var(--sv-scroll-t) * 0.1)));

  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              opacity .35s ease,
              filter .35s ease;
}

/* Hover "vaknar" */
@media (hover:hover){
  .sv-login-floating:hover{
    opacity: 1;
    filter: none;
  }
}

/* Mobil */
@media (max-width: 768px){
  .sv-login-floating{
    top: 140px;
    right: 8px;
  }
}
/* =========================================
   FIX: Logga in-knapp + meny placering (lägg sist i CSS)
   ========================================= */

/* 1) Säkerställ att sv-support-btn ser likadan ut även på <a> */
a.sv-support-btn{
  text-decoration: none !important;
  color: #111 !important;
}

/* 2) Logga in: exakt samma högerlinje som Kontakta oss */
.sv-login-floating{
  position: fixed;
  right: 20px;          /* samma som din mobilfix/knapp */
  top: 165px;          /* justera vid behov */
  z-index: 99999;
}

/* Gör Logga in lite mindre dominant (men samma “familj”) */
.sv-login-floating .sv-support-btn{
  transform: scale(.92);
  transform-origin: top right;
  opacity: .92;
}

/* Hover: vaknar lite */
@media (hover:hover){
  .sv-login-floating:hover .sv-support-btn{
    opacity: 1;
    transform: scale(.95);
  }
}

/* 3) Desktop: öppna kontaktmenyn åt VÄNSTER (så den inte täcker Logga in) */
@media (hover:hover) and (min-width: 769px){
  /* Vi behöver inte hover-”bron” när menyn går åt sidan */
  .sv-support-widget{ padding-bottom: 0 !important; }

  .sv-support-menu{
    top: 50% !important;
    left: auto !important;
    right: calc(100% + 10px) !important; /* lägger menyn till vänster om knappen */
    transform: translateY(-50%) !important;
    min-width: 240px;
  }
}
/* =========================================
   FIX: Hover-glitch när menyn öppnas åt vänster
   ========================================= */

/* Desktop när vi öppnar åt vänster */
@media (hover:hover) and (min-width: 769px){

  /* Skapa en "hover-bro" åt vänster så man hinner in i menyn */
  .sv-support-widget{
    padding-left: 14px !important;  /* osynlig bro åt vänster */
    padding-bottom: 0 !important;   /* vi använder inte nedåt-bro här */
  }

  /* Menyn ligger till vänster om knappen */
  .sv-support-menu{
    top: 50% !important;
    left: auto !important;
    right: calc(100% + 10px) !important;
    transform: translateY(-50%) !important;
  }

  /* Håll menyn öppen när man hovrar på knappen ELLER menyn */
  .sv-support-widget:hover .sv-support-menu,
  .sv-support-menu:hover{
    display: block !important;
  }
}
@media (hover:hover) and (min-width: 769px){
  .sv-support-widget.sv-hovering .sv-support-menu{
    display: block !important;
  }
}
/* =========================================
   GÅRDSLAGRET – PRODUCENTER
   Premium / Apple-känsla
   Lägg sist i CSS
========================================= */

:root{
  --sv-yellow: rgb(234,222,6);
  --sv-ink: #111;
  --sv-muted: #555;
  --sv-surface: #f6f6f6;
  --sv-border: rgba(0,0,0,.06);
  --sv-shadow: 0 12px 30px rgba(0,0,0,.06);
  --sv-shadowHover: 0 22px 60px rgba(0,0,0,.10);
  --sv-radius: 22px;
}

/* ===== Wrapper ===== */
.sv-supplier-page{
  max-width: 1100px;
  margin: 40px auto 70px;
  padding: 0 16px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--sv-ink);
}

/* ===== Header ===== */
.sv-supplier-header{
  background: var(--sv-surface);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  box-shadow: var(--sv-shadow);
  padding: 26px;
  margin-bottom: 18px;
}

.sv-supplier-title{
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -.3px;
  font-weight: 800;
}

.sv-supplier-lead{
  margin: 0 0 16px;
  color: var(--sv-muted);
  font-size: 15px;
  line-height: 1.6;
}

.sv-supplier-search{
  width: min(420px, 100%);
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  font-size: 14px;
  transition: border .2s ease, box-shadow .2s ease;
}

.sv-supplier-search:focus{
  outline: none;
  border-color: var(--sv-yellow);
  box-shadow: 0 0 0 3px rgba(234,222,6,.25);
}

/* ===== Grid ===== */
.sv-producer-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .sv-producer-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .sv-producer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 420px){
  .sv-producer-grid{ grid-template-columns: 1fr; }
}

/* ===== Card ===== */
.sv-producer{
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  min-height: 140px;
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s ease;
}

@media (hover:hover){
  .sv-producer:hover{
    transform: translateY(-4px);
    box-shadow: var(--sv-shadowHover);
  }
}

/* ===== Logo ===== */
.sv-producer__logoWrap{
  height: 140px;
  display: grid;
  place-items: center;
  padding: 20px;
}

.sv-producer__logo{
  max-width: 70%;
  max-height: 80px;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              opacity .35s ease;
}

@media (hover:hover){
  .sv-producer:hover .sv-producer__logo{
    transform: scale(1.04);
    opacity: .75;
  }
}

/* ===== Overlay ===== */
.sv-producer__overlay{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 20px;
  background: rgba(245,245,245,.96);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

@media (hover:hover){
  .sv-producer:hover .sv-producer__overlay{
    opacity: 1;
    pointer-events: auto;
  }
}

/* Touch toggle */
.sv-producer.sv-open .sv-producer__overlay{
  opacity: 1;
  pointer-events: auto;
}

/* ===== Name ===== */
.sv-producer__name{
  font-weight: 800;
  letter-spacing: -.2px;
  text-align: center;
  font-size: 15px;
}

/* ===== Buttons ===== */
.sv-producer__actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.sv-supplier-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--sv-yellow);
  color: var(--sv-ink);
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s ease,
              background .25s ease,
              opacity .25s ease;
  font-size: 13px;
}

.sv-supplier-btn--primary{
  background: var(--sv-yellow);
}

.sv-supplier-btn--ghost{
  background: transparent;
}

@media (hover:hover){
  .sv-supplier-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  }
/* ===== GÅRDSLAGRET – TYPOGRAFI (reservtypsnitt) ===== */
:root{
  --gl-font-heading: Georgia, "Times New Roman", Times, serif;
  --gl-font-body: Helvetica, Arial, sans-serif;
  --gl-font-mono: "Courier New", Courier, monospace;

  /* Grundstorlekar (justera vid behov) */
  --gl-body-size: 16px;
  --gl-body-leading: 1.55;
}

/* Grundtext */
body{
  font-family: var(--gl-font-body);
  font-size: var(--gl-body-size);
  line-height: var(--gl-body-leading);
}

/* Rubriker globalt */
h1,h2,h3,h4{
  font-family: var(--gl-font-heading);
  letter-spacing: 0; /* serif behöver sällan spärras */
}
  /* ===== GÅRDSLAGRET – CARD TYPOGRAFI ===== */

.sv-card__title{
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display:block;
  margin-bottom:6px;
}

.sv-card__text{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  opacity: .85;
}

.sv-card__body{
  padding:18px 18px 20px;
}
/* ===== Cards: tvinga bild överst / text under på desktop ===== */
@media (min-width: 901px){

  .sv-cards > a.sv-card{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .sv-cards > a.sv-card .sv-card__media,
  .sv-cards > a.sv-card .sv-card__body{
    width: 100% !important;

    /* nolla gamla “55%” */
    flex: 0 0 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .sv-cards > a.sv-card .sv-card__img{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}
/* ===== Cards desktop: full bredd på bilden ===== */
@media (min-width: 901px){

  html body .sv-cards a.sv-card .sv-card__media{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .sv-cards a.sv-card .sv-card__img{
    width: 100% !important;
    max-width: 100% !important;
    display: block;
  }

}
 /* =================================================
   GÅRDSLAGRET – CARD DESIGN (clean version)
   ================================================= */

/* Desktop: bild överst / text under */
@media (min-width: 901px){

  html body .sv-cards a.sv-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  html body .sv-cards a.sv-card .sv-card__media{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
  }

}

/* Card surface */
html body .sv-cards a.sv-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:6px;
  overflow:hidden;
}

/* Bilddel – rundning bara upptill */
html body .sv-cards a.sv-card .sv-card__media,
html body .sv-cards a.sv-card .sv-card__img{
  border-radius:6px 6px 0 0;
}

/* Textdel – rundning bara nedtill */
html body .sv-cards a.sv-card .sv-card__body{
  border-radius:0 0 6px 6px;
  padding:20px 20px 22px;
}

/* Stabil bildyta */
.sv-card__media{
  aspect-ratio:16/9;
  overflow:hidden;
}

.sv-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Typografi */
.sv-card__title{
  font-size:21px;
  line-height:1.2;
  margin-bottom:6px;
}

.sv-card__text{
  line-height:1.5;
  opacity:.85;
}

/* spacing mellan cards */
.sv-cards{
  gap:32px;
}
  /* ===== Force 6px endast där vi vill ha rundning ===== */

/* Ytterhörn på kortet */
html body .sv-cards a.sv-card{
  border-radius: 6px !important;
}

/* Bildens överhörn (bara topp) */
html body .sv-cards a.sv-card > .sv-card__media,
html body .sv-cards a.sv-card > .sv-card__media > .sv-card__img{
  border-radius: 6px 6px 0 0 !important;
}

/* Textdelen: inga rundade hörn upptill (ren skarv) */
html body .sv-cards a.sv-card > .sv-card__body{
  border-radius: 0 0 6px 6px !important;
}
  /* ===== Apple-style chevron ===== */

.sv-card__body{
  position: relative;
}

.sv-card__body::after{
  content: "›";                 /* chevron istället för pil */
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  font-size: 22px;
  line-height: 1;
  opacity: .7;
  transition: transform .18s ease, opacity .18s ease;
}

/* subtil Apple-hover */
.sv-card:hover .sv-card__body::after{
  transform: translateY(-50%) translateX(4px);
  opacity: 1;
}
  /* ===== Apple chevron istället för pil ===== */

html body .sv-cards a.sv-card .sv-card__body::after{
  content: "›" !important;   /* ersätter tematets pil */
  font-size: 22px;
  line-height: 1;
  opacity: .7;
  transition: transform .18s ease, opacity .18s ease;
}

/* subtil hover-rörelse */
html body .sv-cards a.sv-card:hover .sv-card__body::after{
  transform: translateX(4px);
  opacity: 1;
}
  .sv-card__img{
  filter: brightness(.88);
  transform: scale(1);
  transition: filter .25s ease, transform .35s ease;
}

.sv-card:hover .sv-card__img{
  filter: brightness(1);
  transform: scale(1.03);
}
 /* =================================================
   GÅRDSLAGRET – Social icons (Apple style premium)
   ================================================= */

.sv-social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  margin-top:42px;
  margin-bottom:26px; /* lite mer luft under sektionen */
}

.sv-social__link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:transform .18s ease;
}

.sv-social__icon{
  width:36px;
  height:36px;

  /* brand color */
  fill:#0c3d17;

  /* gör ikonerna lite lättare visuellt */
  opacity:.85;

  /* optisk centrering */
  transform:translateY(-1px);

  /* skarpare SVG-rendering */
  shape-rendering:geometricPrecision;
  vector-effect:non-scaling-stroke;

  transition:fill .18s ease, opacity .18s ease, transform .18s ease;
}

.sv-social__link:hover{
  transform:translateY(-1px);
}

.sv-social__link:hover .sv-social__icon{
  fill:#2c6a3b;   /* ljusare grön */
  opacity:1;
  transform:translateY(-2px);
}
/* =================================================
   GÅRDSLAGRET – PREMIUM FRONT PAGE (FINAL CLEAN)
   Cards + discrete “upptändning” overlay + social icons
   ================================================= */


/* =========================
   CARD LAYOUT
   ========================= */

.sv-cards{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  gap:32px;
}


/* =========================
   CARD MEDIA
   ========================= */

html body .sv-cards a.sv-card .sv-card__media{
  display:block;          /* viktigt i Abicart (span -> block) */
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  position:relative;
  isolation:isolate;      /* stabil layering i Chrome */
}


/* =========================
   CARD IMAGE
   ========================= */

html body .sv-cards a.sv-card .sv-card__img{
  position:relative;
  z-index:1;

  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:block;

  /* valfri premium-zoom (subtil) */
  transform:scale(1.02);

  backface-visibility:hidden;
  transform-origin:center center;
  will-change:transform;

  transition:transform .35s ease;
}


/* =========================
   OVERLAY (DISKRET "UPPTÄNDNING")
   mörkare i vila → lite ljusare på hover
   ========================= */

html body .sv-cards a.sv-card .sv-card__media::after{
  content:"";
  position:absolute;
  inset:0;

  z-index:2;
  pointer-events:none;

  background:#000;
  opacity:.18;                 /* vila: lite mörkare (Apple) */

  transition:opacity .22s ease;
}

html body .sv-cards a.sv-card:hover .sv-card__media::after{
  opacity:.12;                 /* hover: diskret upptändning */
}


/* =========================
   CARD HOVER EFFECTS
   ========================= */

html body .sv-cards a.sv-card:hover .sv-card__img{
  transform:scale(1);
}


/* =========================
   PREMIUM CARD DEPTH
   ========================= */

html body .sv-cards a.sv-card{
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:box-shadow .25s ease, transform .25s ease;
}

html body .sv-cards a.sv-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}


/* =========================
   SOCIAL ICONS (brand)
   ========================= */

.sv-social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;

  margin-top:42px;
  margin-bottom:26px;
}

.sv-social__link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  transition:transform .18s ease;
}

.sv-social__icon{
  width:36px;
  height:36px;

  fill:#0c3d17;               /* exakt logggrön i vila */
  opacity:1;

  transform:translateY(-1px);

  shape-rendering:geometricPrecision;
  vector-effect:non-scaling-stroke;

  transition:fill .18s ease, transform .18s ease;
}

.sv-social__link:hover{
  transform:translateY(-1px);
}

.sv-social__link:hover .sv-social__icon{
  fill:#2c6a3b;               /* ljusare grön på hover */
  transform:translateY(-2px);
}


/* =========================
   RESPONSIVE TWEAKS
   ========================= */

/* laptops */
@media (max-width:1200px){
  .sv-cards{ max-width:1000px; }
}

/* tablets */
@media (max-width:900px){
  .sv-cards{ max-width:680px; gap:26px; }
}

/* mobil */
@media (max-width:600px){
  .sv-cards{ max-width:100%; gap:22px; }

  .sv-social{ gap:22px; margin-top:34px; }

  .sv-social__icon{ width:32px; height:32px; }
}
  /* =========================================
   FIX: Stäng av temats brightness-“upptändning”
   + Låt overlay sköta den diskreta kontrasten
   Lägg allra sist i CSS
   ========================================= */

html body .sv-cards a.sv-card .sv-card__img{
  filter: none !important;              /* tar bort brightness(.88) */
  transition: transform .45s cubic-bezier(.2,.8,.2,1) !important;
  transform: scale(1.02) !important;    /* din subtila premium-zoom i vila */
}

html body .sv-cards a.sv-card:hover .sv-card__img{
  filter: none !important;              /* ingen extra upptändning */
  transform: scale(1) !important;       /* zoomar tillbaka lugnt */
}

/* Overlay: diskret “upptändning” */
html body .sv-cards a.sv-card .sv-card__media::after{
  opacity: .35 !important;              /* vila */
  transition: opacity .38s cubic-bezier(.2,.8,.2,1) !important;
}

html body .sv-cards a.sv-card:hover .sv-card__media::after{
  opacity: .12 !important;              /* hover: lite ljusare (subtilt) */
}

/* Social icons: exakt logggrön i vila (ingen nedtoning) */
.sv-social__icon{
  opacity: 1 !important;
  fill: #0c3d17 !important;
}
  /* Overlay – synlig men premium */
html body .sv-cards a.sv-card .sv-card__media::after{
  opacity: .22 !important; 
}

html body .sv-cards a.sv-card:hover .sv-card__media::after{
  opacity: .12 !important;
}
  /* =================================================
   FIX: EN overlay-källa (Chrome/Windows)
   ::before = overlay (mörk -> lite ljusare)
   ::after  = av (tar bort bård / gradientremsa)
   Lägg ALLRA SIST i CSS
   ================================================= */

html body .sv-cards a.sv-card .sv-card__media{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Stäng av alla gamla “remsor/bårder” som ofta ligger i ::after */
html body .sv-cards a.sv-card .sv-card__media::after{
  content: none !important;
  display: none !important;
}

/* Overlay som faktiskt ska styra kontrasten */
html body .sv-cards a.sv-card .sv-card__media::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;

  background:#000 !important;
  opacity:.22 !important; /* vila: mörkare */
  transition: opacity .38s cubic-bezier(.2,.8,.2,1) !important;
}

html body .sv-cards a.sv-card:hover .sv-card__media::before{
  opacity:.12 !important; /* hover: lite ljusare (upptändning) */
}

/* Säkerställ att bilden ligger under overlayn och inte har egen brightness-effekt */
html body .sv-cards a.sv-card .sv-card__img,
html body .sv-cards a.sv-card:hover .sv-card__img{
  position: relative !important;
  z-index: 1 !important;
  filter: none !important;
}
  /* =========================================
   PREMIUM FOCUS GLOW (Apple-style)
   ========================================= */

html body .sv-cards a.sv-card:focus-visible{
  outline: none;

  /* mjuk gul glow i er brandfärg */
  box-shadow:
    0 0 0 3px rgba(234,222,6,.35),
    0 18px 44px rgba(0,0,0,.10);

  transform: translateY(-3px);
}
  /* =========================================
   PREMIUM SURFACE HIGHLIGHT (Apple-style)
   ========================================= */

html body .sv-cards a.sv-card{
  position: relative;
}

html body .sv-cards a.sv-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;

  /* subtil highlight */
  background:linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(255,255,255,0)
  );

  opacity:.35;
  pointer-events:none;
}
  /* =========================================
   GÅRDSLAGRET – Breathing sections (lägg sist)
   ========================================= */

/* Bas-sektion med rytm */
.sv-section{
  margin: 120px auto 0;
  padding: 0 16px;
  max-width: 1100px;
}

/* Mindre luft på mindre skärmar */
@media (max-width: 900px){
  .sv-section{ margin-top: 80px; }
}
@media (max-width: 600px){
  .sv-section{ margin-top: 60px; }
}

/* Rubrik + intro i sektioner */
.sv-section__head{
  max-width: 720px;      /* premium textbredd */
  margin: 0 auto 28px;
  text-align: center;
}

.sv-section__kicker{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 10px;
}

.sv-section__title{
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 10px;
}

.sv-section__lead{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  opacity: .75;
}

/* Subtil avdelare som känns “Apple” */
.sv-section--divider{
  position: relative;
}
.sv-section--divider::before{
  content:"";
  display:block;
  height: 1px;
  max-width: 1100px;
  margin: 0 auto 34px;
  background: rgba(0,0,0,.06);
}

/* “Learn more”-länk */
.sv-learnmore{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #0c3d17;
  margin-top: 18px;
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
}
.sv-learnmore:hover{
  transform: translateX(2px);
  opacity: 1;
}
.sv-learnmore::after{
  content:"›";
  font-size: 20px;
  line-height: 1;
  opacity: .9;
}
  /* ===== FIX: Visa endast vår H1 (Abicart master-H1 fortsatt dold) ===== */
body h1{ display:none; } /* behåll din befintliga */

body .sv-intro h1,
body .sv-intro .sv-section__title{
  display:block !important;
}
  /* ===== FIX: Första sektionen ska sitta tajtare mot toppen ===== */
.sv-intro{
  margin-top: 28px !important;  /* prova 16–40px */
}

@media (max-width:900px){
  .sv-intro{ margin-top: 18px !important; }
}
  /* ===== Intro typografi ===== */

.sv-intro .sv-section__title{
  font-size:42px;
  line-height:1.15;
  font-weight:500;
}

.sv-intro .sv-section__lead{
  font-size:18px;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}
  /* ===== Intro position fix ===== */

.sv-intro{
  margin-top: 12px !important;   /* flyttar upp hela blocket */
  margin-bottom: 10px;           /* minskar luft mot cards */
}

/* mindre luft mellan rubrik och text */
.sv-intro .sv-section__title{
  margin-bottom: 8px;
}

/* lite tajtare introtext */
.sv-intro .sv-section__lead{
  margin-top: 4px;
}
  /* ===== Editorial kicker ===== */

.sv-intro__kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.65;
  margin-bottom:10px;
}

/* ===== Hairline divider ===== */

.sv-intro__rule{
  width:70px;
  height:1px;
  margin:0 auto 18px;
  background:rgba(0,0,0,.12);
}
  /* =================================================
   GÅRDSLAGRET – PREMIUM HERO (editorial Apple style)
   ================================================= */


/* ===== HERO POSITION ===== */

.sv-intro{
  margin-top:16px !important;
  margin-bottom:20px;
}


/* ===== HERO CONTAINER ===== */

.sv-intro .sv-section__head{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* ===== KICKER ===== */

.sv-intro__kicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:500;
  color:rgba(0,0,0,.65);
  margin-bottom:12px;

  opacity:0;
  transform:translateY(6px);
  animation:svHeroFade .7s ease forwards;
  animation-delay:.05s;
}


/* ===== HAIRLINE DIVIDER ===== */

.sv-intro__rule{
  width:64px;
  height:1px;
  margin:0 auto 20px;
  background:rgba(0,0,0,.10);

  opacity:0;
  transform:translateY(6px);
  animation:svHeroFade .7s ease forwards;
  animation-delay:.12s;
}


/* ===== HERO TITLE ===== */

.sv-intro .sv-section__title{
  font-size:42px;
  line-height:1.15;
  font-weight:500;
  margin-bottom:12px;

  opacity:0;
  transform:translateY(8px);
  animation:svHeroFade .7s ease forwards;
  animation-delay:.18s;
}


/* ===== HERO LEAD ===== */

.sv-intro .sv-section__lead{
  font-size:18px;
  line-height:1.6;
  color:rgba(0,0,0,.70);

  max-width:620px;
  margin-left:auto;
  margin-right:auto;

  opacity:0;
  transform:translateY(8px);
  animation:svHeroFade .7s ease forwards;
  animation-delay:.26s;
}


/* ===== HERO FADE ANIMATION ===== */

@keyframes svHeroFade{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ===== RESPONSIVE ===== */

@media (max-width:900px){

  .sv-intro .sv-section__title{
    font-size:34px;
  }

  .sv-intro .sv-section__lead{
    font-size:16px;
  }

}

@media (max-width:600px){

  .sv-intro .sv-section__title{
    font-size:28px;
  }

}
  /* ===== Hero → Cards: soft fade ===== */
.sv-intro{
  position: relative;
  padding-bottom: 22px;
}

.sv-intro::after{
  content:"";
  display:block;
  width: min(520px, 92%);
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0),
    rgba(0,0,0,.10),
    rgba(0,0,0,0)
  );
  opacity:.7;
}
  /* =================================================
   PRODUCENT-TEASER (Apple / editorial gallery)
   ================================================= */

.sv-prod-teaser .sv-section__head{
  margin-bottom: 34px;
}

/* Grid som känns som “utställning” */
.sv-prod-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

/* Responsivt */
@media (max-width: 1100px){
  .sv-prod-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .sv-prod-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.sv-prod{
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;

  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  overflow: hidden;

  min-height: 120px;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);

  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s ease,
              border-color .22s ease,
              background .22s ease;
}

@media (hover:hover){
  .sv-prod:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0,0,0,.09);
    border-color: rgba(0,0,0,.10);
    background: rgba(0,0,0,.015);
  }
}

/* Logga */
.sv-prod__logoWrap{
  width: 100%;
  height: 120px;
  display: grid;
  place-items: center;
  padding: 18px;
}

.sv-prod__logo{
  max-width: 78%;
  max-height: 56px;
  object-fit: contain;

  /* Premium-trick: gör loggor mer enhetliga */
  filter: grayscale(1);
  opacity: .92;

  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              opacity .22s ease,
              filter .22s ease;
}

@media (hover:hover){
  .sv-prod:hover .sv-prod__logo{
    transform: scale(1.04);
    opacity: 1;
    filter: grayscale(0);
  }
}

/* Diskret “label” som bara syns på hover */
.sv-prod__meta{
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 14px;

  background: linear-gradient(to top,
    rgba(0,0,0,.32),
    rgba(0,0,0,0)
  );

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

.sv-prod__name{
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.1px;
}

.sv-prod__hint{
  color: #fff;
  opacity: .9;
  font-weight: 700;
  font-size: 13px;
}

@media (hover:hover){
  .sv-prod:hover .sv-prod__meta{
    opacity: 1;
    transform: translateY(0);
  }
}

/* “Se alla”-kortet */
.sv-prod--more{
  background: rgba(12,61,23,.04);
  border-color: rgba(12,61,23,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
}

.sv-prod__more{
  text-align: center;
  color: #0c3d17;
  font-weight: 700;
  line-height: 1.1;
}

.sv-prod__moreTitle{
  display: block;
  font-size: 16px;
  letter-spacing: -.2px;
}

.sv-prod__moreSub{
  display: block;
  font-size: 13px;
  opacity: .8;
  margin-top: 4px;
}

/* Fokus (tangentbord) */
.sv-prod:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(234,222,6,.35), 0 18px 44px rgba(0,0,0,.09);
}
 /* ===== Landningssida – subtil hover för producenter ===== */

.sv-prod{
  transition: transform .28s ease, box-shadow .28s ease;
}

.sv-prod:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}

.sv-prod__logo{
  transition: transform .35s ease;
}

.sv-prod:hover .sv-prod__logo{
  transform: scale(1.04);
}
  .sv-sortiment{
max-width:1100px;
margin:auto;
padding:80px 20px;
}

.sv-kicker{
text-transform:uppercase;
font-size:.8rem;
letter-spacing:.12em;
color:#6b6b6b;
margin-bottom:10px;
}

.sv-title{
font-size:2rem;
margin-bottom:12px;
}

.sv-lead{
max-width:700px;
color:#555;
line-height:1.6;
}

.sv-segment{
margin-top:40px;
display:flex;
gap:16px;
}

.sv-segment-btn{
padding:10px 20px;
border:1px solid #ddd;
background:white;
cursor:pointer;
border-radius:6px;
font-size:.95rem;
}

.sv-segment-btn.active{
background:#222;
color:white;
border-color:#222;
}

.sv-sortiment-menu{
margin-top:40px;
display:flex;
flex-wrap:wrap;
gap:20px;
font-weight:500;
}

.sv-sortiment-menu.secondary{
margin-top:15px;
opacity:.8;
}

.sv-menu-item{
cursor:pointer;
}

.sv-menu-item:hover{
text-decoration:underline;
}

.sv-sortiment-panel{
margin-top:40px;
padding:30px;
border:1px solid #eee;
border-radius:8px;
background:#fafafa;
}

.sv-placeholder{
color:#777;
}

.sv-sortiment-cta{
margin-top:40px;
text-align:center;
}

.sv-cta-buttons{
margin-top:15px;
display:flex;
justify-content:center;
gap:15px;
}

.sv-btn{
padding:12px 20px;
background:#222;
color:white;
text-decoration:none;
border-radius:6px;
}

.sv-btn.secondary{
background:white;
color:#222;
border:1px solid #ddd;
}
  .sv-menu-item{
  cursor:pointer;
  padding-bottom:4px;
}

.sv-menu-item.active{
  text-decoration:underline;
  text-underline-offset:6px;
}

.sv-panel-kicker{
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.1em;
  color:#6b6b6b;
  margin-bottom:8px;
}

.sv-panel-title{
  margin:0 0 10px;
  font-size:1.5rem;
}

.sv-panel-text{
  margin:0 0 18px;
  color:#555;
  line-height:1.6;
  max-width:760px;
}

.sv-panel-list{
  margin:0;
  padding-left:18px;
  color:#222;
  line-height:1.8;
}

.sv-panel-actions{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
  .sv-sortiment{
  max-width:1100px;
  margin:auto;
  padding:80px 20px;
}

.sv-kicker{
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.12em;
  color:#6b6b6b;
  margin-bottom:10px;
}

.sv-title{
  font-size:2rem;
  margin-bottom:12px;
}

.sv-lead{
  max-width:700px;
  color:#555;
  line-height:1.6;
}

.sv-segment{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.sv-segment-btn{
  padding:10px 20px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  border-radius:6px;
  font-size:.95rem;
}

.sv-segment-btn.active{
  background:#222;
  color:#fff;
  border-color:#222;
}

.sv-sortiment-menu{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-weight:500;
}

.sv-sortiment-menu.secondary{
  margin-top:15px;
  opacity:.8;
}

.sv-menu-item{
  appearance:none;
  background:none;
  border:0;
  padding:0 0 4px;
  cursor:pointer;
  font:inherit;
  color:inherit;
}

.sv-menu-item:hover{
  text-decoration:underline;
  text-underline-offset:6px;
}

.sv-menu-item.active{
  text-decoration:underline;
  text-underline-offset:6px;
}

.sv-sortiment-panel{
  margin-top:40px;
  padding:30px;
  border:1px solid #eee;
  border-radius:8px;
  background:#fafafa;
}

.sv-placeholder{
  color:#777;
}

.sv-panel-kicker{
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.1em;
  color:#6b6b6b;
  margin-bottom:8px;
}

.sv-panel-title{
  margin:0 0 10px;
  font-size:1.5rem;
}

.sv-panel-text{
  margin:0 0 18px;
  color:#555;
  line-height:1.6;
  max-width:760px;
}

.sv-panel-list{
  margin:0;
  padding-left:18px;
  color:#222;
  line-height:1.8;
}

.sv-panel-actions{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.sv-sortiment-cta{
  margin-top:40px;
  text-align:center;
}

.sv-cta-buttons{
  margin-top:15px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:15px;
}

.sv-btn{
  padding:12px 20px;
  background:#222;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
}

.sv-btn.secondary{
  background:#fff;
  color:#222;
  border:1px solid #ddd;
}
 /* ===== SORTIMENT – REN OCH SAMMANHÅLLEN MODUL ===== */

#sv-sortiment{
  max-width: 1160px;
  margin: 0 auto;
  padding: 70px 20px;
}

.sv-sortiment{
  background: #f6f3ee;
  border: 1px solid #e8e1d6;
  border-radius: 26px;
  padding: 34px 28px 28px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 18px 40px rgba(0,0,0,.04);
}

.sv-sortiment-intro{
  margin-bottom: 24px;
}

.sv-kicker{
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .14em;
  color: #6d6d6d;
  margin-bottom: 8px;
}

.sv-title{
  margin: 0 0 10px;
  font-size: 1.8rem;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.sv-lead{
  max-width: 760px;
  margin: 0;
  color: #555;
  line-height: 1.6;
  font-size: .98rem;
}

/* Segmentval */
.sv-segment{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 18px;
}

.sv-segment-btn{
  appearance: none;
  border: 1px solid #d8d2c8;
  background: #fff;
  color: #222;
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.sv-segment-btn:hover{
  transform: translateY(-1px);
}

.sv-segment-btn.active{
  background: #1f1f1f;
  color: #fff;
  border-color: #1f1f1f;
}

/* Huvudmeny */
.sv-sortiment-menu{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  margin-top: 0;
  position: relative;
  z-index: 2;
  gap: 10px;

  background: #fffdf8;
  padding: 12px;
  border-radius: 18px 18px 0 0;
}

.sv-menu-item{
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #1f1f1f;
  cursor: pointer;
  position: relative;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
  white-space: normal;
  word-break: normal;
  hyphens: none;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none;
}

/* Döda ALLA gamla pseudo-markeringar */
.sv-menu-item::before,
.sv-menu-item::after,
.sv-menu-item:hover::before,
.sv-menu-item:hover::after,
.sv-menu-item.active::before,
.sv-menu-item.active::after{
  content: none !important;
  display: none !important;
}

/* Döda även ev. underline från tema */
.sv-menu-item:hover,
.sv-menu-item:focus,
.sv-menu-item.active{
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.sv-sortiment-menu:not(.secondary) .sv-menu-item:hover{
  background: rgba(231, 220, 90, 0.22);
}

.sv-sortiment-menu:not(.secondary) .sv-menu-item.active{
  background: #e7dc5a;
}

/* Sekundärrad */
.sv-sortiment-menu.secondary{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 0 6px;
  border: none;
}

.sv-sortiment-menu.secondary .sv-menu-item{
  width: auto;
  min-height: auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .08em;
  background: #efe9de;
  color: #5a564f;
}

.sv-sortiment-menu.secondary .sv-menu-item:hover{
  background: #e5ddcf;
}

.sv-sortiment-menu.secondary .sv-menu-item.active{
  background: #d9cfbb;
  color: #1f1f1f;
}

/* Panel */
.sv-sortiment-panel{
  margin-top: -4px;
  padding: 28px 28px 24px;
  border: 1px solid #e2dacd;
  border-top: none;
  border-radius: 0 0 18px 18px;
  background: #fffdf8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  position: relative;
  transition: height .28s ease;
}

#sv-panel-content{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}

#sv-panel-content.sv-panel-is-changing{
  opacity: 0;
  transform: translateY(8px);
}

.sv-panel-kicker{
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .14em;
  color: #6d6d6d;
  margin-bottom: 8px;
}

.sv-panel-title{
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 8px 14px;
  background: #dff9c0;
  border-radius: 999px;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-weight: 600;
  color: #1f1f1f;
}
.sv-panel-text{
  margin: 0 0 16px;
  max-width: 820px;
  color: #555;
  line-height: 1.6;
  font-size: .96rem;
}

.sv-panel-list{
  margin: 0;
  padding-left: 0;
  list-style: none;
  column-count: 2;
  column-gap: 36px;
}

.sv-panel-list li{
  break-inside: avoid;
  margin: 0 0 8px;
  padding-left: 14px;
  position: relative;
  color: #222;
  line-height: 1.5;
  font-size: .96rem;
}

.sv-panel-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7dca7;
  transform: translateY(-50%);
}

.sv-panel-actions{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sv-sortiment-cta{
  margin-top: 22px;
  text-align: center;
}

.sv-sortiment-cta p{
  margin: 0;
  color: #666;
  font-size: .94rem;
}

.sv-cta-buttons{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sv-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1f1f1f;
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.sv-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.sv-btn.secondary{
  background: #fff;
  color: #222;
  border: 1px solid #d8d2c8;
}

/* Responsivt */
@media (max-width: 1100px){
  .sv-sortiment-menu{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .sv-sortiment{
    padding: 24px 18px 22px;
    border-radius: 20px;
  }

  .sv-title{
    font-size: 1.55rem;
  }

  .sv-menu-item{
    font-size: .88rem;
    letter-spacing: .06em;
    min-height: 58px;
  }

  .sv-sortiment-panel{
    padding: 22px 18px 20px;
    border-radius: 16px;
  }

  .sv-panel-list{
    column-count: 1;
  }
}

@media (max-width: 700px){
  .sv-sortiment-menu{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  /* ===== Premium undergrupper ===== */

.sv-subgroup-wrap{
  margin-top: 10px;
}

.sv-subgroup-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 10px;
}

.sv-subgroup-btn{
  appearance: none;
  width: 100%;
  border: 1px solid #e7e0d4;
  background: #fcfaf6;
  color: #1f1f1f;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sv-subgroup-btn:hover{
  background: #f7f3eb;
  border-color: #d9d1c3;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}

.sv-subgroup-btn.active{
  background: #dff9c0;
  border-color: #c7e9a0;
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
}

.sv-subgroup-detail{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.07);
}

#sv-subgroup-detail-content{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}

#sv-subgroup-detail-content.is-changing{
  opacity: 0;
  transform: translateY(6px);
}

.sv-subgroup-kicker{
  margin: 0 0 8px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6d6d6d;
}

.sv-subgroup-title{
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 7px 12px;
  background: #dff9c0;
  border-radius: 999px;
  font-size: .98rem;
  line-height: 1.1;
  font-weight: 600;
  color: #1f1f1f;
}

.sv-subgroup-help{
  margin: 0;
  color: #555;
  line-height: 1.6;
  font-size: .95rem;
}

@media (max-width: 900px){
  .sv-subgroup-grid{
    grid-template-columns: 1fr;
  }
}
 /* ===== Produktlista – premium list-view ===== */

.sv-product-test-list{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,.08);
}

.sv-product-test-item{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.sv-product-test-main{
  min-width: 0;
}

.sv-product-test-link{
  display: inline-block;
  text-decoration: none;
  color: #1f1f1f;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.sv-product-test-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sv-product-test-meta{
  margin-top: 4px;
  color: #666;
  font-size: .9rem;
  line-height: 1.5;
}

.sv-product-test-side{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 160px;
}

.sv-product-test-tagrow{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.sv-product-test-tag{
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef3e7;
  color: #4a5644;
  font-size: .74rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.04);
}

@media (max-width: 760px){
  .sv-product-test-item{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sv-product-test-side{
    justify-content: flex-start;
    min-width: 0;
  }

  .sv-product-test-tagrow{
    justify-content: flex-start;
  }
}
  /* ===== Produktlista – premium/editorial ===== */

.sv-product-test-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,.06);
}

.sv-product-test-item{
  display:grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 420px);
  gap:10px 22px;
  align-items:start;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,.05);
}

.sv-product-test-main{
  min-width: 0;
}

.sv-product-test-link{
  display: inline-block;
  color: #1f1f1f;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.sv-product-test-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sv-product-test-meta{
  margin-top: 5px;
  color: #6b6b6b;
  font-size: .9rem;
  line-height: 1.5;
}

.sv-product-test-side{
  min-width: 170px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.sv-product-test-tagrow{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.sv-product-test-tag{
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2f4ee;
  color: #51604d;
  font-size: .73rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,.04);
}

.sv-product-test-tag.krav{
  background: #e6f5d8;
  color: #2f4d22;
  border-color: #cfe8b9;
  font-weight: 600;
}

@media (max-width: 760px){
  .sv-product-test-item{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sv-product-test-side{
    min-width: 0;
    justify-content: flex-start;
  }

  .sv-product-test-tagrow{
    justify-content: flex-start;
  }
}
 .sv-product-test-side{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
}

.sv-product-test-tagrow{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
}

.sv-product-origin{
  font-size:.85rem;
  color:#6a6a6a;
  font-weight:500;
  white-space:nowrap;
  text-align:right;
}
  @media (max-width: 760px){
  .sv-product-test-item{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sv-product-test-side{
    grid-template-columns: 1fr;
    gap:8px;
  }

  .sv-product-origin{
    text-align:left;
  }
}
  /* generella taggar */

.sv-product-test-tag{
  font-size:12px;
  padding:3px 8px;
  border-radius:6px;
  background:#f2f4f5;
  color:#444;
  font-weight:500;
  letter-spacing:.02em;
}

/* certifiering */

.sv-product-test-tag.krav{
  background:#e8f5e9;
  color:#2e7d32;
}

/* ursprung */

.sv-product-origin{
  font-size:12px;
  color:#7a7a7a;
  font-weight:500;
  margin-top:2px;
}
  .sv-product-test-tagrow{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
  .sv-product-group-heading {
  list-style: none;
  margin: 1.1rem 0 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.sv-product-group-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sv-product-group-heading span {
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(30, 40, 32, 0.62);
}
/* Diskreta grupprubriker i produktlistan */
.sv-product-group-heading {
  list-style: none;
  margin: 1.3rem 0 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(20, 40, 25, 0.10);
}

.sv-product-group-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sv-product-group-heading span {
  display: inline-block;
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(30, 40, 32, 0.62);
}
  .sv-product-group-heading span {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  padding: 0.18rem 0.5rem;
  border-radius: 999px;

  background: rgba(20,40,25,0.06);
  color: rgba(30,40,32,0.7);
}
  .sv-explorer {
  margin: 3rem auto;
  padding: 1.5rem;
  border: 1px solid rgba(20, 40, 25, 0.08);
  border-radius: 24px;
  background: #f5f4f1;
}

.sv-explorer__head {
  margin-bottom: 1.25rem;
}

.sv-explorer__kicker {
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(30, 40, 32, 0.62);
}

.sv-explorer__title {
  margin: 0 0 0.45rem;
}

.sv-explorer__lead {
  margin: 0;
  max-width: 60ch;
  color: rgba(30, 40, 32, 0.78);
}

.sv-explorer__switch {
  display: inline-flex;
  gap: 0.65rem;
  margin: 1.25rem 0 1.4rem;
}

.sv-explorer__tab {
  appearance: none;
  border: 1px solid rgba(20, 40, 25, 0.14);
  background: #fff;
  color: rgba(20, 40, 25, 0.88);
  border-radius: 999px;
  padding: 0.72rem 1rem;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.sv-explorer__view {
  display: none;
}

.sv-explorer__view.is-active {
  display: block;
}

.sv-explorer__placeholder {
  padding: 2rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.6);
  border: 1px dashed rgba(20, 40, 25, 0.14);
  color: rgba(30, 40, 32, 0.7);
}
  /* Explorer wrapper ska vara huvudramen */

.sv-explorer .sv-sortiment,
.sv-explorer .sv-supplier-page {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Ta bort extra toppmarginaler som annars bygger lager */

.sv-explorer .sv-sortiment-intro,
.sv-explorer .sv-supplier-header {
  margin-top: 0;
}

/* Lite mer luft mellan tabbar och innehåll */

.sv-explorer__views {
  margin-top: 1.5rem;
}
  /* Samma inre rytm för båda vyerna i explorer */
.sv-explorer__view > .sv-supplier-page,
.sv-explorer__view > .sv-sortiment {
  max-width: 100%;
  width: 100%;
}

/* Samma toppstart i båda modulerna */
.sv-explorer .sv-supplier-header,
.sv-explorer .sv-sortiment-intro {
  padding: 0;
  margin: 0 0 1.25rem 0;
}

/* Samma spacing efter intro/rubrik */
.sv-explorer .sv-supplier-header > *:last-child,
.sv-explorer .sv-sortiment-intro > *:last-child {
  margin-bottom: 0;
}

/* Gör att båda vyerna startar på samma lodlinje */
.sv-explorer .sv-producer-grid,
.sv-explorer .sv-segment,
.sv-explorer .sv-sortiment-menu,
.sv-explorer .sv-sortiment-panel,
.sv-explorer .sv-sortiment-cta {
  margin-left: 0;
  margin-right: 0;
}

/* Lite jämnare luft under switchen och före innehållet */
.sv-explorer__views {
  margin-top: 1.25rem;
}
  /* Gemensam inre bredd i explorer */
.sv-explorer__view > .sv-supplier-page,
.sv-explorer__view > .sv-sortiment {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* PRODUCENTER: gör vyn mindre "stor" och mer kontrollerad */
.sv-explorer .sv-supplier-header {
  max-width: 760px;
  margin: 0 0 1.5rem 0;
}

.sv-explorer .sv-supplier-search {
  max-width: 420px;
}

/* Minska gridens visuella dominans lite */
.sv-explorer .sv-producer-grid {
  margin-top: 1.25rem;
}

/* SORTIMENT: låt innehållet börja tidigare och kännas större */
.sv-explorer .sv-sortiment-intro {
  max-width: 760px;
  margin: 0 0 1.5rem 0;
}

/* Om sortimentsblocket har onödigt stort sidindrag – nolla det i wrappern */
.sv-explorer .sv-sortiment {
  padding-left: 0;
  padding-right: 0;
}

/* Ge sortimentets inre delar full bredd inom wrappern */
.sv-explorer .sv-sortiment-menu,
.sv-explorer .sv-sortiment-panel,
.sv-explorer .sv-sortiment-cta,
.sv-explorer .sv-segment {
  max-width: none;
}

/* Lite jämnare toppavstånd i båda vyerna */
.sv-explorer__views {
  margin-top: 1.4rem;
}
  .sv-explorer {
  background: #f6f3ee;
  border-radius: 22px;
}  
/* Ta bort grå rutan runt producent-sök */
.sv-explorer .sv-supplier-header {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
  /* Ta bort introtexten i sortimentsvyn när den ligger i explorer */
.sv-explorer .sv-sortiment-intro {
  display: none;
}
  /* Samma startpunkt för innehållet i båda explorer-vyer */

.sv-explorer__view > .sv-supplier-page,
.sv-explorer__view > .sv-sortiment {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

/* Samma toppstart i båda vyerna */

.sv-explorer .sv-supplier-header {
  margin: 0 0 1.2rem 0;
  padding: 0;
}

/* säkerställ att sortiment börjar lika högt */

.sv-explorer .sv-segment {
  margin-top: 0;
}

/* se till att kategorimenyn inte flyter iväg */

.sv-explorer .sv-sortiment-menu {
  margin-left: 0;
  margin-right: 0;
}

/* jämn spacing mellan tabs och innehåll */

.sv-explorer__views {
  margin-top: 1.4rem;
}
  /* Ta bort rubrik + intro i producentvyn när den ligger i explorer */

.sv-explorer .sv-supplier-title,
.sv-explorer .sv-supplier-lead {
  display: none;
}
  /* Se till att båda explorer-vyer börjar på samma höjd */

.sv-explorer .sv-supplier-header {
  margin-top: 0;
}

.sv-explorer .sv-segment {
  margin-top: 0;
}

/* ta bort extra toppmarginal från sortimentspaneler */

.sv-explorer .sv-sortiment-menu {
  margin-top: 0.8rem;
}

.sv-explorer .sv-sortiment-panel {
  margin-top: 1rem;
}

/* säkerställ att första elementet i varje vy inte trycker ner layouten */

.sv-explorer__view > *:first-child {
  margin-top: 0;
}
  /* Explorer: sortimentsvyn ska börja direkt, utan extra topp-luft */
.sv-explorer__view[data-view-panel="catalog"] {
  padding-top: 0 !important;
}

.sv-explorer .sv-sortiment {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* intro är redan borttaget, men säkerställ att inget utrymme finns kvar */
.sv-explorer .sv-sortiment-intro {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* första synliga raden i sortimentet ska börja direkt */
.sv-explorer .sv-sortiment .sv-segment {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* om blocket eller första barn trycker ner innehållet */
.sv-explorer .sv-sortiment > *:first-child {
  margin-top: 0 !important;
}

/* nollställ eventuellt gammalt grid/flex-avstånd i toppen */
.sv-explorer .sv-sortiment {
  row-gap: 0 !important;
  gap: 0 !important;
}
  /* Mindre luft mellan sidhuvud/breadcrumb och wrapper */
.sv-explorer {
  margin: 1.25rem auto 3rem;
}
  /* Tightare wrapper-head */
.sv-explorer {
  padding: 1.2rem 1.4rem 1.4rem;
}

.sv-explorer__head {
  margin-bottom: 0.8rem;
}

.sv-explorer__kicker {
  margin-bottom: 0.3rem;
}

.sv-explorer__title {
  margin: 0 0 0.25rem;
}

.sv-explorer__lead {
  margin: 0;
  max-width: 34ch;
}

.sv-explorer__switch {
  margin: 0.9rem 0 0.9rem;
}

.sv-explorer__views {
  margin-top: 0.8rem;
}
  /* Sortiment ska börja direkt i explorer */
.sv-explorer .sv-sortiment {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.sv-explorer .sv-segment {
  margin-top: 0 !important;
}

.sv-explorer__view[data-view-panel="catalog"] {
  padding-top: 0 !important;
}
  .sv-explorer__switch {
  margin-top: 0.8rem;
}

.sv-explorer__head {
  margin-bottom: 1rem;
}
  .sv-sortiment-backtop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;

  appearance: none;
  border: 1px solid rgba(20, 40, 25, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: rgba(20, 40, 25, 0.88);

  border-radius: 999px;
  padding: 0.8rem 1rem;
  font: inherit;
  line-height: 1;
  cursor: pointer;

  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.sv-sortiment-backtop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
  .sv-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sv-panel-backlink {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;

  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: rgba(20, 40, 25, 0.72);
  cursor: pointer;
  white-space: nowrap;
}

.sv-panel-backlink:hover {
  color: rgba(20, 40, 25, 0.96);
}
  .sv-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sv-panel-backlink {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;

  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: rgba(20, 40, 25, 0.72);
  cursor: pointer;
  white-space: nowrap;
}

.sv-panel-backlink:hover {
  color: rgba(20, 40, 25, 0.96);
}
/* Undergruppsrubrik */
.sv-subgroup-title-row {
  display: block;
}

.sv-subgroup-title {
  margin: 0;
}

/* Sticky rad för tillbaka-länken */
.sv-subgroup-backlink-row {
  position: sticky;
  top: 40vh;
  z-index: 7;

  width: fit-content;
  margin: 0.5rem 0 0.9rem 42%;
  padding: 0;

  background: transparent;
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-subgroup-backlink-row.is-scrolling {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* Själva länken */
.sv-subgroup-backlink {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;

  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(20, 40, 25, 0.52);
  cursor: pointer;
  white-space: nowrap;

  transition: color 160ms ease, transform 160ms ease;
}

.sv-subgroup-backlink:hover {
  color: rgba(20, 40, 25, 0.86);
  transform: translateX(-1px);
}
/* ===== Desktop: lokal navigation i sortimentet ===== */
@media (min-width: 769px) {
  .sv-sortiment-backtop {
    display: none !important;
  }

  .sv-subgroup-title-row {
    display: block;
  }

  .sv-subgroup-title {
    margin: 0;
  }

  .sv-subgroup-backlink-row {
    position: sticky;
    top: 108px;
    z-index: 7;

    width: max-content;
    margin: 0.45rem 0 0.8rem 31%;
    padding: 0;

    background: transparent;
    opacity: 1;
    transform: translateY(0);

    transition:
      opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sv-subgroup-backlink-row.is-scrolling {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;

    transition:
      opacity 140ms linear,
      transform 140ms linear;
  }

  .sv-subgroup-backlink {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;

    font: inherit;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(20, 40, 25, 0.48);
    cursor: pointer;
    white-space: nowrap;

    transition: color 160ms ease, transform 160ms ease;
  }

  .sv-subgroup-backlink:hover {
    color: rgba(20, 40, 25, 0.82);
    transform: translateX(-1px);
  }
}

/* ===== Mobil: använd flytande knapp, dölj desktop-länken ===== */
@media (max-width: 768px) {
  .sv-subgroup-backlink-row {
    display: none !important;
  }

  .sv-sortiment-backtop {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;

    appearance: none;
    border: 1px solid rgba(20, 40, 25, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: rgba(20, 40, 25, 0.88);

    border-radius: 999px;
    padding: 0.78rem 0.95rem;
    font: inherit;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    backdrop-filter: blur(6px);

    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .sv-sortiment-backtop.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}
  .sv-back-arrow {
  opacity: 0.55;
  margin-right: 0.35rem;
  transition: opacity 160ms ease, transform 160ms ease;
}

.sv-subgroup-backlink:hover .sv-back-arrow {
  opacity: 0.9;
  transform: translateX(-1px);
}
  .sv-subgroup-backlink {
  font-size: 0.8rem;
  color: rgba(20,40,25,0.56);
}
  /* Sticky rad för tillbaka-länken */
.sv-subgroup-backlink-row {
  position: sticky;
  top: 108px;
  z-index: 7;
  }
  @media (min-width: 769px) {
  .sv-subgroup-backlink-row {
    top: 30vh !important;
  }
}
  @media (min-width: 769px) {
  .sv-subgroup-backlink-row {
    top: 30vh !important;
  }
}
  @media (min-width: 769px) {
  .sv-panel-title-row {
    display: block !important;
  }

  .sv-panel-title {
    margin: 0;
  }

  .sv-panel-backlink {
    display: inline-block;
    margin: 0.45rem 0 0.8rem 31% !important;

    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(20, 40, 25, 0.52);

    background: transparent;
    border: 0;
    padding: 0;
  }

  .sv-panel-backlink:hover {
    color: rgba(20, 40, 25, 0.86);
    transform: translateX(-1px);
  }
}
 /* CONTACT CARD PREMIUM EFFECT — SOFT */
.sv-contact-card{
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-contact-card img{
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-contact-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
}

.sv-contact-card:hover img{
  transform: scale(1.025);
  box-shadow:
    0 10px 24px rgba(0,0,0,.16),
    0 0 0 1px rgba(234,222,6,.10);
}
  .sv-about-teaser{
  max-width: 1100px;
  margin: 0 auto;
}

.sv-about-teaser__body{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.sv-about-teaser__body p{
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #3b3b3b;
}

.sv-about-teaser__actions{
  margin-top: 22px;
}
  /* =========================
   OM OSS – premium layout
   ========================= */

.sv-about-hero{
  padding-top: 36px;
  padding-bottom: 18px;
}

.sv-about-intro,
.sv-about-story,
.sv-about-values,
.sv-about-future,
.sv-about-cta{
  max-width: 1180px;
  margin: 0 auto;
}

.sv-about-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
  align-items: start;
}

.sv-about-col{
  min-width: 0;
}

.sv-about-copy{
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.82;
  color: #3c3c3c;
}

.sv-about-copy + .sv-about-copy{
  margin-top: 16px;
}

.sv-about-copy--large{
  font-size: 1.12rem;
  line-height: 1.85;
  color: #222;
}

.sv-about-story__body{
  max-width: 900px;
  margin: 0 auto;
}

.sv-about-story__item{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px 32px;
  padding: 26px 0;
  border-top: 1px solid #ece6da;
}

.sv-about-story__item:last-child{
  border-bottom: 1px solid #ece6da;
}

.sv-about-story__year{
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8b7d67;
  padding-top: 2px;
}

.sv-about-story__content p{
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.8;
  color: #333;
}

.sv-about-story__content p + p{
  margin-top: 12px;
}

.sv-about-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.sv-about-card{
  background: #fcfaf6;
  border: 1px solid #ece4d7;
  border-radius: 24px;
  padding: 26px 24px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

.sv-about-card__title{
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #1f1f1f;
}

.sv-about-card__text{
  margin: 0;
  font-size: .99rem;
  line-height: 1.75;
  color: #3d3d3d;
}

.sv-about-future__body{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.sv-about-future__body .sv-about-copy{
  margin-left: auto;
  margin-right: auto;
}

.sv-about-closing{
  margin: 26px 0 0;
  font-size: 1.12rem;
  line-height: 1.75;
  color: #1f1f1f;
}

.sv-about-cta{
  padding-top: 8px;
  padding-bottom: 30px;
}

.sv-about-cta__inner{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.sv-about-cta__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* Lite mer luft mellan rubrikblock och innehåll */
.sv-about-intro .sv-section__head,
.sv-about-story .sv-section__head,
.sv-about-values .sv-section__head,
.sv-about-future .sv-section__head,
.sv-about-cta .sv-section__head{
  margin-bottom: 24px;
}

/* Mobil */
@media (max-width: 900px){
  .sv-about-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .sv-about-story__item{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }

  .sv-about-story__year{
    padding-top: 0;
  }

  .sv-about-cards{
    grid-template-columns: 1fr;
  }

  .sv-about-card{
    border-radius: 14px;
    padding: 22px 20px;
  }

  .sv-about-copy,
  .sv-about-story__content p,
  .sv-about-card__text{
    font-size: .98rem;
    line-height: 1.72;
  }

  .sv-about-copy--large,
  .sv-about-closing{
    font-size: 1.03rem;
    line-height: 1.72;
  }

  .sv-about-hero{
    padding-top: 22px;
    padding-bottom: 8px;
  }
}
 /* =========================
   EDITORIAL SECTIONS
   ========================= */

.sv-editorial{
  max-width: 1100px;
  margin: 90px auto;
}

.sv-editorial__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.sv-editorial__text{
  max-width: 520px;
  padding-right: 10px;
}

.sv-editorial__sub{
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.72;
  color: #4a4a4a;
}

.sv-editorial__image{
  position: relative;
}

.sv-editorial__image img{
  width: 100%;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  transition: transform .7s ease;
}

.sv-editorial__image:hover img{
  transform: scale(1.03);
}

/* variant: bild vänster */
.sv-editorial--reverse .sv-editorial__inner{
  direction: rtl;
}

.sv-editorial--reverse .sv-editorial__text,
.sv-editorial--reverse .sv-editorial__image{
  direction: ltr;
}

/* bättre landning vid intern scroll */
#sv-about{
  scroll-margin-top: 140px;
}

/* mobil */
@media (max-width: 900px){
  .sv-editorial__inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sv-editorial__text{
    max-width: none;
  }

  .sv-editorial--reverse .sv-editorial__inner{
    direction: ltr;
  }
}
  .sv-editorial .sv-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sv-editorial .sv-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
  /* Editorial button */

.sv-editorial .sv-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  min-height: 44px;
  padding: 0 20px;

  background: #1f1f1f;
  color: #ffffff;

  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sv-editorial .sv-btn:hover{
  background: #000000;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
#sv-about .sv-editorial__text .sv-btn,
#sv-about .sv-editorial__text a.sv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:22px;

  min-height:42px;
  padding:0 22px;

  background:#dff9c0 !important;
  color:#1f1f1f !important;

  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:999px !important;

  font-size:.95rem !important;
  font-weight:500 !important;
  letter-spacing:.01em;

  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

#sv-about .sv-editorial__text .sv-btn:hover,
#sv-about .sv-editorial__text a.sv-btn:hover{
  background:#c9ef98 !important;
  color:#1f1f1f !important;

  border-color:rgba(0,0,0,.12) !important;

  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.12) !important;
}
  .sv-editorial__image{
  position: relative;
}

.sv-editorial__image img{
  width: 108%;
  margin-left: -4%;
}
  /* editorial image breakout */

.sv-editorial__image img{
  width:108%;
  margin-left:-4%;
}

/* reverse section bryter andra hållet */

.sv-editorial--reverse .sv-editorial__image img{
  width:108%;
  margin-left:0;
  margin-right:-4%;
}
  /* =========================
   EDITORIAL SPACING
   ========================= */

.sv-editorial{
  max-width:1100px;
  margin:120px auto;
}

.sv-section--divider + .sv-editorial{
  margin-top:100px;
}

.sv-editorial + .sv-editorial{
  margin-top:140px;
}
/* =========================
   EDITORIAL BUTTONS
   ========================= */

/* Om oss */

#sv-about .sv-btn,
#sv-about a.sv-btn,

/* Leverantörer */

#sv-producers .sv-btn,
#sv-producers a.sv-btn,

/* Aktuellt */

#sv-news .sv-btn,
#sv-news a.sv-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:22px;
  min-height:42px;
  padding:0 22px;

  background:#dff9c0 !important;
  color:#1f1f1f !important;

  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:999px !important;

  font-size:.95rem !important;
  font-weight:500 !important;
  letter-spacing:.01em;

  line-height:1 !important;
  text-decoration:none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

/* hover */

#sv-about .sv-btn:hover,
#sv-about a.sv-btn:hover,
#sv-producers .sv-btn:hover,
#sv-producers a.sv-btn:hover,
#sv-news .sv-btn:hover,
#sv-news a.sv-btn:hover{

  background:#c9ef98 !important;
  color:#1f1f1f !important;

  border-color:rgba(0,0,0,.12) !important;

  transform:translateY(-1px);

  box-shadow:0 8px 22px rgba(0,0,0,.12) !important;

}
/* =========================
   CUSTOM TOPBAR SYSTEM
   Startside-exklusiv premiumtopbar
   ========================= */

/* ===== Bas ===== */

.sv-topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px;
  background: #ffffff;
  z-index: 2000;
  pointer-events: none;
  overflow: hidden;
  transition: box-shadow .45s ease;
}

.sv-brand-anchor{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 2100;

  display: block;
  width: 220px;
  height: 116px;
  padding: 8px 12px;
  pointer-events: auto;
  backface-visibility: hidden;
}

.sv-brand-anchor img{
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  height: 116px;

  transform: translateX(-50%) translateZ(0);
  transform-origin: center top;
  will-change: transform, opacity;
  backface-visibility: hidden;

  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,1,.36,1);
}

.sv-logo-main{
  opacity: 1;
}

.sv-logo-scroll{
  opacity: 0;
  transform: translateX(-50%) scale(.78);
  transition:
    opacity .35s ease,
    transform .65s cubic-bezier(.19,1,.22,1);
}

/* ===== Hamburgermeny ===== */

.trailblazer--mobile-menu-button{
  position: fixed;
  left: 100px;
  top: 40px;
  z-index: 2100;
}

/* ===== Hero-offset (start) ===== */

body.sv-homepage .sv-section.sv-intro{
  padding-top: 80px;
}

/* ===== Startsidans scroll ===== */

body.sv-homepage.sv-scrolled .sv-brand-anchor img{
  transform: translateX(-50%) scale(.93);
}

body.sv-homepage.sv-scrolled .sv-logo-main{
  opacity: 0;
}

body.sv-homepage.sv-scrolled .sv-logo-scroll{
  opacity: 1;
  transform: translateX(-50%) scale(.93);
}

body.sv-homepage.sv-scrolled .sv-topbar{
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* ===== Topbar-bild (start) ===== */

body.sv-homepage .sv-topbar::after{
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("https://cdn.abicart.com/shop/ws23/92523/files/topbar_test_pic.jpg");
  background-size: cover;
  background-position: 0% 85%;

  opacity: 0;
  transform: translateY(-12px);

  transition:
    opacity .8s ease,
    transform 1.2s cubic-bezier(.22,1,.36,1);

  z-index: -1;
}

body.sv-homepage.sv-scrolled .sv-topbar::after{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Gradient under topbar ===== */

.sv-topbar::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 26px;

  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255,255,255,0.9) 40%,
    rgba(255,255,255,0.6) 70%,
    rgba(255,255,255,0) 100%
  );
}

/* ===== Undersidor ===== */

body.sv-not-homepage .sv-topbar{
  height: 120px;
  box-shadow: none;
}

body.sv-not-homepage .sv-brand-anchor{
  top: 10px;
}

body.sv-not-homepage .sv-brand-anchor img{
  transform: translateX(-50%) scale(.88);
}

body.sv-not-homepage .sv-logo-scroll{
  opacity: 0 !important;
}

body.sv-not-homepage .sv-topbar::after{
  content: none !important;
}

/* ===== Desktop ===== */

@media (min-width: 1024px){
  body.sv-homepage .sv-topbar{
    height: 200px;
  }

  body.sv-homepage .sv-brand-anchor{
    top: 22px;
  }

  body.sv-homepage .sv-section.sv-intro{
    padding-top: 120px;
  }
}

/* ===== Mobil ===== */

@media (max-width: 768px){
  .trailblazer--mobile-menu-button{
    left: 32px;
    top: 40px;
  }

  body.sv-not-homepage .sv-topbar{
    height: 104px;
  }

  body.sv-not-homepage .sv-brand-anchor img{
    transform: translateX(-50%) scale(.82);
  }
}

/* =========================
   SIDBYTE & LANDING (TILLÄGG)
   ========================= */

/* Lås animation under navigation */

html.sv-page-switching *{
  transition: none !important;
}

/* ===== Landing animation ===== */

html.sv-page-landing .sv-brand-anchor img{
  transition:
    opacity .5s ease,
    transform 1s cubic-bezier(.22,1,.36,1) !important;
}

/* Från startsida → undersida */

html.sv-page-landing.sv-from-home.sv-not-homepage .sv-brand-anchor img{
  transform: translateX(-50%) scale(.88) !important;
}


html.sv-page-landing.sv-from-home.sv-not-homepage.sv-landed .sv-brand-anchor img{
  transform: translateX(-50%) scale(.88) !important;
}

/* Från undersida → startsida */

html.sv-page-landing.sv-from-inner.sv-homepage .sv-brand-anchor img{
  transform: translateX(-50%) scale(.93) !important;
}

html.sv-page-landing.sv-from-inner.sv-homepage.sv-landed .sv-brand-anchor img{
  transform: translateX(-50%) !important;
}

/* Säkerställ liten topbar direkt på undersida */

html.sv-page-landing.sv-from-home.sv-not-homepage .sv-topbar{
  height: 120px !important;
}

@media (max-width: 768px){
  html.sv-page-landing.sv-from-home.sv-not-homepage .sv-topbar{
    height: 104px !important;
  }
}
/* ===== Leaving home: tvinga kompakt topbar direkt ===== */

html.sv-leaving-home .sv-topbar,
body.sv-leaving-home .sv-topbar{
  height: 120px !important;
  box-shadow: none !important;
}

html.sv-leaving-home .sv-brand-anchor,
body.sv-leaving-home .sv-brand-anchor{
  top: 10px !important;
}

html.sv-leaving-home .sv-brand-anchor img,
body.sv-leaving-home .sv-brand-anchor img{
  transform: translateX(-50%) scale(.88) !important;
}

html.sv-leaving-home .sv-logo-main,
body.sv-leaving-home .sv-logo-main{
  opacity: 1 !important;
}

html.sv-leaving-home .sv-logo-scroll,
body.sv-leaving-home .sv-logo-scroll{
  opacity: 0 !important;
  transform: translateX(-50%) scale(.78) !important;
}

html.sv-leaving-home .sv-topbar::after,
body.sv-leaving-home .sv-topbar::after{
  content: none !important;
}

@media (max-width: 768px){
  html.sv-leaving-home .sv-topbar,
  body.sv-leaving-home .sv-topbar{
    height: 104px !important;
  }

  html.sv-leaving-home .sv-brand-anchor,
  body.sv-leaving-home .sv-brand-anchor{
    top: 8px !important;
  }

  html.sv-leaving-home .sv-brand-anchor img,
  body.sv-leaving-home .sv-brand-anchor img{
    transform: translateX(-50%) scale(.82) !important;
  }
}
/* ===== Undersidor: ge plats för topbar utan att flytta hela sidan ===== */

body.sv-not-homepage .tws-breadcrumbs,
body.sv-not-homepage .breadcrumb,
body.sv-not-homepage nav[aria-label="breadcrumb"]{
  margin-top: 120px !important;
}

@media (max-width: 768px){
  body.sv-not-homepage .tws-breadcrumbs,
  body.sv-not-homepage .breadcrumb,
  body.sv-not-homepage nav[aria-label="breadcrumb"]{
    margin-top: 104px !important;
  }
}
/* ===== Launch-fix: mindre ful kapning mellan hero och cards ===== */
html body .sv-intro{
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
}

html body .sv-cards{
  margin-top: -10px !important;
}
/* =================================================
   OM OSS – PREMIUM / EDITORIAL
   Lägg så långt ner i CSS som möjligt
   ================================================= */

/* ===== Typografi-isolering för Om oss ===== */
.sv-about-hero h1,
.sv-about-hero h2,
.sv-about-story h2,
.sv-about-values h2,
.sv-about-change h2,
.sv-about-future h2,
.sv-about-cta h2,
.sv-about-card__title{
  font-family: Georgia, "Times New Roman", serif !important;
}

.sv-about-hero p,
.sv-about-intro p,
.sv-about-story p,
.sv-about-values p,
.sv-about-change p,
.sv-about-future p,
.sv-about-cta p,
.sv-about-story__year{
  font-family: Helvetica, Arial, sans-serif !important;
}

.sv-about-hero .sv-section__kicker,
.sv-about-story .sv-section__kicker,
.sv-about-values .sv-section__kicker,
.sv-about-change .sv-section__kicker,
.sv-about-future .sv-section__kicker,
.sv-about-cta .sv-section__kicker{
  font-family: Helvetica, Arial, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* ===== Hero: visa H1 + ge sektionen tonal yta ===== */
.sv-about-hero h1{
  display: block !important;
}

.sv-about-hero{
  margin-top: 24px !important;
  padding: 34px 20px 30px !important;
  max-width: 1120px;
  background: #f6f6f6;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
}

.sv-about-hero .sv-section__head{
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.sv-about-hero .sv-section__kicker{
  margin-bottom: 12px !important;
  font-size: 12px !important;
  color: rgba(0,0,0,.58) !important;
}

.sv-about-hero .sv-section__title{
  display: block !important;
  margin: 0 0 16px !important;
  font-size: 44px !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  color: #111 !important;
}

.sv-about-hero .sv-section__lead{
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: rgba(0,0,0,.72) !important;
}

/* ===== Intro ===== */
.sv-about-intro{
  margin-top: 42px !important;
}

.sv-about-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 40px;
  max-width: 980px;
  margin: 0 auto;
}

.sv-about-col{
  min-width: 0;
}

.sv-about-copy{
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(0,0,0,.78);
}

.sv-about-copy--large{
  font-size: 20px;
  line-height: 1.7;
  color: #111;
}

/* ===== Sektionhuvuden för Om oss ===== */
.sv-about-story .sv-section__head,
.sv-about-values .sv-section__head,
.sv-about-change .sv-section__head,
.sv-about-future .sv-section__head,
.sv-about-cta .sv-section__head{
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.sv-about-story .sv-section__title,
.sv-about-values .sv-section__title,
.sv-about-change .sv-section__title,
.sv-about-future .sv-section__title,
.sv-about-cta .sv-section__title{
  margin: 0 0 12px !important;
  font-size: 40px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  color: #111 !important;
}

.sv-about-story .sv-section__lead,
.sv-about-values .sv-section__lead,
.sv-about-change .sv-section__lead,
.sv-about-future .sv-section__lead,
.sv-about-cta .sv-section__lead{
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: rgba(0,0,0,.72) !important;
}

/* ===== Story ===== */
.sv-about-story__body{
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.sv-about-story__item{
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.sv-about-story__year{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.48);
  padding-top: 2px;
}

.sv-about-story__content p{
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(0,0,0,.78);
}

.sv-about-story__content p:last-child{
  margin-bottom: 0;
}

/* ===== Cards ===== */
.sv-about-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.sv-about-card{
  background: #f6f6f6;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 10px 26px rgba(0,0,0,.04);
}

.sv-about-card__title{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
  color: #111;
}

.sv-about-card__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(0,0,0,.76);
}

/* ===== Editorial mellansektion ===== */
.sv-about-editorial{
  max-width: 860px;
  margin: 0 auto;
}

.sv-about-editorial__text{
  max-width: 760px;
  margin: 0 auto;
}

/* ===== Future ===== */
.sv-about-future__body{
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.sv-about-closing{
  max-width: 760px;
  margin: 42px auto 54px !important;
  font-size: 28px;
  line-height: 1.45;
  font-weight: 500;
  color: #111;
}

/* ===== CTA ===== */
.sv-about-cta{
  margin-top: 0 !important;
}

.sv-about-cta__inner{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  background: #f6f6f6;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 26px;
  padding: 42px 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
}

.sv-about-cta__actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ===== Responsivt ===== */
@media (max-width: 900px){
  .sv-about-hero{
    padding: 28px 18px 24px !important;
    border-radius: 22px;
  }

  .sv-about-hero .sv-section__title{
    font-size: 34px !important;
  }

  .sv-about-hero .sv-section__lead{
    font-size: 17px !important;
  }

  .sv-about-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .sv-about-cards{
    grid-template-columns: 1fr;
  }

  .sv-about-story__item{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sv-about-story .sv-section__title,
  .sv-about-values .sv-section__title,
  .sv-about-change .sv-section__title,
  .sv-about-future .sv-section__title,
  .sv-about-cta .sv-section__title{
    font-size: 32px !important;
  }

  .sv-about-copy{
    font-size: 16px;
  }

  .sv-about-copy--large{
    font-size: 18px;
  }

  .sv-about-closing{
    font-size: 22px;
    margin: 34px auto 42px !important;
  }
}

@media (max-width: 600px){
  .sv-about-hero{
    margin-top: 14px !important;
    padding: 24px 16px 22px !important;
  }

  .sv-about-hero .sv-section__title{
    font-size: 28px !important;
  }

  .sv-about-hero .sv-section__lead{
    font-size: 16px !important;
  }

  .sv-about-story .sv-section__title,
  .sv-about-values .sv-section__title,
  .sv-about-change .sv-section__title,
  .sv-about-future .sv-section__title,
  .sv-about-cta .sv-section__title{
    font-size: 28px !important;
  }

  .sv-about-story .sv-section__lead,
  .sv-about-values .sv-section__lead,
  .sv-about-change .sv-section__lead,
  .sv-about-future .sv-section__lead,
  .sv-about-cta .sv-section__lead{
    font-size: 16px !important;
  }

  .sv-about-card{
    padding: 24px 22px;
    border-radius: 18px;
  }

  .sv-about-cta__inner{
    padding: 34px 20px;
    border-radius: 22px;
  }
}
/* =================================================
   AKTUELLT – Editorial news block
   ================================================= */

.sv-news{
  max-width: 860px;
  margin: 0 auto;
}

.sv-news__head{
  text-align: center;
  margin-bottom: 26px;
}

.sv-news__date{
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
}

/* Bild */
.sv-news__media{
  margin: 28px 0 32px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.sv-news__media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Text */
.sv-news__body{
  max-width: 720px;
  margin: 0 auto;
}

.sv-news__lead{
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: #111;
}

.sv-news__body p{
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(0,0,0,.78);
}

/* Typografi */
.sv-news h1{
  font-family: Georgia, "Times New Roman", serif;
}

.sv-news p{
  font-family: Helvetica, Arial, sans-serif;
}

/* Mobil */
@media (max-width: 600px){

  .sv-news__lead{
    font-size: 18px;
  }

  .sv-news__body p{
    font-size: 16px;
  }

  .sv-news__media{
    border-radius: 16px;
  }
}
/* ===== Aktuellt – mindre, mer editorial bild ===== */
.sv-news__media{
  margin: 24px auto 28px;
  max-width: 640px;          /* ← gör bilden mindre */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.sv-about-hero{
  position:relative;
  overflow:hidden;
  background:#f3f3f1; /* fallback grå */
}

/* =========================================================
   HERO – OM OSS (slutversion)
   VERSION: 2026-03-31
   SYFTE:
   - Beskuren hero-bild som fyller ytan
   - Låg, modern hero
   - Premium text ovanpå bild
   - Samma formspråk som kort (radius + shadow)
========================================================= */

.sv-about-hero{
  position: relative;
  overflow: hidden;
  border-radius: 14px;

  /* Hero-bild */
  background-image: url("https://cdn.abicart.com/shop/ws23/92523/files/hero_omoss1.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* Höjd & layout */
  min-height: 360px;
  padding: 0 28px;

  /* Vertikal centrering */
  display: flex;
  align-items: center;

  /* Samma känsla som kort */
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
}

/* Textcontainer */
.sv-about-hero .sv-section__head{
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0;
}

/* =========================================================
   HERO OM OSS – TEXT (premium gul/vit balans)
========================================================= */

/* Rubrik – signaturgul */
.sv-about-hero .sv-section__title{
  color: #eade06 !important;
  text-shadow: 0 6px 24px rgba(0,0,0,0.35);
  letter-spacing: -0.4px;
  font-weight: 600;
}

/* Underrad – mjuk vit */
.sv-about-hero .sv-section__lead{
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Kicker – nedtonad vit */
.sv-about-hero .sv-section__kicker{
  color: rgba(255,255,255,0.75) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.08em;
}

/* =========================================================
   OM OSS – EDITORIAL PREMIUM (under hero)
   SYFTE:
   - Lugnare, mer premium känsla i innehållet
   - Mörkgrön rubrikfärg för sektionerna under hero
   - Bättre luft, rytm och läsbarhet
========================================================= */

/* Sektioner under hero */
.sv-about-text,
.sv-about-intro,
.sv-about-story,
.sv-about-values,
.sv-about-change,
.sv-about-future,
.sv-about-cta{
  margin-top: 0;
}

/* Tunn divider-känsla */
.sv-section--divider{
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 34px;
}

/* Rubriker under hero */
.sv-about-text h2,
.sv-about-text h3,
.sv-about-intro .sv-section__title,
.sv-about-story .sv-section__title,
.sv-about-values .sv-section__title,
.sv-about-change .sv-section__title,
.sv-about-future .sv-section__title,
.sv-about-cta .sv-section__title{
  color: #0c3d17;
  letter-spacing: -0.35px;
  font-weight: 500;
  line-height: 1.15;
}

/* Lite bättre rytm för rubriker i fri text */
.sv-about-text h2{
  margin: 0 0 14px;
}

.sv-about-text h3{
  margin: 30px 0 12px;
}

/* Kicker under hero */
.sv-about-text .sv-section__kicker,
.sv-about-intro .sv-section__kicker,
.sv-about-story .sv-section__kicker,
.sv-about-values .sv-section__kicker,
.sv-about-change .sv-section__kicker,
.sv-about-future .sv-section__kicker,
.sv-about-cta .sv-section__kicker{
  color: rgba(0,0,0,0.48);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: none;
}

/* Lead under hero */
.sv-about-text .sv-section__lead,
.sv-about-intro .sv-section__lead,
.sv-about-story .sv-section__lead,
.sv-about-values .sv-section__lead,
.sv-about-change .sv-section__lead,
.sv-about-future .sv-section__lead,
.sv-about-cta .sv-section__lead{
  color: rgba(0,0,0,0.68);
  line-height: 1.72;
  max-width: 720px;
  text-shadow: none;
}

/* =========================================================
   BRÖDTEXT – premium läsyta (centrerad container, vänsterställd text)
========================================================= */

.sv-about-text .sv-section__body,
.sv-about-copy,
.sv-about-story__content,
.sv-about-future__body,
.sv-about-editorial__text{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Brödtext */
.sv-about-text p,
.sv-about-copy,
.sv-about-story__content p,
.sv-about-future__body p,
.sv-about-editorial__text p{
  color: rgba(0,0,0,0.78);
  line-height: 1.82;
  font-size: 15.8px;
  text-align: left;
}

/* Rytm mellan stycken */
.sv-about-text p + p,
.sv-about-story__content p + p,
.sv-about-future__body p + p,
.sv-about-editorial__text p + p{
  margin-top: 14px;
}

/* Lite större/luftigare ingressstycken */
.sv-about-copy--large,
.sv-about-future__body .sv-about-copy--large{
  font-size: 17px;
  line-height: 1.85;
  color: rgba(0,0,0,0.82);
}

/* Horisontell avdelare i fri text */
.sv-about-text hr{
  margin: 40px auto;
  border: none;
  border-top: 1px solid rgba(0,0,0,.08);
  max-width: 920px;
}
/* =========================================================
   GRID / EDITORIAL
========================================================= */

.sv-about-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 40px;
  align-items: start;
}

/* =========================================================
   OM OSS – TEXTSEKTION (enkel kolumn, centrerad)
========================================================= */

.sv-about-editorial{
  max-width: 920px;
  margin: 0 auto;
  display: block;
}

.sv-about-editorial__text{
  width: 100%;
  min-width: 0;
}

.sv-about-editorial__text h2,
.sv-about-editorial__text h3,
.sv-about-editorial__text p,
.sv-about-editorial__text hr{
  width: 100%;
  text-align: left;
}

.sv-about-editorial__text p{
  color: rgba(0,0,0,0.78);
  line-height: 1.82;
  font-size: 15.8px;
}

.sv-about-editorial__text p + p{
  margin-top: 14px;
}

.sv-about-editorial__text hr{
  margin: 40px 0;
  border: none;
  border-top: 1px solid rgba(0,0,0,.08);
}
.sv-about-editorial__image img{
  width: 100%;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

/* =========================================================
   CARDS
========================================================= */

.sv-about-card{
  background: #f7f7f5;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 14px;
  padding: 24px 22px 22px;
  box-shadow: 0 10px 28px rgba(0,0,0,.04);
}

.sv-about-card__title{
  margin: 0 0 10px;
  color: #111;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.sv-about-card__text{
  color: rgba(0,0,0,0.75);
  line-height: 1.72;
}

/* =========================================================
   AVSLUT / CTA
========================================================= */

.sv-about-closing{
  margin-top: 24px;
  font-weight: 500;
  color: #111;
}

.sv-about-cta__inner{
  background: #f7f7f5;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 10px 28px rgba(0,0,0,.04);
}

/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 900px){

  .sv-about-hero{
    min-height: 300px;
    padding: 0 20px;
  }

  .sv-about-hero .sv-section__head{
    max-width: 100%;
    padding: 32px 0;
  }

  .sv-section--divider{
    padding-top: 24px;
  }

  .sv-about-grid,
  .sv-about-editorial{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sv-about-text .sv-section__body,
  .sv-about-copy,
  .sv-about-story__content,
  .sv-about-future__body,
  .sv-about-editorial__text{
    max-width: 100%;
  }

  .sv-about-text p,
  .sv-about-copy,
  .sv-about-story__content p,
  .sv-about-future__body p,
  .sv-about-editorial__text p{
    font-size: 15.5px;
    line-height: 1.75;
  }

  .sv-about-cta__inner{
    padding: 24px 20px;
  }

}
/* =========================================================
   OM OSS – OVERRIDE FÖR TEXTSEKTION UNDER HERO
   SYFTE:
   - Centrera hela textblocket på sidan
   - Ta bort smal vänsterspalt
   - Behåll vänsterställd, lättläst brödtext
========================================================= */

.sv-about-text{
  max-width: 1000px;
  margin: 0 auto;
}

.sv-about-text .sv-section__body{
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

.sv-about-text h2,
.sv-about-text h3,
.sv-about-text p,
.sv-about-text hr{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.sv-about-text h2,
.sv-about-text h3{
  text-align: left;
}

.sv-about-text p{
  text-align: left;
  color: rgba(0,0,0,0.78);
  line-height: 1.82;
  font-size: 15.8px;
}

.sv-about-text hr{
  border: none;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 40px;
  margin-bottom: 40px;
}