/* ==========================================================================
   Swegreen – responsiv stilmall
   Sidornas design ligger som inline-stilar (exakt som i designfilen, 1440 px).
   Den här filen gör om layouten för mindre skärmar. Klasserna sg-* sattes
   automatiskt vid exporten utifrån hur varje element är uppbyggt.
   Brytpunkter:  1280  laptop  |  1100  meny -> hamburgare  |  1024  iPad liggande
                 900  iPad stående (kolumner staplas)  |  640  mobil  |  380 små mobiler
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, video, svg { max-width: 100%; }
.sg-page { width: 100% !important; height: auto !important; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.sg-w { max-width: 100% !important; }
h1, h2, h3, .sg-fs { overflow-wrap: break-word; }
a, button { -webkit-tap-highlight-color: rgba(80, 201, 164, .25); }
:focus-visible { outline: 2px solid #50c9a4; outline-offset: 3px; }

/* Header + mobilmeny */
.sg-header { position: relative; z-index: 50; }
.sg-menu { display: none; }
.sg-menu .sg-i-close { display: none; }
.sg-header.sg-open .sg-menu .sg-i-open { display: none; }
.sg-header.sg-open .sg-menu .sg-i-close { display: inline; }

/* Tabeller får scrolla i sidled i stället för att spräcka sidan */
.sg-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- Laptop ---------- */
@media (max-width: 1280px) {
  .sg-px { padding-left: 64px !important; padding-right: 64px !important; }
  .sg-nav { gap: 16px !important; }
}

/* ---------- Meny blir hamburgare ---------- */
@media (max-width: 1100px) {
  .sg-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; padding: 0;
    background: transparent; color: inherit; cursor: pointer;
    border: 1px solid currentColor; border-radius: 4px; opacity: .85;
  }
  .sg-nav { display: none !important; }
  .sg-header.sg-open .sg-nav {
    display: flex !important; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    padding: 8px 40px 28px; background: var(--sg-navbg, #0f2620);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28); max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto;
  }
  .sg-header.sg-open .sg-nav > a { padding: 15px 2px !important; font-size: 17px !important; border-bottom: 1px solid rgba(128, 128, 128, .28) !important; }
  .sg-header.sg-open .sg-nav > a:last-of-type { border-bottom: 0 !important; margin-top: 16px; text-align: center; padding: 15px 22px !important; }
}

/* ---------- iPad liggande ---------- */
@media (max-width: 1024px) {
  .sg-px { padding-left: 40px !important; padding-right: 40px !important; }
  .sg-py { padding-top: 60px !important; padding-bottom: 60px !important; }
  .sg-fs { font-size: calc(var(--sg-fs) * .82) !important; }
  .sg-gap { gap: 32px !important; }
  .sg-grid-3p:not(.sg-grid-small):not(.sg-dots) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-h:not(.sg-absparent) { height: auto !important; }
  .sg-hpad { padding-top: 36px !important; padding-bottom: 36px !important; }
  .sg-minw { min-width: 0 !important; }
  .sg-dots { gap: 5px !important; }
}

/* Hero med text + bild eller film: andelarna anges i procent i stället för fasta pixlar */
@media (min-width: 901px) and (max-width: 1499px) {
  .sg-abs-media { width: 50% !important; left: auto !important; right: 0 !important; }
  .sg-abs-text { width: 50% !important; padding-right: 40px !important; }
}
@media (min-width: 1500px) {
  .sg-abs-media { width: 60% !important; left: auto !important; right: 0 !important; }
  .sg-abs-text { width: 40% !important; padding-right: 40px !important; }
}

/* ---------- iPad stående ---------- */
@media (max-width: 900px) {
  .sg-stack { flex-direction: column !important; align-items: stretch !important; }
  .sg-stack > * { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; min-width: 0 !important; }
  .sg-wrap { flex-wrap: wrap !important; }
  .sg-basis { flex-basis: auto !important; }
  .sg-grid:not(.sg-grid-3p):not(.sg-grid-small) { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-span { grid-column: auto !important; grid-row: auto !important; }

  /* Hero-sektioner med absolut placering blir staplade */
  .sg-absparent { height: auto !important; display: flex !important; flex-direction: column !important; }
  .sg-abs-text, .sg-abs-media {
    position: relative !important; inset: auto !important; top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; transform: none !important;
  }
  .sg-abs-text { order: 1; height: auto !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  .sg-abs-media { order: 2; height: auto !important; aspect-ratio: 16 / 10; }
  .sg-abs-deco { display: none !important; }

  .sg-hmedia { height: auto !important; aspect-ratio: var(--sg-ar); max-height: 80vh; }
  .sg-hmedia.sg-w { width: 100% !important; }
  .sg-minh { min-height: 0 !important; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .sg-px, .sg-pxm { padding-left: 20px !important; padding-right: 20px !important; }
  .sg-header { height: 68px !important; }
  .sg-header.sg-open .sg-nav { padding-left: 20px; padding-right: 20px; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); }
  .sg-tagline { display: none !important; }
  .sg-py { padding-top: 44px !important; padding-bottom: 44px !important; }
  .sg-fs { font-size: max(24px, calc(var(--sg-fs) * .6)) !important; }
  .sg-fs-xl { font-size: min(calc(var(--sg-fs) * .5), 15vw) !important; }
  .sg-gap { gap: 24px !important; }
  .sg-grid-3p:not(.sg-grid-small):not(.sg-dots) { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-grid-small.sg-grid-3p { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-dots { grid-template-columns: repeat(25, minmax(0, 1fr)) !important; gap: 4px !important; }
  .sg-abs-text { padding-top: 40px !important; padding-bottom: 40px !important; }
  .sg-abs-media { aspect-ratio: 4 / 3; }
  .sg-table-wrap table { font-size: 14px !important; min-width: 560px; }
  .sg-table-wrap td, .sg-table-wrap th { padding: 12px 14px !important; }
}

@media (max-width: 380px) {
  .sg-px, .sg-pxm { padding-left: 16px !important; padding-right: 16px !important; }
  .sg-fs { font-size: max(22px, calc(var(--sg-fs) * .54)) !important; }
}

/* Knappar bryts inte mitt i texten på surfplatta/dator */
@media (min-width: 1281px) {
  .sg-page a[style*="border-radius: 4px"]:not([style*="flex-direction: column"]):not([style*="display: grid"]) { white-space: nowrap; }
}

/* ==========================================================================
   Meny med alla sidor (tillagd i exporten 2). Knappen .sg-all öppnar
   panelen .sg-allpanel på dator. I mobilmenyn (≤ 1100 px) visas samma
   lista direkt under de vanliga menylänkarna.
   ========================================================================== */
.sg-nav { position: relative; }
.sg-all {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid #2f6254; border-radius: 4px;
}
.sg-all .sg-i-close { display: none; }
.sg-header.sg-all-open .sg-all .sg-i-open { display: none; }
.sg-header.sg-all-open .sg-all .sg-i-close { display: inline; }
.sg-allpanel { display: none; }
.sg-header.sg-all-open .sg-allpanel {
  display: block; position: absolute; top: calc(100% + 20px); right: 0; z-index: 60;
  width: min(1200px, calc(100vw - 80px)); box-sizing: border-box; padding: 40px 44px 44px;
  background: #143029; color: #f0f5f3; border: 1px solid #2f6254; border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto;
  font-size: 15px; text-align: left;
}
.sg-all-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid #21493e; }
.sg-all-title { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; color: #f0f5f3; }
.sg-all-count { font-size: 13px; color: rgba(240, 245, 243, .7); }
.sg-all-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.sg-all-group { display: flex; flex-direction: column; gap: 4px; }
.sg-all-gtitle { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #50c9a4; font-weight: 500; margin-bottom: 8px; }
.sg-allpanel a { display: block; padding: 7px 0; line-height: 1.35; color: rgba(240, 245, 243, .85); text-decoration: none; }
.sg-allpanel a:hover { color: #f0f5f3; }
.sg-allpanel a[aria-current="page"] { color: #50c9a4; font-weight: 500; }

@media (max-width: 1100px) {
  .sg-all { display: none !important; }
  .sg-header.sg-all-open .sg-allpanel { display: none; }
  .sg-header.sg-open .sg-nav > .sg-allpanel {
    display: block !important; position: static; width: auto; max-height: none; overflow: visible;
    margin-top: 28px; padding: 24px 0 0; background: transparent; border: 0; border-top: 1px solid rgba(128, 128, 128, .28);
    border-radius: 0; box-shadow: none;
  }
  .sg-all-head { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; }
  .sg-all-title { font-size: 22px; }
  .sg-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
  .sg-allpanel a { padding: 9px 0; font-size: 16px; }
}
@media (max-width: 640px) {
  .sg-all-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Tillagt i export 4
   ========================================================================== */
/* Symbolrader (Freja-sidorna, Våra odlingar): namn | symboler | antal */
@media (max-width: 1024px) {
  [data-grow] > div.sg-grid { grid-template-columns: 150px minmax(0, 1fr) 110px !important; gap: 16px !important; }
}
@media (max-width: 640px) {
  [data-grow] > div.sg-grid { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px 12px !important; }
  [data-grow] > div.sg-grid > [role="img"] { grid-column: 1 / -1; grid-row: 2; }
}
/* Freja: kartan skalas ner i sin helhet så att prickarna hamnar rätt */
.sg-map { flex-shrink: 0; }
@media (max-width: 900px) {
  .sg-map { zoom: .8; margin: 0 auto; }
  .sg-map svg { max-width: none; }
}
@media (max-width: 640px) {
  .sg-map { zoom: .52; }
}

/* ==========================================================================
   Tillagt efter export 4 (startsidan 22 september)
   ========================================================================== */
/* Tidslinjen "Det gröna bageriet": den vågräta linjen döljs när stegen staplas */
@media (max-width: 900px) {
  .sg-desktop-only { display: none !important; }
  .sg-mobile-only { display: flex !important; }
}
/* Nyckeltalsraden på startsidan: en kolumn på de minsta telefonerna */
section[aria-label="Swegreen i siffror"] a span { overflow-wrap: break-word; }
@media (max-width: 380px) {
  section[aria-label="Swegreen i siffror"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 381px) and (max-width: 900px) {
  section[aria-label="Swegreen i siffror"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Menyraden på laptop och iPad liggande: inga radbrytningar i länkarna */
.sg-nav > a { white-space: nowrap; }
@media (max-width: 1280px) {
  .sg-header .sg-tagline { display: none !important; }
  .sg-nav { gap: 14px !important; font-size: 13.5px !important; }
}
/* Sidfoten: länkarna radbryts som helhet i stället för mitt i orden */
.sg-page footer > div a, .sg-page footer > div button { white-space: nowrap; }
.sg-page footer > a { flex-wrap: wrap; row-gap: 14px; }
.sg-page footer > div > div { flex-wrap: wrap; row-gap: 12px; }
/* FoodTech 500-märket behåller sina proportioner i alla bredder */
.sg-page footer img[alt^="The FoodTech 500"] { width: auto !important; height: 72px !important; max-width: 100%; aspect-ratio: auto !important; flex: 0 0 auto !important; align-self: flex-start !important; }
@media (max-width: 640px) {
  .sg-page footer img[alt^="The FoodTech 500"] { height: auto !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw); border-radius: 0 !important; aspect-ratio: auto !important; }
}
/* Kontaktkorten: under varandra när kolumnen blir smal, så att e-postadressen får plats */
@media (min-width: 901px) and (max-width: 1280px) {
  #kontakt > div:last-child { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Knapprader radbryts hellre än att knapparna går utanför */
.sg-page div:has(> a[style*="border-radius: 4px"]) { flex-wrap: wrap; row-gap: 12px; }
/* Sidfotens två delar (namn och länkar) hamnar under varandra när det blir trångt */
.sg-page footer > div { flex-wrap: wrap; row-gap: 24px; }
/* Faktaremsor med många kolumner blir tre per rad på laptop och iPad */
@media (max-width: 1400px) {
  .sg-grid-3p[style*="repeat(5, minmax"], .sg-grid-3p[style*="repeat(6, minmax"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Rader med en fast kolumn plus text (t.ex. 150px | text | knapp) staplas i stället för att delas i två */
@media (max-width: 1024px) {
  .sg-grid-3p[style*="px minmax"]:not([style*="repeat(5"]):not([style*="repeat(6"]) { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Freja-kartan: kartan ovanför faktarutan när det inte får plats bredvid, och mindre på de smalaste telefonerna */
@media (max-width: 1280px) {
  div:has(> .sg-map) { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
  div:has(> .sg-map) > article { width: 100%; max-width: 720px; margin-top: 0 !important; }
}
@media (max-width: 380px) {
  .sg-map { zoom: .42; }
}
/* Rubriker som är låsta på en rad i datorversionen får radbrytas på mindre skärmar */
@media (max-width: 1280px) {
  .sg-page h1, .sg-page h2, .sg-page h3 { white-space: normal !important; }
}
/* Symbolraderna: på mobil visas tre sorter, resten bakom knappen "Visa alla" */
.sg-showmore { display: none !important; }
@media (max-width: 640px) {
  .sg-showmore { display: flex !important; }
  [data-grow]:not([data-expanded="true"]) > div:nth-child(n+4) { display: none !important; }
  .sg-showmore[aria-expanded="true"] svg { transform: rotate(180deg); }
}
/* Menyn med alla sidor har sex grupper sedan branschsidorna tillkom */
.sg-all-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
.sg-header.sg-all-open .sg-allpanel { width: min(1280px, calc(100vw - 80px)); }
@media (max-width: 1100px) { .sg-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sg-all-grid { grid-template-columns: minmax(0, 1fr); } }
/* Vanliga frågor: plustecknet vrids när frågan är öppen */
details > summary::-webkit-details-marker { display: none; }
details[open] > summary > span[aria-hidden="true"] { transform: rotate(45deg); display: inline-block; }
/* Tre kort i en smal spalt (t.ex. presskorten) staplas mellan 1025 och 1440 px */
@media (min-width: 1025px) and (max-width: 1439px) {
  .sg-stack-mid { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Långa sammansatta ord (t.ex. "konsumentbranschen") bryts hellre än att gå utanför smala spalter */
.sg-page p, .sg-page li, .sg-page dd { overflow-wrap: break-word; }
@media (max-width: 640px) {
  .sg-page p, .sg-page li, .sg-page dd { hyphens: auto; }
}
/* Startsidan: herobilden (filmen) visas överst när heron staplas på mobil och iPad stående */
@media (max-width: 900px) {
  .sg-media-first > .sg-abs-media { order: 1; }
  .sg-media-first > .sg-abs-text { order: 2; }
}
/* Knappar är lika breda som sin text även på mobil: knapprader radbryts i stället för att staplas i full bredd */
@media (max-width: 900px) {
  .sg-stack:has(> a[style*="border-radius: 4px"]) { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; }
  .sg-stack:has(> a[style*="border-radius: 4px"]) > a { width: auto !important; flex: 0 0 auto !important; max-width: 100% !important; }
}
/* Anläggningssidorna: herobilden får samma proportioner som startsidans herobild när sidan staplas */
@media (max-width: 900px) {
  .sg-hero-media { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 16 / 10 !important; object-fit: cover; }
}
@media (max-width: 640px) {
  .sg-hero-media { aspect-ratio: 4 / 3 !important; }
}
@media (min-width: 901px) {
  .sg-hero-media { height: auto !important; aspect-ratio: 820 / 780; object-fit: cover; }
}
/* Anläggningssidorna: herobilden överst och i full bredd på mobil och iPad stående, som på startsidan */
@media (max-width: 900px) {
  section:has(> .sg-hero-media) { padding-top: 0 !important; }
  section:has(> .sg-hero-media) > .sg-hero-media { order: -1; margin: 0 -40px; width: calc(100% + 80px) !important; max-width: none !important; border-radius: 0 !important; }
}
@media (max-width: 640px) {
  section:has(> .sg-hero-media) > .sg-hero-media { margin: 0 -20px; width: calc(100% + 40px) !important; }
}
@media (max-width: 380px) {
  section:has(> .sg-hero-media) > .sg-hero-media { margin: 0 -16px; width: calc(100% + 32px) !important; }
}
/* Knappar som ligger direkt i ett rutnät eller under symbolraderna är lika breda som sin text */
.sg-page .sg-grid > a[style*="border-radius: 4px"] { justify-self: start; }
.sg-page .sg-showmore { align-self: flex-start !important; }
/* Övriga sidor med bild i heron: bilden överst och i full bredd på mobil och iPad stående (samma som startsidan) */
@media (max-width: 900px) {
  section:has(> .sg-hero-mobile) { padding-top: 0 !important; }
  section:has(> .sg-hero-mobile) > .sg-hero-mobile { order: -1; margin: 0 -40px; width: calc(100% + 80px) !important; max-width: none !important; height: auto !important; max-height: none !important; aspect-ratio: 16 / 10 !important; object-fit: cover; border-radius: 0 !important; }
  .sg-page > header { order: -2; }
  .sg-page > .sg-hero-band { order: -1; }
}
@media (max-width: 640px) {
  section:has(> .sg-hero-mobile) > .sg-hero-mobile { margin: 0 -20px; width: calc(100% + 40px) !important; aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 380px) {
  section:has(> .sg-hero-mobile) > .sg-hero-mobile { margin: 0 -16px; width: calc(100% + 32px) !important; }
}
/* Freja: bildspelet under rubriken behåller sin höjd när sidan är smal, och hamnar överst på mobil */
@media (max-width: 1024px) {
  .sg-hero-band { height: auto !important; aspect-ratio: 3 / 1; }
}
@media (max-width: 900px) {
  .sg-hero-band { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .sg-hero-band { aspect-ratio: 4 / 3; }
}
/* Swegreen X: logotypen närmare rubriken på mobil och iPad */
@media (max-width: 900px) {
  .sg-page img[alt="Swegreen X"] { margin-top: 28px !important; height: auto !important; width: min(520px, 100%) !important; }
}
/* Ikonkort (t.ex. Affären på startsidan) ligger två och två på mobil i stället för under varandra */
@media (max-width: 640px) {
  .sg-page .sg-cards-2 > * { padding: 20px 18px 22px !important; gap: 10px !important; }
  .sg-page .sg-cards-2 h3 { font-size: 17px !important; line-height: 1.25 !important; }
  .sg-page .sg-cards-2 p { font-size: 14px !important; line-height: 1.5 !important; }
  .sg-page .sg-cards-2 svg { width: 24px !important; height: 24px !important; }
  .sg-page .sg-cards-2 * { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
  .sg-page .sg-cards-2 .sg-fs { font-size: 26px !important; line-height: 1.1 !important; }
}
/* Tidslinjen "Det gröna bageriet" får en egen, kompakt grafik på mobil: lodrät linje med ikonerna till vänster */
@media (max-width: 640px) {
  .sg-page .sg-grid-3p.sg-timeline-2 { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .sg-page .sg-timeline-2 > div:not(.sg-desktop-only) { position: relative; display: grid !important; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding-bottom: 22px; }
  .sg-page .sg-timeline-2 > div:not(.sg-desktop-only):not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 44px; bottom: 2px; width: 2px; background: #2f6254; }
  .sg-page .sg-timeline-2 > div > div[style*="border-radius: 36px"] { grid-row: 1 / span 2; align-self: start; width: 38px !important; height: 38px !important; border-radius: 19px !important; border-width: 1.5px !important; }
  .sg-page .sg-timeline-2 svg { width: 17px !important; height: 17px !important; }
  .sg-page .sg-timeline-2 .sg-fs { grid-column: 2; align-self: center; font-size: 22px !important; }
  .sg-page .sg-timeline-2 > div > div:last-child { grid-column: 2; font-size: 14px !important; line-height: 1.5 !important; }
  .sg-page section:has(.sg-timeline-2) h2 { font-size: 30px !important; line-height: 1.15 !important; }
  .sg-page section:has(.sg-timeline-2) > div > p, .sg-page section:has(.sg-timeline-2) p:not(.sg-timeline-2 p) { font-size: 15px !important; line-height: 1.55 !important; }
}
/* Butikskorten på startsidan: mindre rubrik och tightare kort på mobil */
@media (max-width: 640px) {
  .sg-page .sg-storecards h3 { font-size: 17px !important; line-height: 1.3 !important; }
  .sg-page .sg-storecards .sg-pxm { padding: 18px 20px 22px !important; }
  .sg-page .sg-storecards { gap: 16px !important; }
}
/* Nyhetskort och handlarcitat: mindre text på mobil */
@media (max-width: 640px) {
  .sg-page .sg-newscards > a > div:last-child { font-size: 17px !important; line-height: 1.3 !important; }
  .sg-page .sg-newscards { gap: 22px !important; }
  .sg-page .sg-quote { font-size: 21px !important; line-height: 1.4 !important; }
}
/* Handlarfilmerna på mobil: varje film blir ett eget kort så att avsnitten inte flyter ihop */
@media (max-width: 900px) {
  .sg-page .sg-filmcards { gap: 20px !important; }
  .sg-page .sg-filmcards > div { background: #ffffff; border: 1px solid #e2eae6; border-radius: 8px; padding: 18px 18px 22px; gap: 14px !important; }
  .sg-page .sg-filmcards > div video { border-radius: 6px; }
  .sg-page .sg-filmcards > div > p { font-size: 16px !important; line-height: 1.5 !important; }
}
/* Alla knappar är lika breda som sin text på mobil och iPad stående, oavsett var de sitter */
@media (max-width: 900px) {
  .sg-page a[style*="border-radius: 4px"], .sg-page button[style*="border-radius: 4px"] { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; flex: 0 0 auto !important; align-self: flex-start !important; justify-self: start !important; }
  .sg-page [style*="align-items: center"] > a[style*="border-radius: 4px"], .sg-page [style*="align-items: center"] > button[style*="border-radius: 4px"] { align-self: center !important; justify-self: center !important; }
  .sg-page [style*="text-align: center"] a[style*="border-radius: 4px"] { align-self: center !important; justify-self: center !important; }
}
/* Alla textkort ligger två och två upp till och med iPad stående */
@media (max-width: 900px) {
  .sg-page .sg-gap.sg-grid.sg-cards-2, .sg-page .sg-grid.sg-cards-2, .sg-page .sg-grid-3p.sg-cards-2, .sg-page .sg-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-gap.sg-grid.sg-cards-2, .sg-page .sg-grid.sg-cards-2, .sg-page .sg-grid-3p.sg-cards-2, .sg-page .sg-cards-2 { gap: 12px !important; }
}
/* Knappar i lagom storlek på mobil: mindre text och luft, men minst 44 px höga för fingret */
@media (max-width: 640px) {
  .sg-page a[style*="border-radius: 4px"], .sg-page button[style*="border-radius: 4px"] { font-size: 15px !important; padding: 12px 18px !important; min-height: 44px; }
  .sg-page a[style*="border-radius: 4px"][style*="font-size: 14px"], .sg-page button[style*="border-radius: 4px"][style*="font-size: 14px"] { font-size: 14px !important; padding: 10px 16px !important; }
}
/* Vita knappar: primärknappen är vit med mörk text på alla sidor */
.sg-page a[style*="background: rgb(80, 201, 164)"][style*="border-radius: 4px"],
.sg-page button[style*="background: rgb(80, 201, 164)"][style*="border-radius: 4px"] { background: #ffffff !important; color: #0f2620 !important; }
/* Förstorad film (data-sg-enlarge) */
.sg-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(5,14,11,0.92); display: flex; align-items: center; justify-content: center; padding: 64px 24px 24px; box-sizing: border-box; }
.sg-lightbox-box { position: relative; width: min(1600px, 100%); max-height: 100%; }
.sg-lightbox-box video { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); object-fit: contain; }
.sg-lightbox-close { position: absolute; right: 0; top: -48px; padding: 8px 14px; border: 1px solid rgba(240,245,243,0.4); border-radius: 4px; background: transparent; color: #f0f5f3; font: inherit; font-size: 15px; cursor: pointer; }
/* Mindre brödtext på mobil: ingresser och löptext skalas ner ett steg */
@media (max-width: 640px) {
  .sg-page p:not(.sg-quote), .sg-page li, .sg-page dd, .sg-page figcaption { font-size: 16px !important; line-height: 1.6 !important; }
  .sg-page p[style*="font-size: 19px"], .sg-page p[style*="font-size: 20px"], .sg-page p[style*="font-size: 21px"], .sg-page p[style*="font-size: 22px"] { font-size: 16.5px !important; line-height: 1.55 !important; }
  .sg-page div[style*="font-size: 19px"]:not(.sg-fs), .sg-page div[style*="font-size: 18px"]:not(.sg-fs), .sg-page div[style*="font-size: 20px"]:not(.sg-fs), .sg-page div[style*="font-size: 21px"]:not(.sg-fs), .sg-page div[style*="font-size: 22px"]:not(.sg-fs), .sg-page span[style*="font-size: 19px"], .sg-page span[style*="font-size: 18px"], .sg-page span[style*="font-size: 20px"] { font-size: 16.5px !important; line-height: 1.5 !important; }
  .sg-page div[style*="font-size: 17px"]:not(.sg-fs), .sg-page span[style*="font-size: 17px"] { font-size: 16px !important; }
  /* kort och knappar behåller sina egna, redan nedskalade storlekar */
  .sg-page .sg-cards-2 p, .sg-page .sg-cards-2 li, .sg-page .sg-cards-2 div:not(.sg-fs), .sg-page .sg-cards-2 span { font-size: 14px !important; line-height: 1.5 !important; }
  .sg-page .sg-timeline-2 > div > div:last-child { font-size: 14px !important; }
  .sg-page .sg-newscards > a > div:last-child { font-size: 17px !important; line-height: 1.3 !important; }
  .sg-page .sg-storecards h3 { font-size: 17px !important; }
  .sg-page .sg-quote { font-size: 21px !important; line-height: 1.4 !important; }
  .sg-page .sg-filmcards > div > p { font-size: 15px !important; }
  .sg-page a[style*="grid-template-columns: 130px"] span { font-size: 16px !important; line-height: 1.35 !important; }
  .sg-page h3[style*="font-size: 18px"], .sg-page h3[style*="font-size: 19px"], .sg-page h3[style*="font-size: 20px"], .sg-page h3[style*="font-size: 21px"], .sg-page h3[style*="font-size: 22px"] { font-size: 17px !important; line-height: 1.3 !important; }
  .sg-page a[style*="border-radius: 4px"], .sg-page button[style*="border-radius: 4px"] { font-size: 15px !important; }
}
/* Hero på alla sidor byggs som startsidans: bilden eller filmen går ut i kanten och textspalten får mer plats */
@media (min-width: 901px) {
  .sg-page section:has(> .sg-hero-mobile), .sg-page section:has(> .sg-hero-media) { position: relative; display: block !important; padding-top: 56px !important; padding-bottom: 80px !important; padding-right: calc(50% + 72px) !important; }
  .sg-page section:has(> .sg-hero-mobile) > .sg-hero-mobile, .sg-page section:has(> .sg-hero-media) > .sg-hero-media { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 50% !important; height: 100% !important; max-height: none !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; object-fit: cover; margin: 0 !important; }
  .sg-page section:has(> .sg-hero-mobile) > div, .sg-page section:has(> .sg-hero-media) > div { width: auto !important; max-width: none !important; }
}
@media (min-width: 1500px) {
  .sg-page section:has(> .sg-hero-mobile), .sg-page section:has(> .sg-hero-media) { padding-right: calc(60% + 72px) !important; }
  .sg-page section:has(> .sg-hero-mobile) > .sg-hero-mobile, .sg-page section:has(> .sg-hero-media) > .sg-hero-media { width: 60% !important; }
}
/* Freja: bildspelet under rubriken fyller hela sidbredden även på breda skärmar */
.sg-page .sg-hero-band { width: 100% !important; max-width: none !important; }
/* Emblemet ovanför "Det gröna bageriet": bara symbolen på mobil, centrerad över sektionen */
@media (max-width: 900px) {
  .sg-page section:has(.sg-timeline-2) > .sg-wrap:first-child { flex-wrap: nowrap !important; justify-content: center; }
  .sg-page section:has(.sg-timeline-2) > .sg-wrap:first-child > span[style*="width: 180px"] { display: none !important; }
}
/* Bildruta med bilder som tonar över i varandra (Kommuner & skolor) */
.sg-page .sg-fadebox { position: relative !important; display: block !important; width: 100% !important; border-radius: 6px; overflow: hidden; }
.sg-page .sg-fadebox > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: auto !important; object-fit: cover; margin: 0 !important; }
@media (max-width: 900px) {
  .sg-page .sg-fadebox { height: auto !important; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .sg-page .sg-fadebox { aspect-ratio: 4 / 3; }
}
/* Stegen på installationssidorna: siffran kvar till vänster på mobil, så att linjen inte går över texten */
@media (max-width: 900px) {
  .sg-page .sg-steps > li.sg-grid, .sg-page .sg-steps > li { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 16px !important; row-gap: 4px !important; padding-bottom: 22px !important; }
  .sg-page .sg-steps > li > span { width: 44px !important; height: 44px !important; border-radius: 22px !important; font-size: 16px !important; }
  .sg-page .sg-steps > li > div[style*="position: absolute"] { left: 21px !important; top: 48px !important; bottom: -22px !important; }
  .sg-page .sg-steps > li > div:last-child { padding-top: 4px !important; }
  .sg-page .sg-steps h3 { font-size: 18px !important; }
}
/* Rader som börjar med en bock eller ett streck: symbolen står kvar till vänster om texten på mobil */
.sg-page .sg-iconrow { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; }
.sg-page .sg-iconrow > :first-child { flex: 0 0 auto !important; width: auto !important; }
.sg-page .sg-iconrow > :last-child { flex: 1 1 auto !important; min-width: 0; }
/* "Visste du att": stora kortet och faktakortet i full bredd på mobil, de små två och två */
@media (max-width: 900px) {
  .sg-page .sg-didyouknow > article[style*="grid-row: span 2"] { grid-row: auto !important; grid-column: 1 / -1 !important; }
  .sg-page .sg-didyouknow > article[style*="grid-column: 1 / -1"] { grid-column: 1 / -1 !important; }
  .sg-page .sg-didyouknow > article[style*="grid-row: span 2"] { padding: 24px 24px 28px !important; gap: 14px !important; }
  .sg-page .sg-didyouknow > article[style*="grid-row: span 2"] svg { height: 260px !important; width: auto !important; }
  .sg-page .sg-didyouknow > article[style*="grid-row: span 2"] p { font-size: 22px !important; line-height: 1.2 !important; hyphens: manual !important; }
  .sg-page .sg-didyouknow > article[style*="grid-column: 1 / -1"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Siffror i kort: inre span-taggar ärver rubrikstorleken i stället för brödtextens */
@media (max-width: 640px) {
  .sg-page .sg-cards-2 .sg-fs span, .sg-page .sg-cards-2 .sg-fs { font-size: 26px !important; line-height: 1.1 !important; }
}
/* Mobilmenyn: "Bli kund" i full bredd längst ner i menyn */
@media (max-width: 900px) {
  .sg-header.sg-open .sg-nav > a[style*="border-radius: 4px"] { width: 100% !important; max-width: none !important; align-self: stretch !important; justify-content: center; text-align: center; }
}
/* Farm ID-kortet: två spalter på mobil och iPad stående */
@media (max-width: 900px) {
  .sg-page .sg-grid.sg-farmid, .sg-page .sg-grid-3p.sg-farmid, .sg-page .sg-farmid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-page .sg-farmid > div:first-child { grid-column: 1 / -1; border-radius: 5px 5px 0 0 !important; padding: 20px 22px !important; }
  .sg-page .sg-farmid > div { padding: 18px 20px !important; border-left: 0 !important; border-top: 1px solid #21493e; }
  .sg-page .sg-farmid > div:nth-child(even) { border-left: 1px solid #21493e !important; }
  .sg-page .sg-farmid > div > span:first-child { font-size: 12px !important; }
  .sg-page .sg-farmid > div > :last-child { font-size: 17px !important; }
}
/* Kedjegrafiken i rapporten: stegen centreras på mobil, så att ensamma steg inte hamnar till vänster */
@media (max-width: 640px) {
  .sg-page .sg-chain { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 20px 4px !important; }
  .sg-page .sg-chain-small .sg-chain, .sg-page .sg-chain-small > div { justify-content: center !important; }
}
/* Mindre luft mellan heron och texten på mobil och iPad stående */
@media (max-width: 900px) {
  .sg-page .sg-media-first .sg-abs-text { padding-top: 26px !important; row-gap: 20px !important; }
  .sg-page .sg-media-first .sg-abs-text > div[style*="margin-top: 40px"] { margin-top: 18px !important; }
  .sg-page section:has(> .sg-hero-mobile), .sg-page section:has(> .sg-hero-media) { row-gap: 20px !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-media-first .sg-abs-text { padding-top: 20px !important; }
  .sg-page .sg-media-first .sg-abs-text > div[style*="margin-top: 40px"], .sg-page section:has(> .sg-hero-mobile) div[style*="margin-top: 40px"] { margin-top: 14px !important; }
  .sg-page .sg-media-first .sg-abs-text { row-gap: 16px !important; }
  .sg-page section:has(> .sg-hero-mobile), .sg-page section:has(> .sg-hero-media) { row-gap: 16px !important; }
}
/* FoodTech 500-märket går ut i kanten i sidfoten på mobil */
@media (max-width: 640px) {
  .sg-page footer .sg-badge-link { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; gap: 14px !important; align-self: stretch !important; }
  .sg-page footer .sg-badge { width: 100vw !important; max-width: 100vw !important; height: auto !important; border-radius: 0 !important; aspect-ratio: auto !important; }
  .sg-page footer .sg-badge-link > :not(.sg-badge) { padding-left: 20px !important; padding-right: 20px !important; }
}
/* Fristående textlänkar får en större tryckyta på pekskärmar */
@media (max-width: 900px) {
  .sg-page .sg-taplink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 40px; }
  .sg-page div[style*="font-size: 13px"] .sg-taplink, .sg-page div[style*="font-size: 14px"] .sg-taplink { min-height: 36px; }
  .sg-page footer .sg-taplink { min-height: 40px; }
}
/* Samma tryckytor på alla pekskärmar, även stora surfplattor */
@media (pointer: coarse) {
  .sg-page .sg-taplink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 40px; }
  .sg-page footer .sg-taplink, .sg-page div[style*="font-size: 13px"] .sg-taplink, .sg-page div[style*="font-size: 14px"] .sg-taplink { min-height: 36px; }
}
/* Menyraden på pekskärmar: länkarna får en högre tryckyta */
@media (pointer: coarse) {
  .sg-page header .sg-nav > a:not([style*="border-radius: 4px"]) { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; }
  .sg-page header .sg-tagline { font-size: 11px !important; }
}
/* Kontaktformulär */
.sg-page .sg-form input:focus-visible, .sg-page .sg-form select:focus-visible, .sg-page .sg-form textarea:focus-visible { outline: 2px solid #50c9a4; outline-offset: 2px; }
.sg-page .sg-form input::placeholder, .sg-page .sg-form textarea::placeholder { color: rgba(240, 245, 243, 0.4); }
.sg-page .sg-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #50c9a4 50%), linear-gradient(135deg, #50c9a4 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.sg-page .sg-form button[type="submit"] { min-height: 48px; }
@media (max-width: 900px) {
  .sg-page .sg-form > div[style*="grid-template-columns: repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .sg-page .sg-form { gap: 16px !important; }
}

/* ==========================================================================
   Tillagt i export 8
   ========================================================================== */
/* Logotyp (SVG) i sidhuvud och sidfot */
.sg-logo { height: 48px; width: auto; display: block; }
.sg-logo-foot { height: 44px; align-self: flex-start; }
@media (max-width: 1280px) { .sg-header .sg-logo { height: 42px; } }
@media (max-width: 640px) { .sg-header .sg-logo { height: 32px; } .sg-logo-foot { height: 36px; } }
/* Sidfotens fem kolumner: tre per rad på laptop/iPad, två på iPad stående, en på mobil */
@media (max-width: 1280px) { .sg-page footer .sg-grid.sg-grid-3p { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 40px !important; } }
@media (max-width: 900px) { .sg-page footer .sg-grid.sg-grid-3p { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .sg-page footer .sg-grid.sg-grid-3p { grid-template-columns: minmax(0, 1fr) !important; } }
.sg-page footer .sg-grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 1281px) { .sg-page footer .sg-grid > div:first-child { grid-column: auto; } }
/* Tabeller i rapportkapitel och policy */
.sg-page table { min-width: 0; }
@media (max-width: 640px) { .sg-page .sg-table-wrap table { min-width: 560px; } }
/* Menyn Alla sidor: grå mellanrubriker och odlingarna i två spalter */
.sg-all-sub { font-size: 12px; color: rgba(240, 245, 243, .5); margin: 12px 0 2px; }
.sg-allpanel a.sg-all-muted { color: rgba(240, 245, 243, .55); }
.sg-all-top, .sg-all-col { display: flex; flex-direction: column; gap: 4px; }
.sg-all-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
@media (min-width: 1101px) {
  .sg-all-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .sg-all-wide { grid-column: span 2; }
}
@media (max-width: 1100px) { .sg-all-wide { grid-column: 1 / -1; } }
@media (max-width: 640px) { .sg-all-cols { grid-template-columns: minmax(0, 1fr); } }
/* Rapportkapitlen: textspalt + nyckeltal får plats på laptop och iPad liggande */
@media (max-width: 1280px) and (min-width: 901px) {
  .sg-page section[style*="minmax(0px, 820px)"] { grid-template-columns: minmax(0, 1fr) minmax(0, 280px) !important; gap: 56px !important; }
}

/* ==========================================================================
   Tillagt i export 9
   ========================================================================== */
/* Material-rutan på pressmeddelanden: pilen får inte gå utanför rutan på smala skärmar */
.sg-page aside a[style*="justify-content: space-between"] { gap: 12px; min-width: 0; }
.sg-page aside a[style*="justify-content: space-between"] > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sg-page aside a[style*="justify-content: space-between"] > span:last-child { flex-shrink: 0; }

/* ==========================================================================
   Tillagt i export 10
   ========================================================================== */
/* Källrutan på mediesidorna: värdet får radbrytas i stället för att gå utanför rutan */
.sg-page aside div[style*="justify-content: space-between"] { gap: 12px; min-width: 0; }
.sg-page aside div[style*="justify-content: space-between"] > span:first-child { flex-shrink: 0; }
.sg-page aside div[style*="justify-content: space-between"] > span:last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* Nyheter, pressmeddelanden och mediesidor: sidospalten får rimlig bredd på iPad liggande och laptop */
@media (min-width: 901px) and (max-width: 1280px) {
  .sg-page section.sg-grid[style*="minmax(0px, 760px) minmax(0px, 1fr)"] { grid-template-columns: minmax(0, 1fr) minmax(0, 300px) !important; gap: 48px !important; }
}
/* Bildgalleriet ("Fler bilder"): miniatyrerna fyller hela cellen */
.sg-page article div[style*="repeat(3, 1fr)"] > a { display: block; width: 100%; }
.sg-page article div[style*="repeat(3, 1fr)"] > a > img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1024px) { .sg-page article div.sg-grid[style*="repeat(3, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } }
@media (max-width: 640px) { .sg-page article div.sg-grid[style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.sg-page article div[style*="repeat(3, 1fr)"] > a.sg-taplink { min-width: 0 !important; max-width: 100%; overflow: hidden; }
.sg-page article div[style*="repeat(3, 1fr)"] > a > img { min-width: 0 !important; max-width: 100% !important; }
.sg-page article div[style*="repeat(3, 1fr)"] > a.sg-taplink { padding: 0 !important; margin: 0 !important; box-sizing: border-box; min-height: 0 !important; background: none !important; border: 0 !important; }

/* --------------------------------------------------------------------------
   Export 10, granskning mot responsivitetsprompten
   -------------------------------------------------------------------------- */
/* Mobilmenyn: sidan bakom scrollar inte när menyn är öppen */
html.sg-menu-open, html.sg-menu-open body { overflow: hidden; }
/* Liggande mobil: heronbilden tar högst 40 % av skärmhöjden, så att rubrik och knapp syns tidigt */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .sg-page section:has(> .sg-hero-mobile) > .sg-hero-mobile,
  .sg-page section:has(> .sg-hero-media) > .sg-hero-media { aspect-ratio: auto !important; height: 40vh !important; height: 40svh !important; max-height: 40svh !important; }
  .sg-page .sg-py { padding-top: 32px !important; padding-bottom: 40px !important; }
  /* Säkra ytor: innehållet hamnar inte under notch i liggande läge */
  .sg-page .sg-px { padding-left: max(20px, env(safe-area-inset-left)) !important; padding-right: max(20px, env(safe-area-inset-right)) !important; }
}
/* Säker yta längst ner (hemindikator) för sidfoten */
.sg-page footer { padding-bottom: max(40px, env(safe-area-inset-bottom)) !important; }
/* Mobil: brödtext minst 16 px, klickytor i sidfot och brödsmulor minst 44 px */
@media (max-width: 767px) {
  .sg-page p[style*="font-size: 15"], .sg-page li[style*="font-size: 15"] { font-size: 16px !important; }
}
@media (max-width: 1023px) {
  .sg-page footer .sg-taplink, .sg-page div[style*="font-size: 13px"] .sg-taplink, .sg-page div[style*="font-size: 14px"] .sg-taplink { min-height: 44px !important; }
}
/* Liggande mobil: rubriken först, bilden efter texten */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .sg-page section:has(> .sg-hero-mobile) > .sg-hero-mobile, .sg-page section:has(> .sg-hero-media) > .sg-hero-media { order: 2 !important; margin-top: 24px !important; }
  .sg-page section:has(> .sg-hero-mobile), .sg-page section:has(> .sg-hero-media) { padding-top: 28px !important; }
}
/* Hero med film och textspalt (Dagligvaruhandeln, Offentliga kök, Investerare): textspalten hålls till vänster
   om filmen, som på startsidan, i stället för att löpa in över filmen */
@media (min-width: 901px) {
  .sg-page section:has(> .sg-hero-mobile) > div[style*="position: absolute"]:not([style*="inset: 0px"]),
  .sg-page section:has(> .sg-hero-media) > div[style*="position: absolute"]:not([style*="inset: 0px"]) { width: 50% !important; right: auto !important; padding-right: 48px !important; box-sizing: border-box !important; }
}
@media (min-width: 1500px) {
  .sg-page section:has(> .sg-hero-mobile) > div[style*="position: absolute"]:not([style*="inset: 0px"]),
  .sg-page section:has(> .sg-hero-media) > div[style*="position: absolute"]:not([style*="inset: 0px"]) { width: 40% !important; }
}
/* Filterknapparna på Swegreen i media */
.sg-filter { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 18px; border-radius: 100px; border: 1px solid rgb(33, 73, 62); color: rgba(240, 245, 243, .75) !important; text-decoration: none; }
.sg-filter[aria-current="true"] { background: rgb(80, 201, 164); border-color: rgb(80, 201, 164); color: rgb(15, 38, 32) !important; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .sg-filter:not([aria-current="true"]):hover { border-color: rgb(80, 201, 164); color: rgb(240, 245, 243) !important; } }
@media (max-width: 1023px) { .sg-filter { min-height: 44px; } }
.sg-page a[data-typ][hidden] { display: none !important; }
.sg-page [data-year][hidden], .sg-page .sg-pmlist > [id^="pm-"][hidden] { display: none !important; }
/* Sidfoten på mobil: två spalter och tätare rader (klickytan är fortfarande 44 px) */
@media (max-width: 900px) {
  .sg-page footer .sg-grid.sg-grid-3p { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 36px !important; }
  .sg-page footer .sg-grid.sg-grid-3p > div:not(:first-child) { gap: 0 !important; row-gap: 0 !important; }
  .sg-page footer .sg-grid.sg-grid-3p > div:not(:first-child) > div:first-child { margin-bottom: 6px; }
  .sg-page footer .sg-grid.sg-grid-3p > div:not(:first-child) > a.sg-taplink { min-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center; justify-content: flex-start !important; text-align: left !important; white-space: normal !important; line-height: 1.3 !important; font-size: 15px !important; }
  .sg-page footer .sg-grid.sg-grid-3p > div:first-child { gap: 16px !important; }
}
.sg-page h1, .sg-page h2, .sg-page h3 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 400px) { .sg-page h3 { overflow-wrap: anywhere; } }
/* Sidfoten på mobil: tagline under loggan visas inte */
@media (max-width: 900px) { .sg-page footer .sg-grid.sg-grid-3p > div:first-child > p { display: none !important; } }
/* Sidfotens nedersta rad på mobil: mindre text och tätare rader */
@media (max-width: 900px) {
  .sg-page footer > div.sg-stack { gap: 8px !important; row-gap: 8px !important; font-size: 13px !important; }
  .sg-page footer > div.sg-stack > span { font-size: 13px !important; }
  .sg-page footer > div.sg-stack > .sg-wrap { column-gap: 20px !important; row-gap: 0 !important; gap: 0 20px !important; }
  .sg-page footer > div.sg-stack .sg-taplink { font-size: 13px !important; min-height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center; }
}
/* Jämförelsetabeller på mobil (jämförelsesidan och Investerare): kolumnrubrikerna visas en gång överst,
   varje rad får sin rubrik i full bredd och värdena står sida vid sida under – som en vanlig jämförelse */
@media (max-width: 640px) {
  .sg-page table.sg-cardtable { display: block !important; min-width: 0 !important; width: 100% !important; }
  .sg-page table.sg-cardtable thead, .sg-page table.sg-cardtable tbody { display: block !important; }
  .sg-page table.sg-cardtable tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .sg-page table.sg-cardtable tr:has(> td:nth-of-type(4)), .sg-page table.sg-cardtable thead tr:has(> th:nth-of-type(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; }
  .sg-page table.sg-cardtable th, .sg-page table.sg-cardtable td { display: block !important; width: auto !important; min-width: 0 !important; text-align: left !important; }
  .sg-page table.sg-cardtable thead th:first-child { display: none !important; }
  .sg-page table.sg-cardtable thead th { padding: 0 8px 8px !important; font-size: 11px !important; line-height: 1.3 !important; font-weight: 500 !important; border-bottom-width: 2px !important; }
  .sg-page table.sg-cardtable tbody tr { padding: 10px 0 !important; border-bottom: 1px solid rgba(128, 160, 150, .35); }
  .sg-page table.sg-cardtable tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 0 5px !important; border: 0 !important; font-size: 13px !important; }
  .sg-page table.sg-cardtable tbody td { padding: 6px 8px !important; border: 0 !important; font-size: 11.5px !important; line-height: 1.4 !important; border-radius: 4px; }
  .sg-page table.sg-cardtable tr:has(> td:nth-of-type(4)) td { font-size: 13px !important; padding: 4px 6px !important; }
  .sg-page table.sg-cardtable td::before { content: none !important; }
  .sg-page table.sg-cardtable thead tr:has(> th:nth-of-type(5)) th { font-size: 10.5px !important; padding: 0 4px 6px !important; overflow-wrap: anywhere; hyphens: auto; }
  .sg-page table.sg-cardtable td a { display: inline !important; min-height: 0 !important; padding: 0 !important; }
}
/* Flikarna Nyheter · Pressmeddelanden · Swegreen i media: klickyta 44 px på mobil och surfplatta */
@media (max-width: 1023px) {
  .sg-page section.sg-wrap[style*="border-bottom"] > a { display: inline-flex !important; align-items: center; min-height: 44px; }
  .sg-page section.sg-wrap[style*="border-bottom"][style*="height: 62px"] { height: auto !important; min-height: 62px; column-gap: 24px !important; row-gap: 0 !important; }
}
/* Mobil: stycken i 14 px lyfts till 15 px; bildtexter och källrader i 13 px lämnas */
@media (max-width: 767px) {
  .sg-page section p[style*="font-size: 14px"], .sg-page section div p[style*="font-size: 14px"] { font-size: 15px !important; line-height: 1.55 !important; }
}
/* Liggande mobil: mindre luft ovanför första rubriken */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .sg-page > header + section { padding-top: 20px !important; }
  .sg-page > header + section h1 { font-size: 34px !important; line-height: 1.12 !important; }
}
/* Kundservice: bocklistan i en spalt och felanmälningsrutan närmare rubriken på mobil */
@media (max-width: 640px) {
  .sg-page section div.sg-grid[style*="gap: 0px 40px"], .sg-page section div[style*="gap: 0px 40px"].sg-cards-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-page section div.sg-grid[style*="gap: 0px 40px"] > div { flex-direction: row !important; align-items: baseline !important; padding: 12px 0 !important; text-align: left !important; }
}
@media (max-width: 900px) {
  .sg-page div[style*="border-top: 4px solid rgb(80, 201, 164)"][style*="margin-top: 60px"] { margin-top: 8px !important; padding: 28px !important; }
}
/* Kontakt: raden om felanmälan på mobil – rubrik, nummer och tider på var sin rad */
@media (max-width: 640px) {
  .sg-page .sg-felanm { display: flex; flex-direction: column; gap: 2px; }
  .sg-page .sg-felanm-dot { display: none; }
  .sg-page .sg-felanm-tid { font-size: 14px; }
}
/* Logotypen i sidhuvud och sidfot, på alla skärmar (minskad 10 % i export 16) */
.sg-page img.sg-logo { height: 48px !important; }
.sg-page img.sg-logo.sg-logo-foot { height: 43px !important; }
/* Delad sektion bild + text (Kundservice: Vi sköter tekniken) */
@media (max-width: 1280px) { .sg-page .sg-split > .sg-split-text { padding: 64px 48px 64px 48px !important; } }
@media (max-width: 900px) {
  .sg-page .sg-split { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-page .sg-split > .sg-split-media { min-height: 0 !important; aspect-ratio: 4 / 3; }
  .sg-page .sg-split > .sg-split-text { padding: 40px 20px 48px !important; }
  .sg-page .sg-split h2 { font-size: 32px !important; }
  .sg-page .sg-split .sg-split-text > div:last-child > div { font-size: 16px !important; padding: 12px 0 !important; }
}
/* Customer Success: teamkorten i en spalt på mobil */
@media (max-width: 640px) { .sg-page section div.sg-team1.sg-grid, .sg-page section div.sg-team1 { grid-template-columns: minmax(0, 1fr) !important; } .sg-page section div.sg-team1 > div { flex-direction: row !important; align-items: center !important; text-align: left !important; } }

/* ===================== Tillagt i export 15 – Max mobilrättningar från export 14 ===================== */

/* A. Länkar med stor tryckyta (sg-taplink) vänsterställs. Tryckytan på 44 px ligger kvar.
   Kort som själva är länkar (flex-kolumn) centrerade tidigare allt innehåll. */
@media (max-width: 900px), (pointer: coarse) {
  .sg-page .sg-taplink { justify-content: flex-start; text-align: left; column-gap: 0.4em; }
  .sg-page .sg-taplink[style*="flex-direction: column"] { align-items: stretch !important; }
  .sg-page .sg-taplink[style*="justify-content: space-between"] { justify-content: space-between; align-self: stretch; }
  .sg-page [style*="text-align: center"] > .sg-taplink, .sg-page [style*="justify-content: center"] > .sg-taplink { justify-content: center; text-align: center; }
}
/* Kontaktkort: tätare mellan namn, telefon och e-post */
@media (max-width: 900px), (pointer: coarse) {
  .sg-page div:has(> a.sg-taplink[href^="tel:"]):not(footer div) { row-gap: 2px !important; }
  .sg-page div:has(> a.sg-taplink[href^="tel:"]):not(footer div) > a.sg-taplink[href^="tel:"],
  .sg-page div:has(> a.sg-taplink[href^="tel:"]):not(footer div) > a.sg-taplink[href^="mailto:"] { min-height: 40px; }
}
/* Telefonnummer bryts aldrig */
.sg-page a[href^="tel:"] { white-space: nowrap; }

/* B. Rubriker avstavas inte mitt i ord. Brödtexten behåller avstavning. */
.sg-page h1, .sg-page h2, .sg-page h3 { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: break-word; }

/* C. Smala kort: bilden går kant i kant och paddingen minskas */
@media (max-width: 640px) {
  .sg-page .sg-cards-2 * { overflow-wrap: normal; hyphens: manual; }
  .sg-page .sg-cards-2 > *:not(:has(> img:first-child)) { padding: 16px 14px 18px !important; }
  .sg-page .sg-cards-2 h3 { font-size: 16px !important; line-height: 1.25 !important; }
  .sg-page .sg-cards-2 h3, .sg-page .sg-cards-2 span { overflow-wrap: break-word; }
  .sg-page .sg-cards-2 p, .sg-page .sg-cards-2 span[style*="line-height: 1.6"] { overflow-wrap: break-word; hyphens: auto; }
  .sg-page .sg-cards-2 > *:has(> img:first-child) { padding: 0 !important; gap: 0 !important; overflow: hidden; }
  .sg-page .sg-cards-2 > * > img:first-child { width: 100% !important; margin: 0 !important; border-radius: 0 !important; height: auto !important; aspect-ratio: 4 / 3; }
  .sg-page .sg-cards-2 > * > img:first-child[style*="object-fit: contain"] { aspect-ratio: 1 / 1; }
  .sg-page .sg-cards-2 > *:has(> img:first-child) > div { padding: 14px 14px 16px !important; gap: 6px !important; }
  .sg-page .sg-cards-2 > *:has(> img:first-child) h3 { font-size: 17px !important; line-height: 1.25 !important; }
  .sg-page .sg-cards-2 > *:has(> img:first-child) .sg-wrap { gap: 4px 10px !important; font-size: 11px !important; letter-spacing: 1.5px !important; }
  .sg-page .sg-stack:has(> h2 + .sg-wrap) { gap: 18px !important; align-items: flex-start !important; }
}

/* 3. Startsidan, Handlarna berättar: varje handlare i ett eget block */
@media (max-width: 900px) {
  .sg-page #handlarna > div.sg-grid { gap: 20px !important; }
  .sg-page #handlarna > div.sg-grid:not(.sg-grid-3p),
  .sg-page #handlarna > div.sg-grid-3p > div { background: #ffffff; border: 1px solid #e2eae6; border-radius: 8px; padding: 18px 18px 22px !important; gap: 16px !important; }
  .sg-page #handlarna > div.sg-grid:not(.sg-grid-3p) > div { gap: 14px !important; }
  .sg-page #handlarna video { border-radius: 6px; }
  .sg-page #handlarna .sg-wrap > div[style*="background: rgb(255, 255, 255)"] { background: #f0f5f3 !important; border-color: #e2eae6 !important; }
}

/* 5. Ornamentet på sektionsgränsen döljs på små skärmar */
@media (max-width: 640px) {
  .sg-page section > div[aria-hidden="true"][style*="top: -32px"] { display: none !important; }
}

/* 6. Handel, matprisgrafiken: årtal, stapel och procent på samma rad */
@media (max-width: 1280px) {
.sg-page #matpriser div[style*="grid-template-columns: 56px minmax(0px, 1fr) 64px"] { grid-template-columns: 56px minmax(0, 1fr) 64px !important; gap: 12px !important; padding: 0 !important; background: none !important; border: 0 !important; min-height: 0 !important; align-items: center !important; }
.sg-page #matpriser div[style*="grid-template-columns: 56px minmax(0px, 1fr) 64px"] > * { padding: 0 !important; }
.sg-page #matpriser div[style*="grid-template-columns: 56px minmax(0px, 1fr) 64px"] > span:last-child { white-space: nowrap; text-align: right; }
}

/* 9. Press-sidornas undermeny: en rad, scrollar i sidled vid behov */
@media (max-width: 900px) {
  .sg-page section.sg-wrap[style*="height: 62px"] { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; gap: 22px !important; align-items: stretch !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; font-size: 14px !important; }
  .sg-page section.sg-wrap[style*="height: 62px"]::-webkit-scrollbar { display: none; }
  .sg-page section.sg-wrap[style*="height: 62px"] > a { flex: 0 0 auto; display: flex !important; align-items: center; white-space: nowrap; padding: 0 !important; margin: 0 !important; border-bottom: 2px solid transparent !important; min-height: 0 !important; }
  .sg-page section.sg-wrap[style*="height: 62px"] > a[aria-current] { border-bottom-color: #50c9a4 !important; }
}

/* 10. Nyheter, årsfiltret: mellanrum mellan årtal och antal (filtret är inte längre sticky) */
@media (max-width: 900px), (pointer: coarse) { .sg-page a.sg-taplink[href^="#ar-"] { gap: 6px; } }

/* 13. Saga, odlingarna: en kolumn på mobil */
@media (max-width: 640px) {
  .sg-page #odlingar > div.sg-grid[style*="repeat(4, minmax(0px, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .sg-page #odlingar > div.sg-grid[style*="repeat(4, minmax(0px, 1fr))"] > div { padding: 0 !important; background: none !important; border: 0 !important; }
}

/* Allra smalaste mobiler: korten i en kolumn så att långa ord får plats */
@media (max-width: 360px) {
  .sg-page .sg-gap.sg-grid.sg-cards-2, .sg-page .sg-grid.sg-cards-2, .sg-page .sg-grid-3p.sg-cards-2, .sg-page .sg-cards-2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ===================== Tillagt i export 16 – Varför närodla (se/varfor.html) =====================
   Sidans egna grafiska delar: de tre korten, salladens resa, årsgrafiken, siffrorna och platskorten. */
.sg-page .sg-v-mlabel { display: none; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(240, 245, 243, .6); }
.sg-page .sg-v-mob { display: none; }
@media (max-width: 1100px) {
  .sg-page .sg-v-pillars { gap: 16px !important; }
  .sg-page .sg-v-pillars > a { padding: 24px 22px 26px !important; }
}
@media (max-width: 1024px) {
  .sg-page .sg-v-places { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-page .sg-v-jrow, .sg-page .sg-v-yrow, .sg-page .sg-v-mhead { grid-template-columns: 170px minmax(0, 1fr) !important; gap: 24px !important; }
  .sg-page .sg-v-statnum { font-size: 44px !important; }
}
@media (max-width: 900px) {
  .sg-page .sg-v-pillars { grid-template-columns: minmax(0, 1fr) !important; padding-bottom: 56px !important; }
  .sg-page .sg-v-pillars > a { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px !important; row-gap: 6px !important; align-items: start; }
  .sg-page .sg-v-pillars > a > div:first-child { grid-row: 1 / span 3; display: block !important; }
  .sg-page .sg-v-pillars > a > div:first-child > span[style*="width: 80px"] { width: 72px !important; height: 72px !important; border-radius: 36px !important; }
  .sg-page .sg-v-pillars > a > div:first-child > span[style*="width: 80px"] svg { width: 34px !important; height: 34px !important; }
  .sg-page .sg-v-pillars > a > div:first-child > span:last-child:not([style*="width: 80px"]) { display: none !important; }
  .sg-page .sg-v-jrow, .sg-page .sg-v-yrow { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .sg-page .sg-v-mhead { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-page .sg-v-mhead > :first-child { display: none !important; }
  .sg-page .sg-v-statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; }
  .sg-page .sg-v-statnum { font-size: 38px !important; }
  .sg-page .sg-v-note { margin-top: -16px !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-v-pillars { padding-bottom: 44px !important; gap: 12px !important; }
  .sg-page .sg-v-pillars > a { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px !important; padding: 20px 18px 22px !important; }
  .sg-page .sg-v-pillars > a > div:first-child > span[style*="width: 80px"] { width: 56px !important; height: 56px !important; border-radius: 28px !important; }
  .sg-page .sg-v-pillars > a > div:first-child > span[style*="width: 80px"] svg { width: 28px !important; height: 28px !important; }
  .sg-page .sg-v-pillars > a > span:nth-child(2) { font-size: 18px !important; line-height: 1.3 !important; }
  .sg-page .sg-v-pillars > a > span:nth-child(3) { font-size: 15px !important; line-height: 1.5 !important; }
  /* Salladens resa: lodrät tidslinje */
  .sg-page .sg-v-jrow { padding: 26px 0 !important; }
  .sg-page .sg-v-jrow span[style*="font-size: 26px"] { font-size: 22px !important; }
  .sg-page .sg-v-track, .sg-page .sg-v-short { width: 100% !important; }
  .sg-page .sg-v-steps { grid-template-columns: minmax(0, 1fr) !important; row-gap: 16px !important; }
  .sg-page .sg-v-steps > div { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
  .sg-page .sg-v-steps > div > span:last-child { font-size: 16px !important; padding-right: 0 !important; }
  .sg-page .sg-v-line { top: 8px !important; bottom: 8px !important; left: 7px !important; right: auto !important; width: 2px !important; height: auto !important; }
  .sg-page .sg-v-chips span { font-size: 13px !important; padding: 5px 12px !important; }
  .sg-page .sg-v-statgrid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .sg-page .sg-v-statnum { font-size: 40px !important; }
  /* Årsgrafiken: sex månader per rad med namnet under ikonen */
  .sg-page .sg-v-mhead { display: none !important; }
  .sg-page .sg-v-yrow { padding: 22px 0 !important; }
  .sg-page .sg-v-yrow span[style*="font-size: 24px"] { font-size: 21px !important; }
  .sg-page .sg-v-months { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; row-gap: 16px !important; }
  .sg-page .sg-v-months > div { gap: 6px !important; }
  .sg-page .sg-v-months svg { width: 24px !important; height: 24px !important; }
  .sg-page .sg-v-mlabel { display: block; }
  .sg-page .sg-v-bandgrid > div { grid-column: 1 / -1 !important; }
  .sg-page .sg-v-mob { display: inline; }
  .sg-page .sg-v-note { margin-top: -8px !important; }
  /* Platskorten och siffrorna */
  .sg-page .sg-v-places { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .sg-page .sg-v-places img { height: auto !important; aspect-ratio: 16 / 10; }
  .sg-page .sg-v-stats2 { gap: 22px 18px !important; }
  .sg-page .sg-v-stats2 .sg-v-statnum { font-size: 32px !important; }
}
@media (max-width: 380px) {
  .sg-page .sg-v-months { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sg-page .sg-v-stats2 { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 900px) {
  .sg-page .sg-v-pillars > a > span { grid-column: 2; }
}
@media (max-width: 640px) {
  .sg-page #vadret .sg-cards-2 { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Toppmenyn har sju länkar sedan "Varför närodla" kom till: lite tätare strax ovanför hamburgermenyn så att logotypen får plats */
.sg-header .sg-brand { flex-shrink: 0; }
@media (min-width: 1101px) and (max-width: 1260px) {
  .sg-header .sg-nav { gap: 12px !important; font-size: 13.5px !important; }
  .sg-header .sg-nav > a[style*="border-radius: 4px"] { padding: 10px 16px !important; }
  .sg-header.sg-px { padding-left: 40px !important; padding-right: 40px !important; }
}
/* Varför närodla: avsnittet om rapporten */
@media (max-width: 1024px) {
  .sg-page .sg-v-report { grid-template-columns: 260px minmax(0, 1fr) !important; gap: 48px !important; }
  .sg-page .sg-v-cover { width: 260px !important; height: auto !important; aspect-ratio: 340 / 481; }
}
@media (max-width: 900px) {
  .sg-page .sg-v-report { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .sg-page .sg-v-cover { width: 220px !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-v-cover { width: 180px !important; }
  .sg-page .sg-v-chapter { grid-template-columns: 34px minmax(0, 1fr) auto !important; gap: 12px !important; padding: 14px 0 !important; }
  .sg-page .sg-v-chapter > span:first-child { font-size: 19px !important; }
}
/* Varför närodla: rutan "Så färsk som sallad kan bli" */
.sg-page .sg-v-fresh > span:first-child { width: 64px !important; height: 64px !important; flex: 0 0 64px !important; }
@media (max-width: 640px) {
  .sg-page .sg-v-fresh { align-items: flex-start !important; gap: 16px !important; padding: 22px 20px !important; }
  .sg-page .sg-v-fresh > span:first-child { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; }
  .sg-page .sg-v-fresh > span:first-child svg { width: 24px !important; height: 24px !important; }
  .sg-page .sg-v-fresh span[style*="font-size: 30px"] { font-size: 23px !important; }
}
/* Varför närodla: "Vad säger studierna?" under Noll besprutning */
@media (max-width: 900px) {
  .sg-page .sg-v-studies { padding-bottom: 60px !important; }
  .sg-page .sg-v-studies .sg-cards-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-page .sg-v-studies .sg-cards-2 div.sg-v-statnum { font-size: 32px !important; line-height: 1.1 !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-v-studies { padding-bottom: 44px !important; }
  .sg-page .sg-v-studies h3 { font-size: 24px !important; line-height: 1.2 !important; }
  .sg-page .sg-v-studies .sg-cards-2 div.sg-v-statnum { font-size: 28px !important; line-height: 1.1 !important; }
  .sg-page .sg-v-studies article > a { font-size: 13px !important; }
}
/* Varför närodla: stående film i "Noll besprutning" */
@media (max-width: 1024px) {
  .sg-page #besprutning { grid-template-columns: 320px minmax(0, 1fr) !important; gap: 48px !important; }
  .sg-page .sg-v-tv { width: 320px !important; height: auto !important; aspect-ratio: 400 / 604; }
}
@media (max-width: 900px) {
  .sg-page #besprutning { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-page .sg-v-tv { width: min(340px, 100%) !important; max-height: none !important; justify-self: center; }
}
/* Varför närodla: "Vi har sett det här förut" (bageriet) och "Det fungerar redan" */
@media (max-width: 1024px) {
  .sg-page .sg-v-proofstats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
}
@media (max-width: 900px) {
  .sg-page .sg-v-quotebox { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .sg-page .sg-v-bakery .sg-quote, .sg-page .sg-v-quotebox .sg-quote { font-size: 21px !important; line-height: 1.4 !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-v-proofstats { gap: 20px 16px !important; }
  .sg-page .sg-v-proofstats .sg-v-statnum { font-size: 34px !important; }
  .sg-page .sg-v-btimeline span[style*="font-size: 26px"] { font-size: 22px !important; }
  .sg-page .sg-v-quotebox { padding: 24px 20px !important; }
  .sg-page .sg-v-qnums span[style*="font-size: 44px"] { font-size: 34px !important; }
  .sg-page .sg-v-bakery figure { padding: 18px 18px !important; }
}
@media (max-width: 1024px) {
  .sg-page .sg-grid-3p.sg-v-proofstats:not(.sg-grid-small) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Varför närodla: linjen under ikonraden i de tre korten visas bara när korten står i rad */
@media (max-width: 900px) {
  .sg-page .sg-v-pillars > a > div:first-child { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
}
/* Varför närodla: bilden på butiksbageriet */
@media (max-width: 900px) {
  .sg-page .sg-v-bimg { height: auto !important; aspect-ratio: 16 / 10; max-height: none !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-v-bimg { aspect-ratio: 4 / 3; }
  .sg-page .sg-v-bright { gap: 24px !important; }
}
/* Varför närodla: bageriet ombyggt – text och bild bredvid varandra, tidslinjen vågrät under */
@media (max-width: 900px) {
  .sg-page .sg-v-bimgwrap { min-height: 0 !important; aspect-ratio: 16 / 10; }
  .sg-page .sg-v-bakery .sg-v-brow > div:first-child { order: 0; }
}
@media (max-width: 640px) {
  .sg-page .sg-v-bimgwrap { aspect-ratio: 4 / 3; }
  .sg-page .sg-v-htl-steps { grid-template-columns: minmax(0, 1fr) !important; row-gap: 22px !important; }
  .sg-page .sg-v-htl-steps > div { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding-right: 0 !important; }
  .sg-page .sg-v-htl-steps > div > span:first-child { grid-row: 1 / span 2; margin-top: 4px; }
  .sg-page .sg-v-htl-steps > div > span[style*="font-size: 30px"] { font-size: 24px !important; }
  .sg-page .sg-v-htl-line { top: 12px !important; bottom: 12px !important; left: 8px !important; right: auto !important; width: 2px !important; height: auto !important; }
}
/* Varför närodla: filmen från ICA Maxi Ängelholm bredvid citatet */
@media (max-width: 900px) {
  .sg-page .sg-v-pvid { min-height: 0 !important; aspect-ratio: 16 / 10; }
  .sg-page .sg-v-quotebox { padding: 26px 24px !important; gap: 20px !important; }
}
@media (max-width: 640px) {
  .sg-page .sg-v-pvid { aspect-ratio: 4 / 3; }
  .sg-page .sg-v-qnums { gap: 28px !important; }
}
/* Varför närodla: luft mellan herofilmen och de tre korten på dator och surfplatta i liggande läge */
@media (min-width: 901px) {
  .sg-page .sg-v-pillars { padding-top: 56px !important; }
}
/* Porträtt i teamkorten (Customer Success och Kundservice) – samma runda storlek som platshållarna på alla skärmar */
.sg-page .sg-team1 .sg-pxm > img:first-child { width: 88px !important; height: 88px !important; max-width: none !important; flex: 0 0 88px !important; border-radius: 50% !important; aspect-ratio: auto !important; }
@media (max-width: 640px) {
  .sg-page .sg-team1.sg-cards-2 > *:has(> img:first-child) { padding: 16px 14px 18px !important; gap: 16px !important; overflow: visible; }
  .sg-page .sg-team1.sg-cards-2 > *:has(> img:first-child) > div { padding: 0 !important; }
}

/* ==========================================================================
   Tillagt i export 17 – Omvärld, Kundresultat, Swegreen i siffror
   ========================================================================== */
/* Bildtext som ligger över bilden flyttas under bilden på mobil */
@media (max-width: 900px) {
  .sg-page .sg-capover { position: static !important; background: none !important; padding: 18px 0 0 !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}
/* Faktatabeller: etikett och värde under varandra på mobil */
@media (max-width: 640px) {
  .sg-page .sg-grid[style*="grid-template-columns: 210px"] { gap: 2px !important; }
}

/* Export 17b: anmälningsformulär (nyhetsbrev) */
.sg-signup input[type="email"]::placeholder { color: rgba(240,245,243,0.5); }
.sg-signup input[type="email"]:focus { outline: 2px solid #50c9a4; outline-offset: 1px; border-color: #50c9a4; }
.sg-signup button:focus-visible { outline: 2px solid #50c9a4; outline-offset: 2px; }
.sg-signup button:disabled { opacity: .6; cursor: wait; }
.sg-form-status:empty { display: none; }
.sg-form-status[data-state="fel"] { color: #f2a68c !important; }
@media (max-width: 640px) { .sg-signup button { flex: 1 1 100% !important; } }


/* === logotypens storlek per brytpunkt ===
   Samma regler som ovan, med !important: loggans <img> har height i style-
   attributet, och det vinner annars över brytpunkterna.
   ===================================================================== */
@media (max-width: 1280px) { .sg-header .sg-logo { height: 42px !important; } }
@media (max-width: 640px) { .sg-header .sg-logo { height: 32px !important; } .sg-logo-foot { height: 36px !important; } }


/* === Sidans maxbredd (tillagt vid publiceringen) ===
   Sidan breddas inte längre än 2200 px på mycket breda skärmar, centrerad. */
.sg-page.sg-w { max-width: 2200px !important; margin-left: auto; margin-right: auto; }