.wp-block-button .wp-block-button__link,
.editor-styles-wrapper .wp-block-button .wp-block-button__link, 
.gb-button, 
.btn,
.btn.btn-primary,
.nf-form-cont .nf-form-content button, 
.nf-form-cont .nf-form-content input[type=button], 
.nf-form-cont .nf-form-content input[type=submit] {
    /* Mitat Tiksin visuaaleista 6.8.2026: teksti 16px Bold, napin korkeus 52px
       (16 × 1.125 = 18 + 2 × 17 padding). Isommat variantit (56/64/68px) tulevat
       komponenttien omista säännöistä, ei täältä. Kulmat pysyvät suorina. */
    font-size: 16px;
    line-height: 1.125;
    padding: 17px 30px;
    font-weight: 700;
    border: 0;
    border-radius: 0;
    /* Farizon: oletusnappi = Starry gray (brändin pääväri 60%). Tunnusvärejä
       (Evolution Blue/Orange) käytetään vain pieninä korosteina, ei napeissa
       hallitsevana — ks. brandi-yhteenveto.md. */
    background-color: var(--wp--preset--color--dark-gray) !important;
    color: var(--wp--preset--color--white);
    transition: filter 0.2s ease;
}
.wp-block-button.is-style-secondary .wp-block-button__link {
    background-color: var(--wp--preset--color--secondary) !important;
    color: var(--wp--preset--color--white);
}
/* ============================================================
   NUOLI ON NAPIN OLETUS (linjaus 11.8.2026)
   Jokaisessa napissa on oikealle osoittava viivanuoli. Nuoli piirretään
   maskina + `currentColor`illa, joten se on automaattisesti valkoinen
   valkotekstisessä napissa ja musta tummatekstisessä — samaa kuviota käyttävät
   myös `is-style-dg-arrow-link` -linkit ja korttien "Lue lisää" (common.css).
   Poikkeus: `is-style-no-arrow` (rekisteröity "Ilman nuolta").
   ⚠️ Älä kirjoita nuolta napin tekstiin — siitä tulee tupla-nuoli.
   ============================================================ */
:root {
    /* Nuolen geometria on SAMA kuin teeman `images/icon-arrow-right-white.svg`:ssä
       (XD `Path 293` + `Rectangle 309`), jotta CSS-nuoli ja tiedostoikoni ovat
       identtiset. Kuvio täyttää viewBoxinsa reunasta reunaan → 1em:n laatikko
       tuottaa 1em:n levyisen nuolen. Aiempi 24×24-viewBox piirsi vain 67 %
       laatikosta, jolloin nuoli oli mitattuna 10,7px kun tiedostoikoni oli 16px. */
    --dg-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.178 13.491'%3E%3Cpath d='M6.976,0,6.254.723l6.023,6.023L6.254,12.769l.722.722,6.2-6.2V6.2Z' fill='%23000'/%3E%3Crect width='9.489' height='1.022' y='6.234' fill='%23000'/%3E%3C/svg%3E");
    /* Ratti: sama kuvio kuin yläpalkin "Varaa koeajo" -solussa
       (dg_header_icon_inline, inc/header-solut.php) → yksi ilme koko sivustolla. */
    --dg-cta-wheel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3.2 10.5h17.6M12 15v6'/%3E%3C/svg%3E");
}

.wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Ikoni tulee muuttujasta, jotta tyyli voi VAIHTAA sen (esim. ratti) ilman että
   sijainti, koko tai väri määritellään uudelleen. */
/* Koko tulee ikonin OMASTA natiivimitasta: `icon-arrow-right-white.svg` on
   13,178 × 13,491 ja leiskan nappiteksti 16px → 13,2/16 = 0,825em. 1em oli
   mitattuna liian iso (11.8.2026). */
.wp-block-button .wp-block-button__link::after {
    content: "";
    flex: none;
    inline-size: 0.825em;
    block-size: 0.845em;
    background-color: currentColor;
    -webkit-mask: var(--dg-btn-icon, var(--dg-cta-arrow)) no-repeat center / contain;
    mask: var(--dg-btn-icon, var(--dg-cta-arrow)) no-repeat center / contain;
}

/* "Varaa koeajo": leiskassa napissa on ratti nuolen TILALLA (XD `Group 775 /
   Path 326`, sama komponentti kuin yläpalkin Varaa koeajo -solussa). */
.wp-block-button.is-style-wheel {
    --dg-btn-icon: var(--dg-cta-wheel);
}

/* Ratti on nuolta hennompi viivapiirros ja sen kuvio täyttää viewBoxista vain
   75 % → hieman isompana se lukee nuolen kokoisena. */
.wp-block-button.is-style-wheel .wp-block-button__link::after {
    inline-size: 1.1em;
    block-size: 1.1em;
}

/* Kiintoavain ja henkilö nuolen tilalle (leiska: Toimipiste — "Varaa huolto" ja
   "Kaikki yhteystiedot"). Ikonit ovat teemaan toimitettuja tiedostoja, ja ne
   piirretään samalla maskilla kuin nuoli → ne seuraavat napin tekstiväriä. */
.wp-block-button.is-style-wrench {
    --dg-btn-icon: url("../../../images/icon-wrench-black.svg");
}

.wp-block-button.is-style-person {
    --dg-btn-icon: url("../../../images/icon-person-black.svg");
}

.wp-block-button.is-style-wrench .wp-block-button__link::after,
.wp-block-button.is-style-person .wp-block-button__link::after {
    inline-size: 1.15em;
    block-size: 1.15em;
}

/* ============================================================
   NUOLI MYÖS LOMAKKEEN LÄHETYSNAPPIIN
   `input`-elementille ::after ei renderöidy, joten nuoli piirretään napin
   kääreeseen absoluuttisesti napin oikeaan pehmusteeseen.
   Kuvio ja koko ovat samat kuin muissa napeissa (`--dg-cta-arrow`, maski +
   `background-color`), joten ilme pysyy yhtenä.
   Väri seuraa napin TEKSTIVÄRIÄ: kääreelle annetaan sama väri kuin napille,
   jolloin valkotekstisessä napissa nuoli on valkoinen ja tummatekstisessä musta.

   🔑 **Kohdistus tehdään `.nf-field-element`iin, ei `.submit-wrap`iin**
   (20.8.2026). NF:n rakenne on `.submit-wrap > .nf-field-label +
   .nf-field-element + .nf-error-wrap`, ja kääreessä on lisäksi 17px yläpehmuste
   → `top: 50%` osui 13,5px napin keskipisteen yläpuolelle (mitattu
   konfiguraattorilla: nappi 52px, käärettä sen yläpuolella 27px). Tyhjä
   `.nf-field-label` vie 10px marginaalia ja `.nf-error-wrap` KASVAA
   validointivirheessä, joten kääreen keskikohta ei ole napin keskikohta
   missään tilanteessa. `.nf-field-element`in laatikko sen sijaan on
   pikselilleen napin laatikko (mitattu: sama x ja leveys).
   ============================================================ */
.nf-form-cont .nf-form-content .submit-wrap {
    display: inline-block;
    /* Oletusnappi on tumma valkoisella tekstillä (ks. ylempänä) → valkoinen nuoli. */
    color: var(--wp--preset--color--white);
}

.nf-form-cont .nf-form-content .submit-wrap .nf-field-element {
    position: relative;
}

.nf-form-cont .nf-form-content .submit-wrap .nf-field-element::after {
    content: "";
    position: absolute;
    inset-inline-end: 30px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 0.825em;
    block-size: 0.845em;
    font-size: 16px;
    background-color: currentColor;
    -webkit-mask: var(--dg-cta-arrow) no-repeat center / contain;
    mask: var(--dg-cta-arrow) no-repeat center / contain;
    pointer-events: none;
}

/* Napin tekstille oma tila nuolen vierestä: 30px pehmuste + nuoli + 10px väli
   (sama väli kuin muiden nappien flex-gapissa). */
.nf-form-cont .nf-form-content .submit-wrap input[type="button"],
.nf-form-cont .nf-form-content .submit-wrap input[type="submit"] {
    padding-inline-end: calc(30px + 0.825em + 10px);
}

/* Vaalea nappi (musta teksti) → musta nuoli. */
.nf-form-cont .nf-form-content .submit-wrap:has(input.is-style-white),
.nf-form-cont .nf-form-content .submit-wrap:has(input[type="button"][style*="background-color: rgb(255, 255, 255)"]) {
    color: var(--wp--preset--color--black);
}

/* Latausnuoli nuolen tilalle ("Lataa esite" — mallisivu ja auton sivu). Ikoni on
   maskina kuten muissakin napeissa → se ottaa napin tekstivärin, joten sama tyyli
   toimii sekä vaalealla sinisellä napilla että tummalla pohjalla.
   icon-download-gray.svg on 17,76 × 15,334 → 1,11em × 0,958em kun teksti on 16px. */
.wp-block-button.is-style-download {
    --dg-btn-icon: url("../../../images/icon-download-gray.svg");
}

.wp-block-button.is-style-download .wp-block-button__link::after {
    inline-size: 1.11em;
    block-size: 0.958em;
}

/* Poikkeukset: rekisteröity tyyli + vanha käsiluokka (ajax-nosto-komponentti). */
.wp-block-button.is-style-no-arrow .wp-block-button__link::after,
.wp-block-button.dg-btn-no-arrow .wp-block-button__link::after {
    content: none;
}

.wp-block-button.is-style-black .wp-block-button__link {
    background-color: var(--wp--preset--color--black) !important;
}

/* ============================================================
   Ensisijainen CTA — oranssi liukuväri (Tiksin visuaalit 6.8.2026)
   Visuaaleissa tämä on näkymän ainoa "pääteko": Varaa koeajo, Osta heti,
   Hyödynnä etusi, Laske kokonaiskustannus. Teksti on tumma, ei valkoinen.
   Liukuväri tulee theme.json:n gradientista — älä kirjoita arvoa tähän.
   ============================================================ */
.wp-block-button.is-style-cta-gradient .wp-block-button__link {
    background: var(--wp--preset--gradient--farizon-cta) !important;
    background-color: transparent !important;
    color: var(--wp--preset--color--black);
    border: 0;
}

/* Sininen nappi (Evolution Blue) — footerin nostot, TCO:n laskenappi,
   uutiskirjeen Tilaa, kampanjapalkin nappi. */
.wp-block-button.is-style-blue .wp-block-button__link {
    background-color: var(--wp--preset--color--evolution-blue) !important;
    color: var(--wp--preset--color--white);
    border: 0;
}

/* ============================================================
   Reunaviiva-napit (lisätty 30.7.2026)
   is-style-outline on WordPressin OMA nappityyli ja is-style-outline-white
   rekisteröidään gutenberg-modifications.php:ssä. Kummallakaan ei ollut
   tyylejä tässä teemassa, ja coren outline-säännöt käyttävät :where()-
   valitsinta (spesifisyys 0) → yllä oleva oletusnapin
   `background-color: ... !important` voitti ne ja KAIKKI reunaviiva-napit
   renderöityivät täytettyinä. Siksi myös nämä tarvitsevat !importantin.
   ============================================================ */
/* Reunaviiva on visuaaleissa AINA 1,5px light-gray (#BCC7D6) — sekä vaalealla
   että tummalla taustalla (47 esiintymää XD:ssä, ainoa toistuva nappityyppi).
   Vain tekstin väri vaihtuu taustan mukaan. Hover-tiloja ei ole XD-exportissa;
   nämä ovat oma ratkaisu → varmistettava Tiksiltä. */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--wp--preset--color--black);
    border: 1.5px solid var(--wp--preset--color--light-gray);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--light-gray) !important;
    color: var(--wp--preset--color--black);
}

/* Tummalla taustalla (yläkuva, tumma sektio) */
.wp-block-button.is-style-outline-white .wp-block-button__link {
    background-color: transparent !important;
    color: var(--wp--preset--color--white);
    border: 1.5px solid var(--wp--preset--color--light-gray);
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover,
.wp-block-button.is-style-outline-white .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--light-gray) !important;
    color: var(--wp--preset--color--black);
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.gb-button:hover,
.gb-button:focus {
    text-decoration: none;

}
/* Hover: täytettyjen nappien tausta hieman tummemmaksi. Ei läpinäkyville
   (nuolilinkki/outline/cta) joilla on oma hover-vihjeensä. */
.wp-block-button:not(.is-style-dg-arrow-link):not(.is-style-outline):not(.is-style-outline-white):not(.is-style-cta-primary) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-dg-arrow-link):not(.is-style-outline):not(.is-style-outline-white):not(.is-style-cta-primary) .wp-block-button__link:focus,
.gb-button:hover,
.gb-button:focus,
.btn:hover,
.btn:focus,
.nf-form-cont .nf-form-content button:hover,
.nf-form-cont .nf-form-content input[type=submit]:hover {
    filter: brightness(0.9);
}
.wp-block-buttons.is-layout-flex {
    gap: 1.5em;
}
/* Vaalea sininen (mallisivun "Lataa esite" / "Katso hinnasto").
   Leiskasta mitattu: tausta #D9E1F1 ≈ paletin pale-blue, teksti #030E99 ≈
   evolution-blue. !important, koska oletusnapin sääntö käyttää sitä (ks. yllä). */
.wp-block-button.is-style-pale-blue .wp-block-button__link {
    background-color: var(--wp--preset--color--pale-blue) !important;
    color: var(--wp--preset--color--evolution-blue);
    border: 0;
}

.wp-block-button.is-style-pale-blue .wp-block-button__link:hover,
.wp-block-button.is-style-pale-blue .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--table-blue) !important;
    color: var(--wp--preset--color--evolution-blue);
}