/* ============================================================
   Farizon: WooCommerce-brändäys (autot = Woo-tuotteita)
   Ladataan vain kun WooCommerce on aktiivinen (functions.php).
   ============================================================ */

/* Napit Farizonin ilmeeseen: Starry gray, kulmikkaat, valkoinen teksti.
   WC:llä on omat nappityylit jotka eivät seuraa teeman .btn/.wp-block-buttonia. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce-page #place_order {
    background-color: var(--wp--preset--color--dark-gray) !important;
    color: var(--wp--preset--color--white) !important;
    border: 0;
    border-radius: 0;
    font-weight: 700;
    padding: 15px 40px;
    transition: filter 0.2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover {
    filter: brightness(0.9);
}

/* Hinta brändiväriin (oletus on ruskea/kulta) */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: var(--wp--preset--color--black);
    font-weight: 700;
}

/* Single-tuotesivun alignwide-leveys hoidetaan lisäämällä .woocommerce-wrapperille
   alignwide-luokka (inc/woocommerce-functions.php) → teeman natiivi .alignwide-sääntö
   levittää sen wide-sizeen. Ei erillistä leveys-CSS:ää tarvita tässä. */

/* Auton tietotaulukko + varustelistat (vehicle-product-fields.php) */
.dg-vehicle-specs {
    width: auto;
    margin: 0 0 20px;
    border-collapse: collapse;
}
.dg-vehicle-specs th {
    text-align: left;
    font-weight: 600;
    padding: 4px 25px 4px 0;
    vertical-align: top;
}
.dg-vehicle-specs td {
    padding: 4px 0;
}
.dg-vehicle-list { margin: 0 0 20px; }
.dg-vehicle-list h3 { margin: 0 0 8px; }
.dg-vehicle-list ul { margin: 0; padding-left: 20px; }

/* ------------------------------------------------------------
   Tuotekortin kuvaselailu (woocommerce-functions.php: dg_loop_product_gallery)
   Pinotut kuvat, nuolet + pisteet. JS: js/javascripts.js (dg_card_galleries).
   ------------------------------------------------------------ */
.dg-card-gallery {
    position: relative;
    overflow: hidden;
}
.dg-card-gallery__track {
    position: relative;
}
/* Yhden kuvan tuote: pelkkä kuva normaalina (ei pinoa). */
.dg-card-gallery:not(.has-multiple) .dg-card-gallery__slide {
    display: block;
}
/* Monikuvainen: kuvat pinottuna, vain aktiivinen näkyvissä. */
.dg-card-gallery.has-multiple .dg-card-gallery__slide {
    display: none;
}
.dg-card-gallery.has-multiple .dg-card-gallery__slide.is-active {
    display: block;
}
.dg-card-gallery__slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Edellinen/seuraava-nuolet */
.dg-card-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.dg-card-gallery:hover .dg-card-gallery__nav,
.dg-card-gallery__nav:focus-visible {
    opacity: 1;
}
.dg-card-gallery__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--wp--preset--color--dark-gray);
    border-right: 2px solid var(--wp--preset--color--dark-gray);
}
.dg-card-gallery__nav--prev { left: 8px; }
.dg-card-gallery__nav--next { right: 8px; }
.dg-card-gallery__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.dg-card-gallery__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }

/* Pisteet */
.dg-card-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.dg-card-gallery__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.dg-card-gallery__dot.is-active {
    background: var(--wp--preset--color--dark-gray);
}

/* Kosketuslaitteet: nuolet aina näkyvissä (ei hoveria) */
@media (hover: none) {
    .dg-card-gallery__nav { opacity: 1; }
}

/* ==========================================================================
   Yksittäisen auton sivu (template-parts/vehicle-single.php)
   Rautalanka "Yksittäinen auto": täysleveä pystysuuntainen rakenne.
   ========================================================================== */
/* --------------------------------------------------------------------------
   YKSITTÄINEN AUTO (leiska "Yksittäinen auto", template-parts/vehicle-single.php)
   Yläosa on yksi vaalea kaista: otsikko + tietorivi + kuvagalleria + perustiedot.
   Tumma "Tekniset tiedot" alkaa vasta kaistan alta.
   ⚠️ Kaista alkaa artikkelin ylälaidasta, EI murupolun tasalta kuten leiskassa:
   murupolku renderöityy templaten ulkopuolella (inc/murupolku.php).
   -------------------------------------------------------------------------- */
.dg-vehicle-single__intro {
    background-color: var(--wp--preset--color--near-white);
    padding-block: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
    .dg-vehicle-single__intro {
        padding-block: var(--wp--preset--spacing--100);
    }
}

/* Otsikko ja tietorivi keskitettyinä (leiska: otsikko x=960 = artboardin keski). */
.dg-vehicle-single__header {
    text-align: center;
    margin-block-end: var(--wp--preset--spacing--50);
}

.dg-vehicle-single__header .entry-title {
    margin-block: 0 var(--wp--preset--spacing--10);
}

.dg-vehicle-single__availability {
    margin-block: 0;
    color: var(--wp--preset--color--muted-gray);
    font-size: var(--wp--preset--font-size--medium);
}

/* Tietorivi: viisi tietoa ikoneineen, väleissä ohut erotinviiva (leiska Line 68–71). */
.dg-vehicle-single__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* Riviväli 15px (23.10.2026): kapealla näytöllä tiedot rivittyvät ja rivit
       olivat kiinni toisissaan. Yhden rivin näkymään ei vaikuta. */
    gap: var(--wp--preset--spacing--15) 0;
    margin-block: var(--wp--preset--spacing--50) 0;
    padding: 0;
    list-style: none;
}

.dg-vehicle-single__fact {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
    padding-inline: var(--wp--preset--spacing--25);
    font-size: var(--wp--preset--font-size--medium-large);
}

/* Erotin sisarusten VÄLIIN, ei reunoihin. */
.dg-vehicle-single__fact + .dg-vehicle-single__fact {
    border-inline-start: 1px solid var(--wp--preset--color--light-gray);
}

.dg-vehicle-single__fact-icon {
    inline-size: 24px;
    block-size: 24px;
    flex: none;
    color: var(--wp--preset--color--evolution-blue);
}

/* --- Kuvagalleria ---------------------------------------------------------
   Leiskassa keskikuva on 1226px ja kaistaleet jatkuvat SISÄLTÖLEVEYDEN yli, joten
   galleria levitetään koko ikkunan leveyteen negatiivisella marginaalilla ja
   kaistaleet tulevat Slickin centerPaddingista (18 % ≈ 347px @1920). */
.dg-vehicle-gallery {
    position: relative;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
}

.dg-vehicle-gallery__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1226 / 633;
    object-fit: cover;
}

/* Yksittäinen kuva ilman slideria pysyy sisältöleveydessä. */
.dg-vehicle-gallery > .dg-vehicle-gallery__item {
    inline-size: min(1226px, calc(100% - 50px));
    margin-inline: auto;
}

.dg-vehicle-gallery__slider .dg-peek-slider__item {
    padding-inline: 8px;
}

/* Nuolet keskikuvan oikeaan ylänurkkaan (leiska: 52x52 valkoinen, y=631). */
.dg-vehicle-gallery__slider .dg-slick-arrow {
    position: absolute;
    inset-block-start: 27px;
    z-index: 2;
    inline-size: 52px;
    block-size: 52px;
    background-color: #fff;
    border: 0;
    cursor: pointer;
}

/* inset-inline-start: auto kumoaa yleisen `.dg-slick-arrow--prev { inset-inline-start: 0 }`
   (common.css), joka vei vasemman nuolen ruudun reunaan (23.10.2026). */
.dg-vehicle-gallery__slider .dg-slick-arrow--prev {
    inset-inline-start: auto;
    inset-inline-end: calc(18% + 61px);
}

.dg-vehicle-gallery__slider .dg-slick-arrow--next {
    inset-inline-end: calc(18% + 9px);
}

/* Kapealla näytöllä Slickin reunus on 8 % (inc/peek-slider.php), joten nuolet
   sijoitetaan sen mukaan keskikuvan oikeaan ylänurkkaan (23.10.2026: 18 %:n
   arvoilla ne osuivat sivukuvan päälle). Pienempi nappi, 10px sisennys. */
@media (max-width: 781px) {
    .dg-vehicle-gallery__slider .dg-slick-arrow {
        inset-block-start: 32px;
        inline-size: 44px;
        block-size: 44px;
    }

    .dg-vehicle-gallery__slider .dg-slick-arrow--prev {
        inset-inline-end: calc(8% + 62px);
    }

    .dg-vehicle-gallery__slider .dg-slick-arrow--next {
        inset-inline-end: calc(8% + 18px);
    }
}

/* Napit kuvan päälle oikeaan alanurkkaan (leiska y=1011, ulottuvat kaistaleen yli). */
.dg-vehicle-single__actions {
    justify-content: center;
    margin-block-start: var(--wp--preset--spacing--25);
}

@media (min-width: 782px) {
    .dg-vehicle-single__actions {
        position: absolute;
        inset-block-end: 25%;
        /* Keskikuvan oikeaan reunaan kuten nuolet (18 % peek + 25 px sisennys).
           Pelkkä 40px vei napit leveällä näytöllä sivukuvan päälle. */
        inset-inline-end: calc(18% + 25px);
        z-index: 2;
        margin-block-start: 0;
    }
}

/* --- Perustietoruudukko ---------------------------------------------------
   Kolme saraketta ja kolme riviä, ja ruudukko täyttyy SARAKKEITTAIN kuten
   leiskassa (sarake 1: Malli · Vuosimalli · Väri). Keskirivi on vaalea. */
.dg-vehicle-basics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 782px) {
    .dg-vehicle-basics {
        /* minmax(0, 1fr), ei 1fr: pitkä nimike ("Tavaratilan tilavuus") venytti
           saraketta ja sarakkeista tuli eri levyisiä (mitattu 611/611/368). */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        gap: 15px 16px;
    }
}

.dg-vehicle-row {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    min-block-size: 64px;
    padding-inline: var(--wp--preset--spacing--25);
    background-color: #fff;
    font-size: var(--wp--preset--font-size--medium);
}

.dg-vehicle-row--alt {
    background-color: var(--wp--preset--color--pale-gray);
}

.dg-vehicle-row__icon {
    inline-size: 24px;
    block-size: 24px;
    flex: none;
    color: var(--wp--preset--color--light-gray);
}

.dg-vehicle-row__label {
    font-weight: 700;
    color: var(--wp--preset--color--neutral-gray);
}

/* Arvo oikeaan reunaan (leiska: arvot samassa x-linjassa laatikon oikealla). */
.dg-vehicle-row__value {
    margin-inline-start: auto;
    text-align: end;
}

.dg-vehicle-single__basics-section {
    margin-block-start: var(--wp--preset--spacing--100);
}

.dg-vehicle-single__basics-section > h2 {
    margin-block: 0 var(--wp--preset--spacing--50);
}


.dg-vehicle-single__section {
    margin-block-end: 50px;
}

/* --- Tekniset tiedot: tumma täysleveä osio (leiska y=1841) ---------------- */
.dg-vehicle-single__tech-section {
    padding-block: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
    .dg-vehicle-single__tech-section {
        padding-block: var(--wp--preset--spacing--100);
    }
}

.dg-vehicle-single__tech-section > .alignwide > h2 {
    margin-block: 0 var(--wp--preset--spacing--50);
}

/* Kolme ryhmää rinnakkain, sama 16px:n väli kuin perustietoruudukossa. */
.dg-vehicle-tech {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
    .dg-vehicle-tech {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Ryhmän otsikko: leiskassa 23px normaalipainoinen (x-large = 1.4375rem). */
.dg-vehicle-tech__title {
    margin-block: 0 var(--wp--preset--spacing--25);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 400;
}

/* Vuororivit (leiska): 1. ja 3. rivi ovat hennosti vaalennettuja tummia
   laatikoita (ei läpinäkyviä) ja 2. rivi on vaalea sinisävy #CAD7E8 tummalla
   tekstillä. Osion oma tekstiväri on valkoinen, joten vaalealla rivillä se
   vaihdetaan.
   ⚠️ Laskenta alkaa ryhmän OTSIKOSTA (h3 on lapsi 1), joten ensimmäinen rivi on
   PARILLINEN lapsi → vaalea sinisävy on pariton. */
.dg-vehicle-tech__group > .dg-vehicle-row {
    background-color: rgb(255 255 255 / 0.08);
}

.dg-vehicle-tech__group > .dg-vehicle-row:nth-child(odd) {
    background-color: var(--wp--preset--color--table-blue);
    color: var(--wp--preset--color--black);
}

/* Nimikkeen harmaa (perustietoruudukosta) ei erottuisi tummalla pohjalla. */
.dg-vehicle-tech__group > .dg-vehicle-row .dg-vehicle-row__label {
    color: inherit;
}

/* --- Varustelu ja lisätiedot (leiska y=2668) -------------------------------
   Otsikko ja sen alla haitarit: otsikko 20px normaalipainoisena, alla ohut viiva,
   ja avattuna vakiovarusteet KAHDESSA palstassa rivit viivalla eroteltuina. */
.dg-vehicle-single__equipment {
    /* Leiska: pale-blue #D6E2F2 50 %:n peitolla — sävy jää vaaleammaksi kuin
       paletin oma arvo, joten alfa kirjoitetaan tähän eikä palettiin. */
    background-color: rgb(214 226 242 / 0.5);
    /* Ala- kuten yläpehmuste, ei `.dg-vehicle-single__section`in 50px
       alamarginaalia (30.9.2026): marginaali jätti vaalean taustan ja sinisen
       CTA-osion väliin valkoisen raidan, ja haitarit olivat kiinni taustan
       alareunassa. CTA-osion 100px on sen oman taustan sisällä, joten
       kumpikin pehmuste näkyy oman taustansa värisenä. */
    margin-block-end: 0;
    padding-block: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
    .dg-vehicle-single__equipment {
        padding-block: var(--wp--preset--spacing--100);
    }
}

.dg-vehicle-single__equipment > .alignwide > h2 {
    margin-block: 0 var(--wp--preset--spacing--50);
}

.dg-vehicle-accordions {
    margin-block-end: 0;
}

.dg-vehicle-accordion + .dg-vehicle-accordion {
    margin-block-start: var(--wp--preset--spacing--25);
}

.dg-vehicle-accordion > summary {
    position: relative;
    cursor: pointer;
    padding-block: var(--wp--preset--spacing--10);
    padding-inline: 0 40px;
    border-block-end: 1px solid var(--wp--preset--color--neutral-gray);
    font-size: var(--wp--preset--font-size--large);
    /* Leiskassa otsikko on normaalipainoinen; oletusmarkkeri pois, koska avaus
       näytetään omalla plus/miinus-ikonilla (sama kuvio kuin varusteluettelossa). */
    font-weight: 400;
    list-style: none;
}

.dg-vehicle-accordion > summary::-webkit-details-marker {
    display: none;
}

/* Plus/miinus kahdesta pseudoelementistä: toimii myös tummalla taustalla eikä
   vaadi kuvatiedostoa (sama ratkaisu kuin inc/varusteluettelo.php:ssä). */
.dg-vehicle-accordion > summary::before,
.dg-vehicle-accordion > summary::after {
    content: "";
    position: absolute;
    inset-inline-end: 8px;
    inset-block-start: 50%;
    background-color: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.dg-vehicle-accordion > summary::before {
    inline-size: 16px;
    block-size: 2px;
    transform: translateY(-50%);
}

/* Pystyviivan keskipiste samaan kohtaan kuin vaakaviivan: vaaka päättyy 8px
   reunasta ja on 16px leveä → keskipiste 16px reunasta, joten pysty on 15px
   reunasta (leveys 2px). Aiempi lisäsiirto työnsi pystyviivan sivuun ja plus
   näytti ⊣-merkiltä. */
.dg-vehicle-accordion > summary::after {
    inline-size: 2px;
    block-size: 16px;
    inset-inline-end: 15px;
    transform: translateY(-50%);
}

.dg-vehicle-accordion[open] > summary::after {
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
}

.dg-vehicle-accordion__content {
    padding-block: var(--wp--preset--spacing--25) 0;
    padding-inline: 0;
}

/* Varustelista: kaksi palstaa (leiska x=142 ja x=968), rivit erotellaan ohuella
   viivalla eikä merkillä. */
.dg-vehicle-checklist {
    columns: 1;
    column-gap: var(--wp--preset--spacing--100);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 782px) {
    .dg-vehicle-checklist {
        columns: 2;
    }
}

.dg-vehicle-checklist li {
    break-inside: avoid;
    margin: 0;
    padding-block: 12.5px;
    padding-inline-start: 0;
    border-block-end: 1px solid var(--wp--preset--color--light-gray);
    font-size: var(--wp--preset--font-size--medium);
}

/* Nappi listan alle (leiska y=3194). */
.dg-vehicle-accordion__content > .wp-block-buttons {
    margin-block-start: var(--wp--preset--spacing--50);
}

/* Mallikohtaisella varustelusivulla (Malli tiedot -leiska) sama lista on
   YKSIPALSTAINEN, ilman checkmarkia ja rivit erotellaan ohuella viivalla —
   auton omalla sivulla lista on kolmipalstainen checkmark-lista (ks. yllä).
   Ero tulee kontekstista, ei sivusta: varustelusivun listat ovat natiivin
   haitarilohkon paneelissa (.dg-accordion-panel), auton sivun listat
   template-partin omissa <details class="dg-vehicle-accordion"> -elementeissä. */
.dg-accordion-panel .dg-vehicle-checklist {
    columns: 1;
    padding: 0;
}

.dg-accordion-panel .dg-vehicle-checklist li {
    margin-block-end: 0;
    padding-block: 12.5px;
    padding-inline-start: 0;
    border-block-end: 1px solid var(--wp--preset--color--light-gray);
}

.dg-accordion-panel .dg-vehicle-checklist li:last-child {
    border-block-end: 0;
}

/* Checkmark pois: leiskassa rivit erottuvat viivalla, ei merkillä. */
.dg-accordion-panel .dg-vehicle-checklist li::before {
    content: none;
}

@media (max-width: 991px) {
    .dg-vehicle-tech { grid-template-columns: 1fr; gap: 25px; }
    .dg-vehicle-checklist { columns: 2; }
}

@media (max-width: 781px) {
    .dg-vehicle-basics {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: none;
    }
    .dg-vehicle-checklist { columns: 1; }
    /* Sama kapealla näytöllä myös varustelusivulla: kahden luokan selektori yllä
       voittaisi muuten tämän. */
    .dg-accordion-panel .dg-vehicle-checklist { columns: 1; }
}

/* ============================================================
   WC-LOHKOSIVUT (kori · kassa · oma tili) TEEMAN ILMEESEEN
   ============================================================
   WooCommerce 8+ renderöi korin ja kassan LOHKOINA (`wc-block-*`), joilla on
   oma tyylitiedosto. 🔑 Se latautuu teeman `woocommerce.css`:n JÄLKEEN
   (mitattu: teema #5, `checkout.css` #28), joten samalla spesifisyydellä
   kirjoitettu sääntö häviää. Siksi ylikirjoitukset on ankkuroitu body-luokkaan
   `.woocommerce-page` ja tarvittaessa `!important`illa — sama perustelu kuin
   Ninja Forms -kenttien tausta/focus -säännöissä (ks. README).

   Arvot eivät ole omia: ne on mitattu sivuston omista komponenteista.
   Kentät = tumman lomakkeen geometria (55px korkeus, 25px sisäpehmuste,
   kulmikas, sininen fokusrengas). Napit = teeman nappi (16px/700, radius 0,
   padding 17px 30px), pääteko liukuvärillä kuten muuallakin sivustolla.
   ============================================================ */

/* Kassalohko keskelle. WC asettaa `.wp-block-woocommerce-checkout { margin: 0 }`
   ja korjaa sen vain omille teemoilleen (`.theme-twentytwenty …{margin:0 auto}`),
   joten alignwide jäi vasempaan reunaan (mitattu vasen 0, h1 44). Korilohkolla
   samaa sääntöä ei ole, mutta annetaan molemmille sama varmuuden vuoksi. */
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart.alignwide {
    /* Teeman `.alignwide` on `width: calc(100% - 50px)` + `max-width: wide-size`
       + auto-marginaalit. WC ylikirjoittaa NIISTÄ KAKSI: `margin: 0` ja
       `width: 100%`. Pelkkä `margin-inline: auto` ei siis riitä — leveällä
       näytöllä max-width kätki vian, mutta 1400px:llä lohko oli 1400px leveä
       vasemmassa reunassa kun h1 oli 25px:ssä (mitattu). Palautetaan molemmat. */
    width: calc(100% - 50px);
    margin-inline: auto;
}

/* --- Syötekentät ------------------------------------------------------- */
.woocommerce-page .wc-block-components-text-input input,
.woocommerce-page .wc-block-components-textarea,
.woocommerce-page .wc-block-components-select__container select,
.woocommerce-page .wc-blocks-components-select__select {
    border: 1px solid var(--wp--preset--color--light-gray) !important;
    border-radius: 0 !important;
    /* !important myös korkeudelle: WC:n oma sääntö voittaa muuten
       latausjärjestyksellä (mitattu: kenttä jäi 50px:ään, valikko sai 55px). */
    min-block-size: 55px !important;
    padding-inline: var(--wp--preset--spacing--25) !important;
    font-size: var(--wp--preset--font-size--regular);
}

/* Fokusrengas sama kuin lomakkeilla: brändinsininen, 2px + 2px offset. */
.woocommerce-page .wc-block-components-text-input input:focus,
.woocommerce-page .wc-block-components-textarea:focus,
.woocommerce-page .wc-block-components-select__container select:focus,
.woocommerce-page .wc-blocks-components-select__select:focus {
    outline: 2px solid var(--wp--preset--color--evolution-blue) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Kelluva label ei saa jäädä kentän reunan alle kun sisäpehmuste kasvoi. */
.woocommerce-page .wc-block-components-text-input label {
    inset-inline-start: var(--wp--preset--spacing--25);
}

/* --- Napit ------------------------------------------------------------- */
.woocommerce-page .wc-block-components-button:not(.is-link) {
    border-radius: 0 !important;
    font-size: var(--wp--preset--font-size--regular) !important;
    font-weight: 700 !important;
    min-block-size: 56px;
    padding-inline: var(--wp--preset--spacing--25) !important;
}

/* Pääteko (tilauksen vahvistus, kassalle siirtyminen) liukuvärillä ja mustalla
   tekstillä — sama kohtelu kuin [Osta heti] ja [Varaa koeajo]. */
.woocommerce-page .wc-block-components-checkout-place-order-button,
.woocommerce-page .wc-block-cart__submit-button {
    background: var(--wp--preset--gradient--farizon-cta) !important;
    color: var(--wp--preset--color--black) !important;
    border: 0 !important;
}

/* --- Yhteenvetolaatikko ------------------------------------------------ */
.woocommerce-page .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    border-radius: 0;
}

/* --- Klassiset WC-templatet (oma tili, kirjautuminen) ------------------
   Kori ja kassa ovat lohkoja, mutta oma tili renderöityy yhä klassisella
   templatella (`.woocommerce form`), jossa on eri luokat. Sama geometria. */
.woocommerce-page .woocommerce form .input-text,
.woocommerce-page .woocommerce form input[type="text"],
.woocommerce-page .woocommerce form input[type="email"],
.woocommerce-page .woocommerce form input[type="password"],
.woocommerce-page .woocommerce form input[type="tel"],
.woocommerce-page .woocommerce form select,
.woocommerce-page .woocommerce form textarea {
    border: 1px solid var(--wp--preset--color--light-gray) !important;
    border-radius: 0 !important;
    min-block-size: 55px !important;
    padding-inline: var(--wp--preset--spacing--25) !important;
    font-size: var(--wp--preset--font-size--regular);
}

.woocommerce-page .woocommerce form .input-text:focus,
.woocommerce-page .woocommerce form select:focus,
.woocommerce-page .woocommerce form textarea:focus {
    outline: 2px solid var(--wp--preset--color--evolution-blue) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* "Yhteensä" -rivin summa lihavoituna (pyyntö 21.8.2026). WC antaa sekä
   labelille että summalle saman painon 500, joten loppusumma ei erottunut
   välisummasta muuten kuin kokoerolla. Teeman bold on 700. Koskee sekä korin
   ("Arvioitu kokonaissumma") että kassan ("Yhteensä") yhteenvetoa, koska
   molemmat käyttävät samaa `…totals-footer-item`-luokkaa. */
.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 700;
}

/* --- Oma tili ----------------------------------------------------------
   WC:n oma template: navigaatio `<ul>`-listana luettelomerkeillä ja
   alleviivatuilla linkeillä, sisältö oikealla. Luettelomerkkilistaa
   linkeille ei käytetä sivustolla muualla (ks. teeman `is-style-dg-arrow-list`
   -linjaus), joten navi rakennetaan viivoin eroteltuna listana kuten
   auton sivun varustelu- ja tekniset rivit. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--wp--preset--color--light-gray);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    border-block-end: 1px solid var(--wp--preset--color--light-gray);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding-block: var(--wp--preset--spacing--15);
    color: var(--wp--preset--color--dark-gray);
    font-size: var(--wp--preset--font-size--medium);
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
    color: var(--wp--preset--color--evolution-blue);
    text-decoration: none;
}

/* Aktiivinen kohta: brändinsininen ja lihavoitu — sama tapa kuin päävalikon
   aktiivitilassa (ei alleviivausta, väri + paino kertovat sijainnin). */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--wp--preset--color--evolution-blue);
    font-weight: 700;
}

/* Tilisivu jäi kiinni footeriin: mainissa ei ole alapehmustetta, ja muilla
   sivuilla väli tulee viimeisen osion `…-y-paddings`-luokasta, jota WC:n
   template ei tietenkään käytä. Annetaan sama väli kääreelle.
   ⚠️ EI `min-block-size` sisällölle: navipalsta on usein sisältöä KORKEAMPI
   (dashboardilla 6 linkkiä vs. 2 kappaletta), joten vähimmäiskorkeus ei
   estänyt navin valumista footerin alle. Alapehmuste kääreessä pätee molempiin. */
.woocommerce-account .woocommerce {
    padding-block-end: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
    .woocommerce-account .woocommerce {
        padding-block-end: var(--wp--preset--spacing--100);
    }
}

/* --- Taulukot (tilaukset · osoitteet · tilausvahvistus) ----------------
   Sivuston taulukoissa on vuororivit ja kulmikkaat reunat (vrt. auton sivun
   Perustiedot ja Tekniset tiedot). WC:n oletus on pyöristetty ja raidaton. */
.woocommerce-page .woocommerce table.shop_table {
    border: 1px solid var(--wp--preset--color--light-gray);
    border-radius: 0;
    border-collapse: collapse;
}

.woocommerce-page .woocommerce table.shop_table th,
.woocommerce-page .woocommerce table.shop_table td {
    border-block-end: 1px solid var(--wp--preset--color--light-gray);
    padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--25);
}

.woocommerce-page .woocommerce table.shop_table thead th {
    font-size: var(--wp--preset--font-size--regular);
    font-weight: 700;
}

.woocommerce-page .woocommerce table.shop_table tbody tr:nth-child(even) {
    background-color: var(--wp--preset--color--table-blue);
}

/* Tilausvahvistus ("kiitos tilauksesta") — sama kohtelu, eri luokka. */
.woocommerce-page .woocommerce ul.woocommerce-order-overview {
    list-style: none;
    margin: 0 0 var(--wp--preset--spacing--50);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--25);
    border: 1px solid var(--wp--preset--color--light-gray);
    padding: var(--wp--preset--spacing--25);
}

.woocommerce-page .woocommerce ul.woocommerce-order-overview li {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
}

.woocommerce-page .woocommerce ul.woocommerce-order-overview li strong {
    display: block;
    font-size: var(--wp--preset--font-size--medium);
}

/* ============================================================
   Kassan valintaruudut 24px (WCAG 2.2 / 2.5.8, 22.10.2026)
   WC:n lohkokassan ruutu on 20×20 px, ja *latausratkaisut*-ruutu on suoraan
   toimipistevalinnan alla ilman väliä → axe `target-size` mobiilissa.
   Valintamerkki on WC:n absoluuttinen 15px-SVG: vaakaväli (24−15)/2 ja
   pystyväliin +2px, jolloin merkki on samassa kohdassa suhteessa ruutuun kuin
   WC:n oletuksessa (1,5px keskikohdan yläpuolella, mitattu).
   `body`-etuliite: WC:n lohkotyylit latautuvat tämän tiedoston jälkeen.
   ============================================================ */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
    margin-left: 4.5px;
    margin-top: 3px;
}

/* Toimipistevalinnan alle tilaa (26.10.2026): mobiilissa *latausratkaisut*-ruutu
   oli kiinni valinnassa (0px), desktopilla 16px. 25px kaikilla leveyksillä,
   sama kuin valintaruutujen keskinäinen väli (24px). */
body .wc-block-components-select-input-digitaali-toimipiste {
    margin-bottom: var(--wp--preset--spacing--25);
}