/* Startsidan v2 (AO #7846), stil F2: Johans stil F (skogstoner, DM Sans, gul linje i sidfoten)
   i den ljusare varianten - vita ytor i stallet for sand (Johan 2026-10-31: "det blir lite val
   murrigt med mork"). Startbilden har en lattare toning an skissen av samma skal.
   Variablerna (--ss-*) ar tankta att flytta till tokens.css nar resten av shoppen foljer efter.
   Allt ar skopat under .startsida; body.helbred satts av shop.jsp nar sidan begar hel bredd. */

body.helbred #verticalMenuLeft,
body.helbred #verticalMenuRight { display: none; }
body.helbred #iframe { width: 100%; }

.startsida {
  --ss-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ss-bg: #ffffff; --ss-yta: #f3f4f0; --ss-kort: #ffffff; --ss-text: #1c2420; --ss-dov: #5f6a63; --ss-linje: #e4e6e0;
  --ss-accent: #2f6a4f; --ss-accent-text: #ffffff; --ss-accent-mjuk: #e2ebe4; --ss-gul: #FFC600; --ss-mork: #1f3a2e;
  --ss-fore: #a5502a; --ss-ber: #8a948e; --ss-efter: #2f6a4f; --ss-krav: #6b7280;
  --ss-radie: 10px; --ss-max: min(1400px, calc(100vw - 32px)); --ss-skugga: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
  font: 16px/1.55 var(--ss-font);
  color: var(--ss-text);
  background: var(--ss-bg);
  margin: 0;
}
.startsida *, .startsida *::before, .startsida *::after { box-sizing: border-box; }
.startsida h1, .startsida h2, .startsida h3 { font-family: var(--ss-font); line-height: 1.15; margin: 0 0 .4em; color: inherit; text-wrap: balance; }
.startsida h2 { font-size: 1.45rem; }
.startsida a { color: inherit; }
.startsida img { max-width: 100%; display: block; }
.ss-dov { color: var(--ss-dov); }
.ss-inre { max-width: var(--ss-max); margin: 0 auto; padding: 0 16px; }
.ss-sektion { max-width: var(--ss-max); margin: 0 auto; padding: 32px 16px 0; }

/* Formansraden */
.ss-formaner { background: var(--ss-mork); color: #e6ece8; font-size: .8rem; }
.ss-formaner .ss-inre { display: flex; gap: 6px 22px; overflow-x: auto; white-space: nowrap; padding-top: 7px; padding-bottom: 7px; scrollbar-width: none; }
.ss-formaner span::before { content: "✓ "; color: var(--ss-gul); }

/* Startbilden = ett riktigt rum */
.ss-hero { position: relative; color: #fff; background: #2a2f2c; }
.ss-hero img { width: 100%; height: 62vh; min-height: 340px; max-height: 620px; object-fit: cover; }
.ss-hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 0 24px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.58) 60%); }
.ss-hero .ss-lok { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; color: #fff; }
.ss-hero h1, .ss-hero .ss-hero-titel { font-size: clamp(1.7rem, 4.6vw, 2.7rem); max-width: 22ch; margin: .2em 0 .25em; color: #fff; }
/* AO #7857 (A2): H1 säger vad shoppen är; referensens namn står som rubriktext (ss-hero-titel), inte som H1. */
.ss-hero .ss-hero-titel { font-family: var(--sf-font, inherit); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.ss-hero h1.ss-h1 { font-size: .95rem; font-weight: 600; max-width: none; margin: 0 0 .5em; letter-spacing: .01em; }
.ss-siffror { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ss-siffror .ss-f { font-size: 1.4rem; font-weight: 700; opacity: .85; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,.6); }
.ss-siffror .ss-e { font-size: 2.2rem; font-weight: 700; color: #fff; }
.ss-siffror .ss-k { font-size: .85rem; border: 1px dashed rgba(255,255,255,.7); border-radius: 6px; padding: 1px 7px; }
.ss-hero p { margin: .4em 0 0; opacity: .95; max-width: 60ch; }
.ss-rad { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.ss-stampel { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 5px 10px; }
.ss-stampel::before { content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ss-gul); color: #1c2420; font-size: .7rem; }
.ss-bildtext { display: inline-block; margin-top: 10px; font-size: .85rem; color: #fff !important; opacity: .9; }
.ss-hero-utan { background: var(--ss-accent); }
.ss-hero-utan .ss-hero-text { position: static; padding: 40px 0; background: none; }

/* Knappar */
.ss-knappar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ss-knapp { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--ss-accent); color: var(--ss-accent-text) !important; text-decoration: none; font-weight: 600; }
.ss-knapp.ss-ljus { background: transparent; color: var(--ss-text) !important; border: 1px solid currentColor; }
.ss-knapp.ss-vit { background: #fff; color: var(--ss-text) !important; }

/* Helheten */
.ss-helhet { display: grid; gap: 10px; }
.ss-helhet div { background: var(--ss-kort); border: 1px solid var(--ss-linje); border-radius: var(--ss-radie); padding: 14px 16px; }
.ss-helhet div::before { content: ""; display: block; width: 28px; height: 3px; background: var(--ss-gul); border-radius: 2px; margin-bottom: 10px; }
.ss-helhet b { display: block; margin-bottom: 2px; }
.ss-helhet small { color: var(--ss-dov); }

/* Vad vill du losa? - tre spar */
.ss-spar { display: grid; gap: 14px; }
.ss-spar h3 { margin: 0 0 8px; color: var(--ss-dov); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.ss-ingangar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-ingang { display: flex; flex-direction: column; gap: 4px; min-height: 104px; padding: 14px; border-radius: var(--ss-radie); background: var(--ss-yta); text-decoration: none; border: 1px solid transparent; }
.ss-ingang:hover, .ss-ingang:focus-visible { border-color: var(--ss-accent); outline: none; }
.ss-ingang strong { line-height: 1.25; }
.ss-ingang small { color: var(--ss-dov); font-size: .8rem; }
.ss-ingang .ss-typ { margin-top: auto; padding-top: 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-accent); font-weight: 700; }
.ss-ingang .ss-typ.ss-rad-forst { color: #8a5a00; }

/* Osaker? - tva erbjudanden */
.ss-erbjud { display: grid; gap: 12px; }
.ss-erbjud > a { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--ss-accent-mjuk); border-radius: var(--ss-radie); padding: 14px; text-decoration: none; }
.ss-erbjud-ikon { width: 64px; height: 64px; display: grid; place-items: center; font-size: 1.9rem; background: var(--ss-kort); border-radius: 12px; color: var(--ss-accent); }
.ss-erbjud strong { display: block; font-size: 1.05rem; }
.ss-erbjud small { color: var(--ss-dov); display: block; margin: 2px 0 8px; }
.ss-erbjud .ss-kn { font-size: .9rem; font-weight: 700; color: var(--ss-accent); }
.ss-kampanj { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; background: var(--ss-kort); color: var(--ss-text); border: 1px solid var(--ss-linje); border-left: 4px solid var(--ss-gul); border-radius: 10px; font-weight: 600; }
.ss-kampanj a { font-weight: 700; white-space: nowrap; }

/* Direktvagar */
.ss-antalrad { font-size: .95rem; color: var(--ss-dov); margin: 0 0 10px; }
.ss-antalrad b { color: var(--ss-text); font-size: 1.3rem; }
.ss-marken { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-marke { position: relative; border-radius: var(--ss-radie); overflow: hidden; text-decoration: none; color: #fff; aspect-ratio: 4 / 3; background: var(--ss-mork); }
.ss-marke img { width: 100%; height: 100%; object-fit: cover; }
.ss-marke span { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 12px 12px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7)); }
.ss-marke strong { display: block; font-size: 1.15rem; }
.ss-marke small { opacity: .9; }
.ss-grupprubrik { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ss-dov); margin: 18px 0 8px; display: flex; justify-content: space-between; gap: 10px; }
.ss-grupprubrik a { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ss-accent); text-decoration: none; }
.ss-vagar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ss-chip { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ss-linje); border-radius: 999px; text-decoration: none; white-space: nowrap; background: var(--ss-kort); font-size: .95rem; }
.ss-chip:hover, .ss-chip:focus-visible { border-color: var(--ss-accent); outline: none; }
.ss-chip .ss-antal { font-size: .78rem; color: var(--ss-dov); background: var(--ss-yta); border-radius: 999px; padding: 1px 8px; }

/* Referenser */
.ss-forklaring { font-size: .82rem; color: var(--ss-dov); margin: -.2em 0 12px; }
.ss-fore { color: var(--ss-fore); font-weight: 700; } .ss-ber { color: var(--ss-ber); font-weight: 700; } .ss-efter { color: var(--ss-efter); font-weight: 700; } .ss-krav { color: var(--ss-krav); font-weight: 700; }
.ss-refs { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
/* Korten ar den gemensamma komponenten .rk-ref (Referenskort.java, webshop.css) sedan AO #7851 uppdrag 2;
   har bara det som hor till raden: snappningen och startsidans skugga. */
.ss-refs > .rk-ref { scroll-snap-align: start; box-shadow: var(--ss-skugga); border-radius: var(--ss-radie); }
.ss-lok { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ss-accent); }
.ss-fortroende { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 16px; color: var(--ss-dov); }
.ss-fortroende strong { color: var(--ss-text); font-size: 1.15rem; }
.ss-fortroende a { margin-left: auto; }

/* Kontakt + gul linje mot sidfoten (Absoflex grafiska profil, PMS 7548C) */
.ss-kontakt { display: grid; gap: 12px; padding-bottom: 32px; border-bottom: 3px solid var(--ss-gul); }

@media (min-width: 900px) {
  .ss-hero-text { padding: 36px 0 44px; }
  .ss-helhet { grid-template-columns: repeat(4, 1fr); }
  .ss-spar { grid-template-columns: 1.6fr 1fr 1.3fr; }
  .ss-ingangar { gap: 12px; }
  .ss-spar > div:nth-child(2) .ss-ingangar { grid-template-columns: 1fr; }
  .ss-ingang { min-height: 128px; padding: 18px; }
  .ss-erbjud { grid-template-columns: 1fr 1fr; }
  .ss-marken { grid-template-columns: 1fr 1fr; }
  .ss-marke { aspect-ratio: 2 / 1; }
  .ss-refs { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .ss-kontakt { grid-template-columns: 2fr 1fr; align-items: center; }
  .ss-sektion { padding-top: 48px; }
  .startsida h2 { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) { .ss-refs { scroll-snap-type: none; } }

/* Om oss (omoss.jsp) */
.ss-omoss { max-width: 760px; }
.ss-omoss h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-top: 8px; }
.ss-omoss h2 { margin-top: 28px; }
.ss-ingress { font-size: 1.15rem; }

/* "Sa har arbetar vi" - anvands av omoss.jsp (startsidan sjalv har helhetsblocket i stallet sedan v2) */
.ss-steg { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: s; }
.ss-steg li { background: var(--ss-yta); border-radius: var(--ss-radie); padding: 14px 16px; counter-increment: s; display: grid; gap: 2px; }
.ss-steg li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-accent); color: var(--ss-accent-text); font-weight: 700; margin-bottom: 4px; }
.ss-steg span { color: var(--ss-dov); }
@media (min-width: 900px) { .ss-steg { grid-template-columns: repeat(4, 1fr); } }

/* Förmånsradens länker (leveranstid, garanti -> villkor.jsp) */
.ss-formaner a { color: inherit; text-decoration: none; }
.ss-formaner a:hover { text-decoration: underline; }

/* AO #7853 uppdrag 8-9: ingångarna i ett jämnt rutnät med lika höjd, och erbjudandena utan ikoner. */
.ss-ingangar-jamn { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }   /* två per rad på mobil, som förut */
@media (min-width: 900px) { .ss-ingangar-jamn { grid-template-columns: repeat(3, 1fr); } }
.ss-erbjud > a { grid-template-columns: 1fr; }
.ss-steg li b { font-size: 1.02rem; }
.ss-steg li { align-content: start; }   /* rubrikerna i höjd även när texterna är olika långa */
/* Johan 2026-11-05: "syns inte texterna ... det blir ingen kontrast". base.css a:link/a:visited { color } vann
   over .ss-marke, sa texten blev morkt mot den morka toningen. Vit text, starkare toning och en skugga. */
a.ss-marke:link, a.ss-marke:visited, a.ss-marke:hover { color: #fff; }
.ss-marke span { background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.55) 35%, rgba(0,0,0,.8) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.ss-marke strong, .ss-marke small { color: #fff; }
/* Smal skarm: rutan ar ~165 px bred och texten bryts pa tre rader - staende ruta och mindre text sa att bilden syns. */
@media (max-width: 599px) {
  .ss-marke { aspect-ratio: 3 / 4; }
  .ss-marke span { padding: 28px 10px 10px; }
  .ss-marke strong { font-size: 1.05rem; }
  .ss-marke small { font-size: .8rem; line-height: 1.3; display: block; }
}