/* ==========================================
   1. STYL DLA KOMPUTERÓW (Ekrany powyżej 768px)
   ========================================== */
@media screen and (min-width: 769px) {
    /* Główny kontener wyszukiwarki jako stabilny element menu */
    .is-search-form,
    div[class*="is-search-form"] {
        display: inline-block !important;
        vertical-align: middle !important;
        width: 220px !important;      /* Kompaktowa szerokość */
        margin-left: 20px !important; /* Odstęp od linków w menu */
        position: relative !important;
        z-index: 10 !important;
    }

    /* Wygląd pola tekstowego na komputerze */
    .is-search-form input[type="search"],
    div[class*="is-search-form"] input.search-field {
        width: 100% !important;
        height: 38px !important;
        border: 1px solid #dcdcdc !important;
        border-radius: 4px !important;
        padding: 6px 12px !important;
        background-color: #ffffff !important; /* Wymuszamy czyste, białe tło pola */
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Zabezpieczenie paska menu – nadajemy mu tło, żeby tekst pod nim nie prześwitywał */
    .site-header, 
    .main-navigation,
    .nav-menu {
        background-color: #ffffff !important; /* Podmień na kolor swojego menu, jeśli nie jest białe */
        position: relative !important;
        z-index: 100 !important; /* Wyciągamy cały nagłówek nad przewijany tekst */
    }
}

/* ==========================================
   2. STYL DLA TELEFONÓW (Ekrany poniżej 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    /* Główny kontener Ivory Search na telefonie */
    .is-search-form,
    div[class*="is-search-form"] {
        display: block !important;
        width: 85% !important;        /* Szerokość dopasowana do ekranu smartfona */
        max-width: 380px !important;  
        margin: 20px auto !important; /* Centrowanie paska na ekranie */
        float: none !important;
        clear: both !important;
    }

    /* Wygląd nowoczesnej pigułki na telefonie */
    .is-search-form input[type="search"],
    div[class*="is-search-form"] input.search-field {
        width: 100% !important;
        border: 1px solid #cccccc !important;
        border-radius: 30px !important; /* Mocne zaokrąglenie tylko na mobile */
        padding: 12px 20px !important;
        background-color: #fafafa !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.06) !important; /* Subtelny cień */
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    /* Ukrywanie starej wyszukiwarki na samym dole telefonu */
    .sidebar-widget-area .widget_search, 
    #secondary .widget_search,
    .sidebar-widget-area .jetpack-search-form,
    #secondary .jetpack-search-form {
        display: none !important;
    }
}

CSS
/* Usuwamy sztuczną pustą przestrzeń między nagłówkiem a treścią */
.site-content, 
#content,
.content-area,
body:not(.search-results) article {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.is-menu-bar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}