/* ═══════════════════════════════════════════════════════════════
   SÄHKÖLAUDAT.FI – Custom Header
   ═══════════════════════════════════════════════════════════════ */

/* ── Skip link ── */
.sla-skip-link {
    position: absolute;
    top: -120px;
    left: 16px;
    background: #111;
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    z-index: 99999;
    text-decoration: none;
    transition: top .15s;
}
.sla-skip-link:focus { top: 12px; }

/* ── CSS-muuttujat ── */
.sla-header {
    --slah-h:         68px;
    --slah-bg:        #ffffff;
    --slah-border:    rgba(0,0,0,.08);
    --slah-text:      #111111;
    --slah-muted:     #555555;
    --slah-hover-bg:  #f4f4f4;
    --slah-radius:    10px;
    --slah-shadow:    0 8px 28px rgba(0,0,0,.11);
    --slah-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --slah-transition: .18s ease;
    --slah-max:       1260px;
}

/* ══════════════════════════════════════════════
   STICKY-KORJAUS – overflow-x: clip
   ────────────────────────────────────────────
   Elementorin sivukohtainen custom CSS asettaa usein
   html,body { overflow-x: hidden } estääkseen vaakasuuntaisen
   scrollin. Tämä kuitenkin rikkoo position:sticky koska selain
   luo BFC:n (block formatting context).

   overflow-x: clip toimii identtisesti overflow-x: hidden
   -arvon kanssa (estää vaakasuuntaisen ylivuodon), mutta
   EI luo BFC:tä → position: sticky säilyy toimivana.

   Selaintuki: Chrome 90+, Firefox 81+, Safari 16+, Edge 90+.
══════════════════════════════════════════════ */
html, body {
    overflow-x: clip !important;
}

/* ══════════════════════════════════════════════
   HEADER POHJA
══════════════════════════════════════════════ */
.sla-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9200;
    background: var(--slah-bg);
    border-bottom: 1px solid var(--slah-border);
    font-family: var(--slah-font);
    transition: box-shadow var(--slah-transition);
}

.sla-header--scrolled {
    box-shadow: 0 2px 18px rgba(0,0,0,.09);
}

.sla-header__inner {
    display: flex;
    align-items: center;
    max-width: var(--slah-max);
    margin: 0 auto;
    padding: 0 28px;
    height: var(--slah-h);
    gap: 8px;
}

/* ── Admin bar ── */
.admin-bar .sla-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sla-header { top: 46px; } }

/* ══════════════════════════════════════════════
   SCROLL-PIILOTUS – vain mobiililla (≤ 900 px)
   position: fixed + transform.
   HUOM: will-change POISTETTU – se esti sisällön
   maalaamisen mobiililla (GPU-taso -bugi).
   Transitiot aktivoidaan JS:n kautta (.sla-anim-ready)
   jotta ne eivät välähdä sivulatauksen yhteydessä.
══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .sla-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        /* Ei will-change, ei transition tässä – lisätään JS-luokan kautta */
        transform: translateY(0);   /* eksplisiittinen alkutila */
    }

    /* Admin bar -offset mobiililla */
    .admin-bar .sla-header {
        top: 46px;
    }

    /* Transitio aktivoituu vasta kun JS on lisännyt luokan –
       estää "flash" ensimmäisellä sivulatauksella */
    body.sla-anim-ready .sla-header {
        transition: transform 0.3s ease, box-shadow var(--slah-transition) !important;
    }

    /* Piilotettu tila */
    .sla-header--scroll-hidden {
        transform: translateY(-100%) !important;
    }

}

/* ── Spacer: mobiililla header on position:fixed → spacer pitää
   sisällön oikealla korkeudella. Korkeus on HARDCODED (ei CSS-muuttujaa
   eikä JS:ää) jotta se toimii ENNEN kuin JS tai CSS-muuttujat on laskettu.
   Arvot vastaavat .sla-header:n --slah-h -muuttujia. ── */
.sla-header-spacer {
    display: none;   /* desktop: header on sticky, ei tarvita */
}

@media (max-width: 900px) {
    .sla-header-spacer {
        display: block;
        height: 62px;   /* == --slah-h mobiililla */
    }
}

@media (max-width: 600px) {
    .sla-header-spacer {
        height: 58px;   /* == --slah-h pienillä puhelimilla */
    }
}

/* ══════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════ */
.sla-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    margin-right: 8px;
}

.sla-header__logo img {
    height: 46px;   /* kasvatettu 38 → 46 px */
    width: auto;
    display: block;
    mix-blend-mode: multiply;
}

/* ══════════════════════════════════════════════
   DESKTOP NAVIGAATIO
══════════════════════════════════════════════ */
.sla-nav {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.sla-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.sla-nav__item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Nav-linkki */
.sla-nav__link,
.sla-nav__link--btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 13px;
    font-size: 15px;   /* kasvatettu 14 → 15 px */
    font-weight: 500;
    color: var(--slah-text) !important;
    text-decoration: none !important;
    border-radius: var(--slah-radius);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--slah-font);
    white-space: nowrap;
    transition: background var(--slah-transition), color var(--slah-transition);
    line-height: 1;
}

.sla-nav__link:hover,
.sla-nav__link--btn:hover,
.sla-nav__item--has-dropdown.is-open > .sla-nav__link,
.sla-nav__item--has-mega.is-open > .sla-nav__link {
    background: var(--slah-hover-bg);
    color: #000 !important;
}

.sla-nav__chevron {
    flex-shrink: 0;
    opacity: .55;
    transition: transform var(--slah-transition);
}

.sla-nav__item--has-dropdown.is-open .sla-nav__chevron,
.sla-nav__item--has-mega.is-open .sla-nav__chevron {
    transform: rotate(180deg);
    opacity: .9;
}

/* ══════════════════════════════════════════════
   DROPDOWN (pieni)
══════════════════════════════════════════════ */
.sla-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px); /* 6px visuaalinen ilmaväli */
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 14px;
    box-shadow: var(--slah-shadow);
    padding: 6px;
    list-style: none;
    margin: 0;
    z-index: 200;
    animation: slah-fade-in .15s ease;
}


/* Leveä 2-sarake dropdown (Lisävarusteet) */
.sla-dropdown--wide {
    min-width: 360px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Dropdown näkyvyys: VAIN JS:n lisäämä .is-open-luokka avaa dropdownin.
   :focus-within POISTETTU – se avasi dropdownin automaattisesti selaimen
   fokuksen palauttaessa fokuksen nav-linkkiin sivu-päivityksen jälkeen,
   vaikka käyttäjän hiiri ei ollut nav-linkin päällä. */
.sla-nav__item--has-dropdown.is-open > .sla-dropdown {
    display: block;
}

.sla-nav__item--wide.is-open > .sla-dropdown--wide {
    display: grid;
}

@keyframes slah-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sla-dropdown__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 450;
    color: var(--slah-text) !important;
    text-decoration: none !important;
    border-radius: 9px;
    transition: background var(--slah-transition);
}

.sla-dropdown__link:hover {
    background: var(--slah-hover-bg);
    color: #000 !important;
}

.sla-dropdown__icon {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}

.sla-dropdown__label {
    line-height: 1.3;
}

/* ══════════════════════════════════════════════
   MEGA MENU (Varaosat)
══════════════════════════════════════════════ */
.sla-mega {
    display: none;
    position: fixed; /* fixed jotta ei leikkaudu parent-elementista */
    top: var(--slah-h);
    left: 0;
    right: 0;
    z-index: 9100;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.07);
    border-bottom: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
    animation: slah-fade-in .15s ease;
}


/* Admin bar offsetti */
.admin-bar .sla-mega { top: calc(var(--slah-h) + 32px); }
@media (max-width: 782px) {
    .admin-bar .sla-mega { top: calc(var(--slah-h) + 46px); }
}

/* Mega menu näkyvyys: vain JS:n is-open – :focus-within poistettu (ks. dropdown) */
.sla-nav__item--has-mega.is-open > .sla-mega {
    display: block;
}

.sla-mega__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    max-width: var(--slah-max);
    margin: 0 auto;
    padding: 28px 28px 32px;
}

.sla-mega__col {
    padding: 0 20px;
    border-right: 1px solid rgba(0,0,0,.06);
}

.sla-mega__col:first-child { padding-left: 0; }
.sla-mega__col:last-child  { border-right: none; padding-right: 0; }

.sla-mega__heading {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111 !important;
    text-decoration: none !important;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #111;
    transition: opacity var(--slah-transition);
}

.sla-mega__heading:hover { opacity: .65; }

.sla-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sla-mega__list a,
.sla-mega__list a:link,
.sla-mega__list a:visited {
    display: block;
    padding: 6px 8px;
    font-size: 13px;
    color: #444 !important;
    text-decoration: none !important;
    border-radius: 7px;
    transition: background var(--slah-transition), color var(--slah-transition);
    line-height: 1.35;
}

.sla-mega__list a:hover {
    background: var(--slah-hover-bg);
    color: #000 !important;
}

/* ══════════════════════════════════════════════
   ACTIONS (oikea reuna)
══════════════════════════════════════════════ */
.sla-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Ikoni-nappi (haku) */
.sla-header__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--slah-text);
    transition: background var(--slah-transition);
    padding: 0;
    flex-shrink: 0;
}

.sla-header__icon-btn:hover { background: var(--slah-hover-bg); }

/* Cart wrapper */
.sla-header__cart {
    display: flex;
    align-items: center;
}

/* Simple Cart Button plugin – kompakti versio headeriin */
.sla-header__cart .simple-cart-button {
    padding: 8px 15px !important;
    font-size: 13px !important;
    border-radius: 50px !important;
    border-width: 1.5px !important;
    gap: 7px !important;
    color: #111 !important;
}

.sla-header__cart .simple-cart-button:hover {
    transform: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
}

.sla-header__cart .simple-cart-button__icon {
    font-size: 18px !important;
}

/* Fallback cart button */
.sla-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1.5px solid #111;
    border-radius: 50px;
    color: #111 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--slah-transition), color var(--slah-transition);
}
.sla-cart-btn:hover {
    background: #111;
    color: #fff !important;
}

/* ── Hamburger ── */
.sla-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--slah-transition);
}

.sla-header__burger:hover { background: var(--slah-hover-bg); }

.sla-burger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #111;
    border-radius: 2px;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
    transform-origin: center;
}

/* Animaatio: hamburger → ✕ */
.sla-header__burger--open .sla-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sla-header__burger--open .sla-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sla-header__burger--open .sla-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════
   INLINE HAKU (desktop – aina näkyvissä)
══════════════════════════════════════════════ */
/* ── Inline haku: EI overflow:hidden – se leikkasi painikkeen SVG:n.
   Pyöristykset annetaan suoraan inputille ja napille. ── */
.sla-header__inline-search {
    display: flex;
    align-items: center;
    /* Ei overflow:hidden! Käytetään border-radius suoraan lapsilla. */
    background: transparent;
    flex-shrink: 0;        /* ei puristu naviin */
}

/* Koko wrapper (input + nappi) visuaalisena yksikkönä */
.sla-header__inline-search__input {
    width: 180px;          /* kiinteä leveys – ei painu naviin */
    min-width: 0;
    border: 1.5px solid #ddd;
    border-right: none;    /* nappi jatkaa reunaa */
    border-radius: 50px 0 0 50px;   /* vasemmalle pyöreä */
    background: #f4f4f4;
    padding: 8px 10px 8px 16px;
    font-size: 13.5px;
    font-family: var(--slah-font);
    color: var(--slah-text);
    outline: none;
    line-height: 1;
    transition: border-color var(--slah-transition), background var(--slah-transition);
}

.sla-header__inline-search__input:focus {
    background: #fff;
    border-color: rgba(0,0,0,.25);
}

.sla-header__inline-search__input::placeholder {
    color: #aaa;
}

/* Reset: estä WordPress/teema-CSS ylikirjoittamasta input-tyylejä */
.sla-header__inline-search__input:not([type]),
.sla-header__inline-search__input[type="text"] {
    border: 1.5px solid #ddd !important;
    border-right: none !important;
    border-radius: 50px 0 0 50px !important;
    background: #f4f4f4 !important;
    box-shadow: none !important;
    height: auto !important;
}
.sla-header__inline-search__input[type="text"]:focus {
    background: #fff !important;
    border-color: rgba(0,0,0,.25) !important;
    box-shadow: none !important;
}

.sla-header__inline-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;          /* sama korkeus kuin input (8+1.5+8+1.5 = 19*2 ≈ 38) */
    flex-shrink: 0;
    border: 1.5px solid #111;
    border-radius: 0 50px 50px 0;   /* oikealle pyöreä */
    background: #111;
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background var(--slah-transition), border-color var(--slah-transition);
    /* SVG näkyy varmasti – ei clippingiä */
    overflow: visible;
}

.sla-header__inline-search__btn svg {
    display: block;
    flex-shrink: 0;
    stroke: #fff;
}

.sla-header__inline-search__btn:hover {
    background: #333;
    border-color: #333;
}

/* Piilota kun nav-itemit eivät enää mahdu hakukentän kanssa:
   6 nav-kohtaa + logo + ostoskori vaativat ~1250px ennen kuin haku mahtuu mukaan */
@media (max-width: 1250px) {
    .sla-header__inline-search {
        display: none;
    }
}

/* ══════════════════════════════════════════════
   HAKUPALKKI (poistettu – pidetään vain mobiili-draweria varten)
══════════════════════════════════════════════ */
/* Vanha slide-down hakupalkki poistettu – käytä drawerin hakua mobiililla */
.sla-header__search-bar { display: none; }

/* Tyhjennetään vanha hakupalkki-CSS joka on jäljempänä tiedostossa */
.sla-header__search-inner {
    max-width: var(--slah-max);
    margin: 0 auto;
}

.sla-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,.12);
    border-radius: 50px;
    padding: 0 8px 0 18px;
    transition: border-color .2s, box-shadow .2s;
}

.sla-search-form:focus-within {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.sla-search-form__icon {
    flex-shrink: 0;
    color: #999;
}

.sla-search-form__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 13px 0;
    font-size: 15px;
    font-family: var(--slah-font);
    color: #111;
    outline: none;
    min-width: 0;
}

.sla-search-form__input::placeholder { color: #aaa; }

.sla-search-form__submit {
    flex-shrink: 0;
    padding: 9px 22px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--slah-font);
    transition: background .15s;
}

.sla-search-form__submit:hover { background: #333; }

.sla-search-form__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #888;
    transition: background .15s, color .15s;
    padding: 0;
}
.sla-search-form__close:hover { background: #eee; color: #111; }

/* ══════════════════════════════════════════════
   MOBIILI DRAWER
══════════════════════════════════════════════ */
.sla-drawer {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
    font-family: var(--slah-font);
}

.sla-drawer--open { pointer-events: auto; }

.sla-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s;
}

.sla-drawer--open .sla-drawer__backdrop { opacity: 1; }

.sla-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(340px, 92vw);
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sla-drawer--open .sla-drawer__panel { transform: translateX(0); }

/* Drawer header */
.sla-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}

.sla-drawer__logo {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.sla-drawer__logo img {
    height: 42px;
    width: auto;
    mix-blend-mode: multiply;
}

.sla-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f4f4f4;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #111;
    padding: 0;
    transition: background .15s;
}

.sla-drawer__close:hover { background: #e5e5e5; }

/* Drawer haku */
.sla-drawer__search {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}

/* Sama visuaalinen tyyli kuin desktop inline-haku */
.sla-drawer__search-form {
    display: flex;
    align-items: center;
}

.sla-drawer__search-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #ddd;
    border-right: none;
    border-radius: 50px 0 0 50px;
    background: #f4f4f4;
    padding: 9px 10px 9px 16px;
    font-size: 14px;
    font-family: var(--slah-font);
    color: #111;
    outline: none;
    line-height: 1;
    transition: border-color .15s, background .15s;
    /* Reset WordPress/teema-CSS */
    box-shadow: none !important;
    height: auto !important;
}

.sla-drawer__search-input:focus {
    background: #fff;
    border-color: rgba(0,0,0,.25);
}

.sla-drawer__search-input::placeholder { color: #aaa; }

.sla-drawer__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1.5px solid #111;
    border-radius: 0 50px 50px 0;
    background: #111;
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background .15s, border-color .15s;
}

.sla-drawer__search-btn svg {
    display: block;
    stroke: #fff;
    flex-shrink: 0;
}

.sla-drawer__search-btn:hover {
    background: #333;
    border-color: #333;
}

/* Drawer nav */
.sla-drawer__nav {
    flex: 1;
}

.sla-drawer__list {
    list-style: none;
    margin: 0;
    padding: 8px 10px;
}

.sla-drawer__item {
    margin: 0;
    padding: 0;
}

.sla-drawer__link,
.sla-drawer__link:link,
.sla-drawer__link:visited {
    display: block;
    padding: 13px 10px;
    font-size: 15px;
    font-weight: 500;
    color: #111 !important;
    text-decoration: none !important;
    border-radius: 10px;
    transition: background .15s;
}

.sla-drawer__link:hover { background: #f4f4f4; }

/* Accordion rivi */
.sla-drawer__row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sla-drawer__row .sla-drawer__link {
    flex: 1;
}

.sla-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;      /* kasvatettu 38 → 46 px – helpompi painaa */
    height: 46px;
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    color: #555;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s, transform .25s;
}

.sla-drawer__toggle:hover { background: #f4f4f4; }
.sla-drawer__toggle--open { transform: rotate(180deg); color: #111; }

/* Accordion alavalikko */
.sla-drawer__sub {
    list-style: none;
    margin: 0 0 6px 0;
    padding: 4px 0 4px 14px;
    border-left: 2px solid rgba(0,0,0,.08);
    margin-left: 10px;
}

.sla-drawer__sub li a,
.sla-drawer__sub li a:link,
.sla-drawer__sub li a:visited {
    display: block;
    padding: 9px 10px;
    font-size: 14px;
    color: #333 !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: background .15s;
    line-height: 1.35;
}

.sla-drawer__sub li a:hover { background: #f4f4f4; color: #000 !important; }

/* Sub-ryhmä otsikko */
.sla-drawer__sub-heading {
    display: block;
    padding: 10px 10px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999 !important;
    text-decoration: none !important;
    margin-top: 8px;
}

.sla-drawer__sub-group:first-child .sla-drawer__sub-heading { margin-top: 0; }

.sla-drawer__sub-group > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Drawer footer CTA */
.sla-drawer__footer {
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}

.sla-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #111;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--slah-font);
    transition: background .2s;
}

.sla-drawer__cta:hover { background: #333; color: #fff !important; }

/* ══════════════════════════════════════════════
   RESPONSIIVISUUS
══════════════════════════════════════════════ */

/* Tabletti (900–1200px): pienennä padding ja fontti */
@media (max-width: 1200px) {
    .sla-header__inner { padding: 0 20px; }
    .sla-mega__inner   { padding: 24px 20px 28px; }
    .sla-header__search-bar { padding: 10px 20px; }
}

/* Nav-linkit kompaktimmiksi 901–1250px välillä (search piilotettu, mutta nav mahtuu paremmin) */
@media (max-width: 1250px) {
    .sla-nav__link,
    .sla-nav__link--btn {
        padding: 8px 10px;
        font-size: 13.5px;
    }
}

/* Piilotetaan desktop-nav tabletilla */
@media (max-width: 900px) {
    :root { --slah-h: 62px; }

    .sla-header { --slah-h: 62px; }

    .sla-nav          { display: none; }
    .sla-header__burger { display: flex; }

    .sla-header__inner { gap: 10px; }

    /* Pieniempi hakupalkki */
    .sla-header__search-bar { padding: 10px 16px; }
}

/* Puhelin */
@media (max-width: 600px) {
    .sla-header { --slah-h: 58px; }
    .sla-header__inner { padding: 0 14px; gap: 6px; }

    /* Piilota ostoskorin label pienimmillä */
    .sla-header__cart .simple-cart-button__label,
    .sla-cart-btn .sla-cart-btn__label { display: none; }
}

/* Erittäin kapeat (< 360px) */
@media (max-width: 360px) {
    .sla-header__cart .simple-cart-button__total { display: none; }
}

/* Ultra wide: max-width pitää kaiken kasassa */
@media (min-width: 1440px) {
    .sla-mega__inner   { max-width: var(--slah-max); }
    .sla-header__inner { max-width: var(--slah-max); }
}

/* ══════════════════════════════════════════════════════════════
   ANTI-PINK – nollaa WordPress / Elementor / WooCommerce
   oletus-fokus- ja aktiivisuusvärit kaikista custom-header-
   napeista. Vaaleanpunainen tuli selaimen tai teeman
   button:focus { background / outline / box-shadow } -tyylistä.
══════════════════════════════════════════════════════════════ */

/* Kaikki napit kerralla: poista vaaleanpunainen fokustausta */
.sla-header__burger,
.sla-header__burger:hover,
.sla-header__burger:focus,
.sla-header__burger:active,
.sla-header__burger:focus-visible,
.sla-header__inline-search__btn,
.sla-header__inline-search__btn:focus,
.sla-header__inline-search__btn:active,
.sla-header__inline-search__btn:focus-visible,
.sla-drawer__close,
.sla-drawer__close:focus,
.sla-drawer__close:active,
.sla-drawer__close:focus-visible,
.sla-drawer__toggle,
.sla-drawer__toggle:focus,
.sla-drawer__toggle:active,
.sla-drawer__toggle:focus-visible,
.sla-drawer__search-btn,
.sla-drawer__search-btn:focus,
.sla-drawer__search-btn:active,
.sla-drawer__search-btn:focus-visible {
    /* Nollaa kaikki teeman/WP:n asettamat värit */
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    /* Ei ylikirjoiteta background tässä – se asetetaan erikseen alla */
}

/* Burger: `:active` ja `:focus` → sama kuin hover, ei vaaleanpunaista */
.sla-header__burger:focus,
.sla-header__burger:active,
.sla-header__burger:focus-visible {
    background: var(--slah-hover-bg) !important;
}

/* Desktop hakunappi: `:focus` / `:active` → musta (ei vaaleanpunainen) */
.sla-header__inline-search__btn:focus,
.sla-header__inline-search__btn:active,
.sla-header__inline-search__btn:focus-visible {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* Drawer sulje (X): `:focus` / `:active` → harmaa (ei vaaleanpunainen) */
.sla-drawer__close:focus,
.sla-drawer__close:active,
.sla-drawer__close:focus-visible {
    background: #e5e5e5 !important;
    color: #111 !important;
}

/* Drawer hakunappi: `:focus` / `:active` → musta */
.sla-drawer__search-btn:focus,
.sla-drawer__search-btn:active,
.sla-drawer__search-btn:focus-visible {
    background: #333 !important;
    border-color: #333 !important;
}

/* Drawer alivalikko-toggle (nuoli-nappi):
   – hover: harmaa tausta, mutta nuoli pysyy mustana
   – focus/active: ei vaaleanpunaista, nuoli pysyy mustana */
.sla-drawer__toggle:hover,
.sla-drawer__toggle:focus,
.sla-drawer__toggle:active,
.sla-drawer__toggle:focus-visible {
    background: #ececec !important;
    color: #111 !important;       /* nuolen väri pysyy mustana */
}
.sla-drawer__toggle svg {
    stroke: currentColor;         /* seuraa color-arvoa */
    color: inherit;
}

/* Toggle avattu: myös auki-tilassa väri pysyy mustana */
.sla-drawer__toggle--open,
.sla-drawer__toggle--open:hover,
.sla-drawer__toggle--open:focus,
.sla-drawer__toggle--open:active {
    color: #111 !important;
    background: #ececec !important;
}