/* ==========================================================
   Header Bottom
   Logo | Meny | Banner | Sökruta
   ========================================================== */

#header .header-bottom__row {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 12px;
}

/* Logo */
#header .header-bottom__logo {
    order: 1;
    flex: 0 0 auto;
}

/* Meny */
#header .ps-mainmenu--desktop {
    order: 1;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

#header .pchtoppbanderoll-col {
    order: 1;          /* tredje elementet i Flexbox */
    flex: 0 0 auto;    /* behåll naturlig storlek */
    margin-left: 15px; /* 15 px mellanrum till vänster */
}

/* Banner */
#header .toppbanderoll {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    margin: 0;
}

#header .toppbanderoll img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Sökruta */
#header #_desktop_ps_searchbar {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
}



/* ==========================================================
   Header Top
   ========================================================== */

#header .header-top .header-top-right {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
}

/* Banner */
#header .header-top .header-top-right .pchtoppbanderoll-col {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

/* Sökruta */
#header .header-top .header-top-right .search-widget,
#header .header-top .header-top-right .search-widgets,
#header .header-top .header-top-right #search_widget {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    float: none !important;
    margin: 0;
    width: 12rem;
    max-width: 100%;
}

/* Övrigt innehåll */
#header .header-top .header-top-right > :not(.pchtoppbanderoll-col):not(.search-widget):not(.search-widgets):not(#search_widget) {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
}

/* ==========================================================
   Mobil
   ========================================================== */

@media (max-width:575px){

    #header .header-top .header-top-right,
    #header .header-bottom__row{
        display:block !important;
    }

}

/* Banderoll */
@media (max-width:760px){

    #header .header-bottom__row{
        flex-wrap:wrap !important;
    }

    #header .pchtoppbanderoll-col{
        order:10;
        flex:0 0 100%;
        width:100%;
        margin:10px 0 0 0;
        text-align:center;
    }

}

/* Sökrutan på egen rad under 800 px */
@media (max-width:1000px){

    #header .header-bottom__row{
        flex-wrap:wrap !important;
    }

    #header #_desktop_ps_searchbar{
        order:9;
        flex:0 0 100%;
        width:100%;
        margin:10px 0 0 0 !important;
    }

}
