/*
 * BricksExtras-yhteensopivuus (G9 vaihe 6, suunnitelman kohta 3.6).
 *
 * Säännöt toistavat BricksExtras 1.7.6:n perustyylit, joita natiivi Bricks-elementti ei anna,
 * jotta natiiveiksi muunnetut header-rivit, liukurit ja suodatinpaneeli näyttävät samalta.
 * Ladataan joka sivulla (inc/bricksextras-compat.php). Ennen Bricks-datan muunnosta säännöt
 * eivät osu mihinkään tai toistavat BricksExtrasin omat arvot.
 *
 * Kohdistus: säilyvät elementti-id:t (tools/migrate/bricksextras.php tarkistaa, että jokainen
 * muunnettu natiivi id on tässä tiedostossa) ja diaelementtien säilyvä luokka x-slider_slide.
 * Id:t ovat :where()-sulkeissa, jolloin spesifisyys vastaa alkuperäistä luokkasääntöä ja
 * elementin omat asetukset (#brxe-…) voittavat edelleen.
 */

/* Header Row (xheaderrow → div), lähde headerrow.css (.brxe-xheaderrow). */
.brxe-div:where(#brxe-hhqetq, #brxe-zdfnwo, #brxe-fiujka) {
    display: flex;
    transition-property: height, opacity, transform;
    width: 100%;
}

/* Pro Slider (xproslider → slider-nested), lähde proslider.css. Diat pitävät luokan x-slider_slide. */
.x-slider_slide {
    display: flex;
    height: auto;
    padding: 4rem 1rem;
}

.x-slider_slide[class*=brxe-] {
    max-width: none;
}

.x-slider_slide > * {
    position: relative;
}

body.bricks-is-frontend .x-slider_slide:focus {
    outline: none;
}

body.bricks-is-frontend .x-slider_slide:focus-visible {
    outline: thin dotted currentcolor;
}

.brxe-slider-nested:where(#brxe-ehoydy, #brxe-qcrrvl, #brxe-rupctz):not(.is-overflow) .splide__slide:last-child {
    margin: 0 !important;
}

/* Liukurin nuolet: BricksExtrasin .x-splide__arrows-perustyyli. */
.brxe-slider-nested:where(#brxe-ehoydy, #brxe-qcrrvl, #brxe-rupctz) > .splide__arrows .splide__arrow {
    border-radius: 100%;
    color: currentColor;
    font-size: 16px;
    transition-duration: .3s;
    transition-property: opacity, color, background-color;
    transition-timing-function: ease;
}

.brxe-slider-nested:where(#brxe-ehoydy, #brxe-qcrrvl, #brxe-rupctz) > .splide__arrows .splide__arrow i {
    align-items: center;
    display: flex;
    height: 1em;
    justify-content: center;
    width: 1em;
}

/*
 * Ilman omia kuvakkeita BricksExtras piirsi kulmanuolen (Font Awesome Free angle-left ja
 * angle-right, CC BY 4.0, https://fontawesome.com/license/free). Natiivi käyttää Spliden omaa
 * nuolta ja peilaa edellinen-nuolen. Sama kulmanuoli maskina, peilaus pois.
 */
.brxe-slider-nested:where(#brxe-ehoydy, #brxe-qcrrvl, #brxe-rupctz) > .splide__arrows:not(.custom) .splide__arrow svg {
    display: none;
}

.brxe-slider-nested:where(#brxe-ehoydy, #brxe-qcrrvl, #brxe-rupctz) > .splide__arrows:not(.custom) .splide__arrow::before {
    background-color: currentColor;
    content: "";
    display: flex;
    height: 1em;
    -webkit-mask: var(--peh-bx-arrow) center / contain no-repeat;
    mask: var(--peh-bx-arrow) center / contain no-repeat;
    width: 1em;
}

.brxe-slider-nested:where(#brxe-ehoydy, #brxe-qcrrvl, #brxe-rupctz) > .splide__arrows:not(.custom) .splide__arrow.splide__arrow--prev {
    --peh-bx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
    transform: translateY(-50%);
}

.brxe-slider-nested:where(#brxe-ehoydy, #brxe-qcrrvl, #brxe-rupctz) > .splide__arrows:not(.custom) .splide__arrow--next {
    --peh-bx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");
}

/* maybeConditionalSlider (headerin ilmoitusliukuri): yksi dia → ei nuolia eikä sivutusta. */
#brxe-ehoydy:not(.is-overflow) > .splide__arrows,
#brxe-ehoydy:not(.is-overflow) > .splide__pagination {
    display: none;
}

/* Off-canvas (xoffcanvasnestable → offcanvas, arkiston suodatinpaneeli), lähde offcanvas.css. */
#brxe-lyoqqg .brx-offcanvas-inner {
    align-items: normal;
    max-width: 100%;
    transition: transform 300ms cubic-bezier(.77, 0, .175, 1), box-shadow 300ms cubic-bezier(.77, 0, .175, 1), opacity 300ms cubic-bezier(.77, 0, .175, 1);
    z-index: 1001;
}

#brxe-lyoqqg[data-direction=left] .brx-offcanvas-inner,
#brxe-lyoqqg[data-direction=right] .brx-offcanvas-inner {
    height: 100vh;
}

#brxe-lyoqqg .brx-offcanvas-inner > div {
    max-width: 100%;
}

#brxe-lyoqqg .brx-offcanvas-backdrop {
    transition: all 300ms cubic-bezier(.77, 0, .175, 1);
}

#brxe-lyoqqg.brx-open .brx-offcanvas-backdrop {
    z-index: 1000;
}

.admin-bar #brxe-lyoqqg .brx-offcanvas-inner,
.admin-bar #brxe-lyoqqg .brx-offcanvas-backdrop {
    margin-top: var(--wp-admin--admin-bar--height);
}

/*
 * Etusivun Uutuudet (Nikon päätös 25.10.2026, asiakaskansion DECISIONS.md). Mobiilikaruselli
 * zpgsfl poistettiin, ja sama tuoteruudukko panwsk näkyy kaikilla leveyksillä. Alle 480 px se on
 * vaakasuunnassa pyyhkäistävä rivi: seuraava kortti pilkistää, ei nuolia eikä skriptiä.
 * Rivi ulottuu osion sivutäytteen (--gutter, osion seeurd padding-inline) yli näytön reunoihin ja
 * palauttaa saman täytteen sisäreunaksi, joten ensimmäinen kortti on otsikon linjassa eikä rivi
 * leikkaudu kesken täytettä. ul#brxe-panwsk ohittaa Bricksin #brxe-panwsk-sarakeasetukset.
 */
@media (max-width: 479px) {
    ul#brxe-panwsk {
        grid-auto-columns: 80%;
        grid-auto-flow: column;
        grid-template-columns: none;
        inline-size: calc(100% + 2 * var(--gutter));
        margin-inline: calc(var(--gutter) * -1);
        max-width: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-inline: var(--gutter);
        scroll-padding-inline: var(--gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    ul#brxe-panwsk::-webkit-scrollbar {
        display: none;
    }

    ul#brxe-panwsk > * {
        scroll-snap-align: start;
    }
}