/* Konekeskus Mikola – etusivu

   Selkeä rytmi:
   - Kaikki osiot ovat samassa sisältöleveydessä (--leveys) ja samassa kahden
     puolikkaan ruudukossa (--rako). Mikään ei jatku sisältöreunan yli heroa ja
     alatunnistetta lukuun ottamatta.
   - Jako-osio on sivun perusosa: kaikki teksti toisessa puolikkaassa, kuva toisessa.
     Kuvan puoli vuorottelee (Tervetuloa oikea, Husqvarna vasen, Huolto oikea).
   - Kuvat 4:3 jako-osioissa ja tuotekorteissa, sama pieni kulma kaikissa.
   - Sama pystyväli (--vali) jokaisessa osiossa. Peräkkäiset valkoiset osiot eivät
     tuplaa väliä.
   - Taustat: tumma hero, valkoinen sivu, Husqvarna ainoana tummana osiona ja tumma
     alatunniste. Ei laatikoita osioiden ympärillä eikä irrallisia muotoja.
   - Painikkeet suorakulmaiset (2 px kulma): oranssi ensisijainen, reunaviiva
     toissijainen, tekstilinkki kolmas taso.
   Tekstit vanhalta etusivulta, herossa uusi teksti. Mobiili ensin. */

:root {
  --sininen: #273a60;        /* Husqvarnan sininen */
  --sininen-tumma: #1c2b49;
  --oranssi: #cf4a0e;        /* Ota yhteyttä (valkoinen teksti 4,5:1) */
  --oranssi-tumma: #b13d09;
  --vihrea: #71bf44;         /* Mikolan logon vihreä: viivoissa ja merkeissä, ei tekstinä valkoisella */
  --muste: #141821;
  --teksti: #2b303a;
  --harmaa: #5b6170;
  --viiva: #dcdcd6;
  --vaalea: #f0f0ec;         /* tuotekuvien tausta */

  --leveys: 1320px;          /* ylätunnisteen ja kaikkien osioiden sisältöleveys */
  --palsta: 38rem;           /* tekstipalsta */
  --rako: 40px;              /* palstaväli */
  --reuna: 20px;             /* sisältöreuna puhelimessa */
  --yla: 64px;
  --pikapalkki: 60px;
  --vali: 72px;              /* osioiden pystyväli */
  --kulma: 2px;              /* painikkeet ja tuoteruudut */
  --kuvakulma: 4px;          /* kuvat */
  --h2: clamp(2.125rem, 1.5rem + 2vw, 3.125rem);
}
@media (min-width: 700px) {
  :root { --reuna: 32px; --yla: 76px; --vali: 96px; }
}
@media (min-width: 1024px) {
  :root { --reuna: 48px; --rako: 56px; --yla: 84px; --vali: 128px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.valikko-auki { overflow: hidden; }

body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--teksti);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--pikapalkki) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { body { font-size: 1.125rem; padding-bottom: 0; } }

h1, h2, h3 {
  margin: 0;
  color: inherit;
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
address { font-style: normal; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
.nw { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--sininen); outline-offset: 3px; border-radius: var(--kulma); }
.yla :focus-visible,
.hero :focus-visible,
.husq :focus-visible,
.ala :focus-visible { outline-color: #fff; }
.yla.on-vieritetty:not(.on-auki) :focus-visible { outline-color: var(--sininen); }

[id] { scroll-margin-top: var(--yla); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.ohita {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--sininen);
  color: #fff;
  font-weight: 700;
}
.ohita:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kuvake {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Yksi sisältöleveys kaikkialla */
.sisalto {
  width: 100%;
  max-width: calc(var(--leveys) + 2 * var(--reuna));
  margin-inline: auto;
  padding-inline: var(--reuna);
}

.osio { padding-block: var(--vali); }
.osio:not(.husq) + .osio:not(.husq) { padding-top: 0; }
.osio__otsikko {
  margin-bottom: 40px;
  color: var(--sininen);
  font-size: var(--h2);
}
.johdanto { color: var(--muste); font-size: 1.1875rem; line-height: 1.5; }
@media (min-width: 1024px) { .johdanto { font-size: 1.3125rem; } }

/* Nimiö: normaalikirjaimin, ei versaalia. Käytössä vain Huolto-otsikon yllä ja logorivissä. */
.linja {
  margin: 0 0 12px;
  color: var(--harmaa);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Painikkeet ja linkit: suorakulmaiset, 2 px kulma, normaali kirjainkoko.
   Oranssi = ensisijainen, reunaviiva = toissijainen, tekstilinkki = kolmas taso.
   -------------------------------------------------------------------------- */
.napit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 32px;
}
.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--kulma);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.25s, visibility 0.25s;
}
@media (min-width: 700px) { .nappi { min-height: 52px; padding: 12px 24px; font-size: 1.0625rem; } }
.nappi--reuna { border-color: currentColor; color: inherit; }
.nappi--reuna:hover { background: #fff; border-color: #fff; color: var(--sininen); }
.nappi--reuna-sininen { border-color: var(--sininen); color: var(--sininen); }
.nappi--reuna-sininen:hover { background: var(--sininen); color: #fff; }
.nappi--valkoinen { background: #fff; border-color: #fff; color: var(--sininen); }
.nappi--valkoinen:hover { background: var(--vaalea); border-color: var(--vaalea); }
.nappi--oranssi { background: var(--oranssi); border-color: var(--oranssi); color: #fff; }
.nappi--oranssi:hover { background: var(--oranssi-tumma); border-color: var(--oranssi-tumma); }

.tekstilinkki {
  display: inline-block;
  padding-block: 6px;
  color: var(--sininen);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(39, 58, 96, 0.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.tekstilinkki:hover { text-decoration-color: currentColor; }
.linkit { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }

/* --------------------------------------------------------------------------
   Ylätunniste: läpinäkyvä heron päällä, valkoinen vieritettäessä.
   Ei puhelinnumeroa: soittaminen on puhelimen pikapalkissa.
   Ilman JavaScriptia ylätunniste jää heron yläreunaan (absolute), jotta
   valkoinen teksti ei koskaan jää valkoisen osion päälle.
   -------------------------------------------------------------------------- */
.yla {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--yla);
  color: #fff;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.js .yla { position: fixed; }
.yla::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 160px;
  background: linear-gradient(rgba(8, 12, 20, 0.6), rgba(8, 12, 20, 0));
  pointer-events: none;
  transition: opacity 0.25s;
}
.yla.on-vieritetty {
  background: #fff;
  color: var(--muste);
  box-shadow: 0 1px 0 var(--viiva);     /* 1 px viiva, ei varjo */
}
.yla.on-vieritetty::before,
.yla.on-auki::before { opacity: 0; }
.yla.on-auki { background: var(--sininen); color: #fff; box-shadow: none; }

.yla__rivi { display: flex; align-items: center; gap: 16px; height: 100%; }
.yla__logo { margin-right: auto; }
.yla__logo img { width: auto; height: 28px; }
.yla__logo-tumma { display: none; }
.yla.on-vieritetty:not(.on-auki) .yla__logo-valkoinen { display: none; }
.yla.on-vieritetty:not(.on-auki) .yla__logo-tumma { display: block; }

.yla__valikkonappi {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.yla__viivat,
.yla__viivat::before,
.yla__viivat::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s, background-color 0.2s;
}
.yla__viivat { position: relative; }
.yla__viivat::before,
.yla__viivat::after { content: ""; position: absolute; left: 0; }
.yla__viivat::before { top: -8px; }
.yla__viivat::after { top: 8px; }
.yla.on-auki .yla__viivat { background: transparent; }
.yla.on-auki .yla__viivat::before { transform: translateY(8px) rotate(45deg); }
.yla.on-auki .yla__viivat::after { transform: translateY(-8px) rotate(-45deg); }

/* Mobiilivalikko: koko näytön sininen paneeli, kaikki vanhan valikon sivut */
.valikko { display: none; }
.yla.on-auki .valikko {
  position: fixed;
  inset: var(--yla) 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 12px var(--reuna) 48px;
  overflow-y: auto;
  background: var(--sininen);
}
.valikko ul { margin: 0; padding: 0; list-style: none; }
.yla.on-auki .valikko li a {
  display: block;
  padding: 4px 0;
  color: #fff;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}
.valikko__napit { display: flex; flex-wrap: wrap; gap: 12px; }
.valikko__yhteys { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 1rem; }

@media (min-width: 1240px) {
  .yla__logo img { height: 36px; }
  .yla__valikkonappi { display: none; }
  .valikko { display: flex; align-items: center; gap: 32px; }
  .valikko ul { display: flex; gap: 24px; }
  .valikko .valikko__lisa { display: none; }
  .valikko li a {
    display: block;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    font-size: 0.96875rem;
    font-weight: 600;
    text-decoration: none;
  }
  .valikko li a:hover { border-bottom-color: currentColor; }
  .valikko__napit { align-items: center; }
  .valikko__napit .nappi { min-height: 44px; padding: 9px 18px; font-size: 0.96875rem; }
  .valikko__yhteys { display: none; }
  /* Heron päällä vain heron oma oranssi painike on näkyvissä. Ylätunnisteen
     Ota yhteyttä liukuu esiin, kun sivua vieritetään. Piilossa se ei vie tilaa,
     joten ylätunnisteen oikea reuna osuu aina sisältöreunaan. */
  .valikko__napit .nappi--oranssi {
    max-width: 14em;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s, padding 0.3s, margin 0.3s, border-width 0.3s,
      opacity 0.25s, visibility 0.25s, background-color 0.2s, border-color 0.2s;
  }
  .yla:not(.on-vieritetty) .valikko__napit .nappi--oranssi {
    max-width: 0;
    margin-left: -12px;        /* kumoaa painikkeiden välin */
    padding-inline: 0;
    border-width: 0;
    visibility: hidden;
    opacity: 0;
  }
  /* Valkoisessa ylätunnisteessa toissijainen painike sinisenä */
  .yla.on-vieritetty .nappi--reuna { border-color: var(--sininen); color: var(--sininen); }
  .yla.on-vieritetty .nappi--reuna:hover { background: var(--sininen); border-color: var(--sininen); color: #fff; }
}


/* --------------------------------------------------------------------------
   1. Hero: koko näytön panoraama. Toimipisteen kuvat vaihtuvat häivyttäen
   (main.js), ja näkyvissä oleva kuva liukuu hitaasti sivuttain. Teksti ja
   toiminnot vasemmassa alakulmassa, pieni kuvailmaisin oikeassa alakulmassa.
   Tummennus vain alhaalta tekstin takaa, joten kuvan yläosa jää kirkkaaksi.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: calc(100svh - var(--pikapalkki));
  overflow: hidden;
  background: var(--muste);
  color: #fff;
}
.hero__kuvat { position: absolute; inset: 0; z-index: -2; }
.hero__dia { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero__dia.on-esilla { opacity: 1; }
.hero__dia img { width: 100%; height: 100%; object-fit: cover; }
/* Pystykuva (puhelin, pystytabletti) rajautuu alhaalta: kuvan yläosa jää tekstin yläpuolelle */
@media (orientation: portrait) { .hero__dia img { object-position: 50% 0%; transform-origin: 50% 0%; } }

/* Panoraama: näkyvä kuva liukuu noin 5 % leveydestään vaihdon aikana, joka toinen
   kuva vastakkaiseen suuntaan. Lähtevä kuva jatkaa liukuaan häivytyksen ajan
   (main.js: on-lahtee). Pysähtyy taukopainikkeesta, eikä liikettä ole lainkaan,
   jos käyttäjä on pyytänyt vähemmän liikettä. */
@media (prefers-reduced-motion: no-preference) {
  .hero__dia img { transform: scale(1.08); }
  .hero__dia.on-esilla img,
  .hero__dia.on-lahtee img { animation: liuku 11s linear both; }
  .hero__dia:nth-child(even).on-esilla img,
  .hero__dia:nth-child(even).on-lahtee img { animation-name: liuku-takaisin; }
  .hero.on-pysaytetty .hero__dia img { animation-play-state: paused; }
}
@keyframes liuku {
  from { transform: scale(1.08) translateX(2.4%); }
  to { transform: scale(1.08) translateX(-2.4%); }
}
@keyframes liuku-takaisin {
  from { transform: scale(1.08) translateX(-2.4%); }
  to { transform: scale(1.08) translateX(2.4%); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(14, 21, 36, 0.92) 0%,
      rgba(14, 21, 36, 0.8) 34%,
      rgba(14, 21, 36, 0.5) 56%,
      rgba(14, 21, 36, 0) 76%);
}

.hero__sisalto {
  display: grid;
  align-content: end;
  row-gap: 24px;
  padding-block: calc(var(--yla) + 32px) clamp(24px, 5vh, 48px);
}
.hero__teksti { max-width: 60rem; }

/* H1 on yksi lause: alku isona, loppu pienempänä rivinä */
.hero__h1 { margin: 0; font: inherit; }
.hero__h1-iso {
  display: block;
  max-width: 11.5em;
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-size: clamp(2.75rem, 1.4rem + 4.7vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.94;
  text-wrap: balance;
}
.hero__h1-pieni {
  display: block;
  margin-top: 14px;
  font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}
.hero__h1-pieni::first-letter { text-transform: uppercase; }
.hero__kuvaus {
  max-width: 36rem;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
}

.hero .napit { gap: 12px 28px; margin-top: 26px; }
.hero__linkki {
  display: inline-block;
  padding-block: 10px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.hero__linkki:hover { text-decoration-color: #fff; }
/* Kapeassa puhelimessa painike ja kampanjalinkki mahtuvat samalle riville (360 px) */
@media (max-width: 479px) {
  .hero .napit { column-gap: 16px; }
  .hero .nappi { padding-inline: 16px; }
  .hero__linkki { font-size: 0.9375rem; }
}

/* Kuvailmaisin: lyhyet viivat ja taukopainike oikeassa alakulmassa, nykyinen kuva
   Mikolan vihreällä. Ei kuvien nimiä: kuvat puhuvat puolestaan. */
.hero__ohjaus {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* Tila varataan jo ennen kuin main.js näyttää ilmaisimen, jotta sisältö ei hyppää */
.hero__ohjaus[hidden] { display: flex; visibility: hidden; }
.hero__pisteet { display: flex; gap: 4px; }
.hero__pisteet span {
  width: 20px;
  height: 3px;
  background: rgba(255, 255, 255, 0.38);
  transition: background-color 0.4s;
}
.hero__pisteet span.on-esilla { background: var(--vihrea); }
.hero__tauko {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--kulma);
  background: none;
  color: #fff;
  cursor: pointer;
}
.hero__tauko:hover { background: rgba(255, 255, 255, 0.14); }
.hero__tauko::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.hero__tauko.on-pysaytetty::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

@media (min-width: 700px) {
  .hero__pisteet span { width: 28px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 100svh; }
  .hero::after {
    background:
      linear-gradient(to top,
        rgba(14, 21, 36, 0.88) 0%,
        rgba(14, 21, 36, 0.72) 30%,
        rgba(14, 21, 36, 0.46) 54%,
        rgba(14, 21, 36, 0.12) 68%,
        rgba(14, 21, 36, 0) 78%);
  }
  /* Teksti vasemmalla, ilmaisin oikealla painikerivin korkeudella */
  .hero__sisalto {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--rako);
    padding-block: calc(var(--yla) + 48px) clamp(48px, 9vh, 96px);
  }
  .hero__h1-pieni { margin-top: 18px; }
  .hero__kuvaus { margin-top: 12px; }
  .hero .napit { margin-top: 32px; }
  .hero__ohjaus { gap: 14px; padding-bottom: 6px; }
  .hero__pisteet span { width: 40px; }
}
/* Matala puhelin (esim. 375 × 667): tiiviimpi sisältö, jotta kuvan yläosa jää näkyviin */
@media (max-width: 699px) and (max-height: 760px) {
  .hero__sisalto { padding-top: calc(var(--yla) + 16px); }
  .hero__h1-iso { font-size: 2.5rem; }
  .hero__h1-pieni { margin-top: 10px; font-size: 1.0625rem; }
  .hero__kuvaus { display: none; }
  .hero .napit { margin-top: 20px; }
  .hero__sisalto { row-gap: 16px; }
}
/* Vaakapuhelin: teksti täyttää matalan näkymän, joten tummennus myös vasemmalta */
@media (orientation: landscape) and (max-height: 520px) {
  .hero::after {
    background:
      linear-gradient(to top, rgba(14, 21, 36, 0.86) 0%, rgba(14, 21, 36, 0.4) 60%, rgba(14, 21, 36, 0.2) 100%),
      linear-gradient(to right, rgba(14, 21, 36, 0.7) 0%, rgba(14, 21, 36, 0.35) 55%, rgba(14, 21, 36, 0) 80%);
  }
  .hero__kuvaus { display: none; }
  /* Otsikko ja toiminnot mahtuvat pikapalkin yläpuolelle. Ylätunnisteen tummennus
     vain ylätunnisteen korkuisena, jotta se ei himmennä otsikon ylintä riviä. */
  .yla::before { height: var(--yla); }
  .hero__sisalto { row-gap: 12px; padding-top: calc(var(--yla) + 8px); }
  .hero__h1-iso { font-size: 2.5rem; }
  .hero__h1-pieni { margin-top: 8px; font-size: 1.125rem; }
  .hero .napit { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   2. Edustamiamme toimittajia: logorivi heti heron alla. Otsikko on ruudukon
   ensimmäinen solu, logot omissa väreissään.
   -------------------------------------------------------------------------- */
.merkit { padding-top: 32px; }
.merkit__ruudukko {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
}
.merkit .linja {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  margin: 0;
  color: var(--harmaa);
}
.merkit__lista {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / span 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.merkit__lista li:first-child { grid-column-start: 2; }
.merkit__lista li { display: flex; align-items: center; min-height: 72px; }
.merkit__lista a { display: flex; align-items: center; height: 100%; }
/* Logot tasataan optisesti: korkeus on perusmitta kertaa --k (index.html).
   Kerroin on laskettu kuvasuhteesta (leveä logo matalampi) ja tasattu logon
   täyteläisyyden mukaan. Pienet lähdekuvat (MTD, Solis) eivät suurene. */
.merkit__lista { --logo: 26px; }
.merkit__lista img {
  width: auto;
  max-width: 100%;
  height: calc(var(--k, 1) * var(--logo));
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.2s;
}
.merkit__lista a:hover img { opacity: 0.7; }
@media (min-width: 700px) {
  .merkit__ruudukko { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .merkit__lista { --logo: 30px; grid-row: 1 / span 3; }
}
@media (min-width: 1024px) {
  .merkit { padding-top: 44px; }
  .merkit__ruudukko { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--rako); }
  .merkit__lista { --logo: 34px; grid-row: 1 / span 2; }
  .merkit__lista li { min-height: 88px; }
}

/* --------------------------------------------------------------------------
   Jako: sivun perusosa. Kaksi yhtä leveää puolikasta samassa sisältöleveydessä,
   kaikki teksti toisessa ja kuva toisessa. Puhelimessa kuva ensin, teksti alla.
   -------------------------------------------------------------------------- */
.jako { display: grid; row-gap: 32px; }
.jako__kuva { order: -1; }
.jako__kuva img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--kuvakulma); }
.jako h2 {
  margin-bottom: 20px;
  color: var(--sininen);
  font-size: var(--h2);
  line-height: 1;
  text-wrap: balance;
}
/* Väliotsikko leipätekstin fontilla, jotta se ei kilpaile pääotsikon kanssa */
.jako h3 {
  margin: 28px 0 8px;
  color: var(--muste);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}
.jako .johdanto a {
  color: var(--sininen);
  font-weight: 600;
  text-decoration-color: rgba(39, 58, 96, 0.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.jako .johdanto a:hover { text-decoration-color: currentColor; }
@media (min-width: 700px) { .jako { row-gap: 40px; } }
@media (min-width: 1024px) {
  .jako { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rako); align-items: center; }
  .jako__kuva { order: 0; }
  .jako--kuva-vasemmalla .jako__kuva { order: -1; }
}

/* --------------------------------------------------------------------------
   3. Tervetuloa: yhteystiedot riveinä kuin käyntikortissa. Nimiö vasemmalla,
   tieto oikealla, kaikki tiedot samalla tyylillä. Ei viivoja. Numeron alla
   pienellä, mitä numero koskee.
   -------------------------------------------------------------------------- */
.yhteys { container-type: inline-size; display: grid; gap: 10px; margin: 28px 0 0; }
.yhteys > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
}
.yhteys dt { color: var(--harmaa); font-size: 0.9375rem; font-weight: 600; }
.yhteys dd { margin: 0; color: var(--muste); font-weight: 600; line-height: 1.45; }
.yhteys a {
  color: var(--sininen);
  overflow-wrap: anywhere;
  text-decoration: none;
}
.yhteys a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
/* Numerot allekkain, ja rinnakkain vain, kun ne mahtuvat samalle riville */
.yhteys__selite { display: block; color: var(--harmaa); font-size: 0.9375rem; font-weight: 500; }
.yhteys__numerot { display: flex; flex-direction: column; }
.yhteys__numerot a { white-space: nowrap; }
@container (min-width: 400px) {
  .yhteys__numerot { flex-direction: row; gap: 20px; }
}
#yhteystiedot .napit { margin-top: 32px; }

/* --------------------------------------------------------------------------
   4. Husqvarna: sivun ainoa tumma osio, koko leveydeltä. Kuva vasemmalla,
   teksti ja linkkilista oikealla, tuoteryhmät alla samassa ruudukossa.
   -------------------------------------------------------------------------- */
.husq { background: var(--sininen); color: #fff; }
.husq h2 { margin-bottom: 24px; color: #fff; }
.husq__merkki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 20px;
}
.husq__logo { width: 150px; }
.husq__merkki p { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; font-weight: 500; }
.husq .napit { gap: 12px 28px; margin-top: 28px; }
.husq .tekstilinkki { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.husq .tekstilinkki:hover { text-decoration-color: #fff; }

/* Linkkilista: rivit ohuiden viivojen välissä, nuoli oikeassa reunassa */
.linkkilista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.linkkilista li { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.linkkilista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-block: 12px;
  color: #fff;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.linkkilista a span { flex: none; }
.linkkilista a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* Tuoteryhmät: valkoiset tuoteruudut. Puhelimessa sivuttain vieritettävä rivi. */
.tuoteruudukko {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  gap: 12px;
  margin: 48px calc(-1 * var(--reuna)) 0;
  padding: 0 var(--reuna) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--reuna);
  scrollbar-width: none;
  list-style: none;
}
.tuoteruudukko::-webkit-scrollbar { display: none; }
.tuoteruudukko li { scroll-snap-align: start; }
.tuoteruudukko a {
  display: block;
  height: 100%;
  padding: 10px 14px 16px;
  border-radius: var(--kulma);
  background: #fff;
  color: var(--sininen);
  text-decoration: none;
}
.tuoteruudukko img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; transition: transform 0.3s ease; }
.tuoteruudukko a > span {
  display: block;
  margin-top: 4px;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}
/* Nuoli Barlow-piirroksella (tiiviissä kirjaimistossa ↗ on pitkä ja ohut) */
.tuoteruudukko a > span > span { font-family: "Barlow", system-ui, sans-serif; font-size: 0.85em; font-weight: 600; }
.tuoteruudukko a:hover img { transform: scale(1.03); }
.tuoteruudukko a:hover > span { text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 700px) { .tuoteruudukko { grid-auto-columns: 30%; } }
@media (min-width: 1024px) {
  .husq__logo { width: 176px; }
  /* Neljä palstaa samalla välillä kuin puolikkaat, joten ruudut linjautuvat jako-osioiden kanssa */
  .tuoteruudukko {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rako);
    margin: 80px 0 0;
    padding: 0;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   5. Huolto: jako-osio, teksti vasemmalla ja korjaamokuva oikealla
   -------------------------------------------------------------------------- */
#huolto .jako__kuva img { object-position: 50% 55%; }
#huolto .napit { margin-top: 28px; }
#huolto .linkit { margin-top: 16px; }

/* --------------------------------------------------------------------------
   6. Tuotteet: pienet kortit (kuva 4:3, nimi ja yksi lyhyt rivi), koko kortti on
   linkki. Puhelimessa sivuttain vieritettävä rivi, josta seuraava kortti näkyy
   reunassa. Leveällä näytöllä neljä palstaa samoilla reunoilla kuin Husqvarnan
   tuoteruudut.
   -------------------------------------------------------------------------- */
.kortit {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(64%, 260px);
  align-items: start;
  gap: 16px;
  margin: 0 calc(-1 * var(--reuna));
  padding: 0 var(--reuna) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--reuna);
  scrollbar-width: none;
  list-style: none;
}
.kortit::-webkit-scrollbar { display: none; }
.kortti { position: relative; scroll-snap-align: start; }
.kortti__kuva {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--kuvakulma);
  background: var(--vaalea);
}
.kortti__kuva img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kohta, 50% 50%);
  transition: transform 0.4s;
}
/* Tuotekuva vaalealla pohjalla: valkoinen tausta sulautuu ruudun pohjaan */
.kortti--tuote .kortti__kuva img { padding: 6% 12%; object-fit: contain; mix-blend-mode: multiply; }
.kortti__nimi {
  margin: 14px 0 4px;
  color: var(--sininen);
  font-size: 1.375rem;
  line-height: 1.1;
}
.kortti__nimi a { color: inherit; text-decoration: none; }
.kortti__nimi a::after { content: ""; position: absolute; inset: 0; }
.kortti__teksti { margin: 0; color: var(--harmaa); font-size: 0.9375rem; line-height: 1.45; }
.kortti:hover .kortti__nimi a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.kortti:hover .kortti__kuva img { transform: scale(1.03); }
@supports selector(:has(*)) {
  .kortti__nimi a:focus-visible { outline: none; }
  .kortti:has(a:focus-visible) { outline: 3px solid var(--sininen); outline-offset: 4px; border-radius: var(--kuvakulma); }
}
@media (min-width: 900px) {
  .kortit {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 48px var(--rako);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

/* Verkkokauppa: vanhan Varusteet-dian teksti ja linkki korttien alla */
.tuotteet__kauppa {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--viiva);
}
.tuotteet__kauppa p { margin: 0; color: var(--harmaa); }
@media (min-width: 700px) {
  .tuotteet__kauppa { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--rako); }
}
@media (min-width: 1024px) { .tuotteet__kauppa { margin-top: 56px; } }

/* --------------------------------------------------------------------------
   7. Hakukoneteksti (vanhan etusivun alaosa): otsikko ja johdanto vasemmassa
   puolikkaassa, avattavat alaotsikot oikeassa (main.js). Ilman JavaScriptia
   kaikki teksti näkyy.
   -------------------------------------------------------------------------- */
.kuvaus h2 { margin-bottom: 20px; color: var(--sininen); font-size: var(--h2); line-height: 1; text-wrap: balance; }
.kuvaus__palstat { margin-top: 36px; }
.kuvaus__osa { margin-bottom: 32px; padding-top: 22px; border-top: 1px solid var(--viiva); }
.kuvaus__osa:last-child { margin-bottom: 0; }
.kuvaus__osa h3 { margin-bottom: 12px; color: var(--sininen); font-size: 1.5rem; }
.kuvaus__teksti p { font-size: 1rem; }

/* Avattavat alaotsikot */
.kuvaus__palstat.on-avattava { border-bottom: 1px solid var(--viiva); }
.on-avattava .kuvaus__osa { margin-bottom: 0; padding-top: 0; }
.on-avattava .kuvaus__osa h3 { margin: 0; font-size: 1.3125rem; line-height: 1.15; }
/* Suljettu teksti on hidden="until-found": Chrome jättää laatikon, joten täyte vain auki-tilaan */
.on-avattava .kuvaus__teksti:not([hidden]) { padding-bottom: 22px; }
.kuvaus__avaa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 14px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.kuvaus__avaa::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s;
}
.kuvaus__avaa[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
.kuvaus__avaa:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (min-width: 1024px) {
  .kuvaus__ruudukko {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--rako);
    align-items: start;
  }
  .kuvaus__palstat { margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   Alatunniste: sininen koko leveydeltä, päättää sivun kuten hero sen aloittaa.
   Aukioloajat ovikyltin tapaan isoina numeroina kuten herossa.
   -------------------------------------------------------------------------- */
.ala {
  padding: 64px 0 28px;
  background: var(--sininen);
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
}
.ala__alku {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.ala__logo { width: 136px; }
.ala__slogan {
  margin: 0;
  color: #fff;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.ala__palstat { display: grid; gap: 36px; padding-block: 40px; }
.ala h2 { margin-bottom: 12px; color: #fff; font-size: 1.375rem; letter-spacing: 0; }
.ala ul { margin: 0; padding: 0; list-style: none; }
.ala ul a,
.ala p a { display: inline-block; padding-block: 4px; }
.ala a { color: #fff; text-decoration: none; }
.ala a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ala address { margin-bottom: 8px; }
.ala__loppu {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8125rem;
}
.kyltti { margin: 4px 0 16px; border-top: 1px solid rgba(255, 255, 255, 0.32); }
.kyltti dd { margin: 0; }
.kyltti__aukiolo dd {
  display: grid;
  grid-template-columns: 4.25rem auto;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.kyltti__aukiolo dd span { color: rgba(255, 255, 255, 0.82); font-size: 1rem; font-weight: 500; }
.kyltti__aukiolo b {
  color: #fff;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 2.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.ala__toinen { margin-top: 28px; }
/* Pikalinkit kahdessa palstassa, jotka osuvat alatunnisteen palstojen reunoille */
.ala__pikalinkit { columns: 2; column-gap: 20px; }
.ala__pikalinkit li { break-inside: avoid; }
@media (min-width: 700px) {
  .ala__palstat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ala__linkit { grid-column: 1 / -1; }
  .ala__pikalinkit { column-gap: 36px; }
}
@media (min-width: 1024px) {
  .ala { padding-top: 88px; }
  .ala__palstat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rako); }
  .ala__linkit { grid-column: span 2; }
  .ala__pikalinkit { column-gap: var(--rako); }
}

/* --------------------------------------------------------------------------
   Mobiilin pikapalkki: valkoinen, ohut yläviiva, vain Soita täytettynä
   -------------------------------------------------------------------------- */
.pikapalkki {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  box-shadow: 0 -1px 0 var(--viiva);     /* 1 px viiva, ei varjo */
}
.pikapalkki a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--pikapalkki);
  color: var(--sininen);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.pikapalkki a + a { border-left: 1px solid var(--viiva); }
.pikapalkki__soita { background: var(--oranssi); color: #fff !important; }
.pikapalkki__soita + a { border-left: 0 !important; }
@media (min-width: 1024px) { .pikapalkki { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}