/* =============================================
MOBILE STICKY SEARCH BAR
Attach to top of mobile screen, collapses on scroll
============================================= */
/* --- Reset & base --- */
.mobile-sticky-search *,
.mobile-sticky-search *::before,
.mobile-sticky-search *::after {
box-sizing: border-box;
}
/* --- Fixed wrapper --- */
.mobile-sticky-search {
position: relative;
top: 0px;
left: 0;
right: 0;
z-index: 9999;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
transition: box-shadow 0.2s ease, padding 0.2s ease;
font-family: 'DM Sans', sans-serif;
}
.mobile-static-search {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
padding: 14px 16px;
font-family: 'DM Sans', sans-serif;
}
.mobile-sticky-search.scrolled {
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
top: 0px !important;
display: none !important;
}
/* --- Brand header row --- */
.mss-brand {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.mss-brand-logo {
font-size: 13px;
font-weight: 600;
color: #e20000;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 6px;
}
.mss-brand-hint {
font-size: 12px;
color: #0F8BD9;
}
/* --- Full search (visible at top) --- */
.mss-full {
display: block;
}
.mss-row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.mss-row:last-child {
margin-bottom: 0;
}
/* --- Field wrappers --- */
.mss-field {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
.mss-field .mss-icon {
position: absolute;
left: 7px;
width: 20px;
height: 20px;
color: #9ca3af;
pointer-events: none;
flex-shrink: 0;
z-index: 1;
}
/* ── Strzałka chevron dla pól z datalist (producent + kategoria) ── */
.mss-field.mss-has-datalist::after {
content: '';
position: absolute;
right: 15px;
top: 50%;
width: 12px;
height: 12px;
border-right: 2px solid #9ca3af;
border-bottom: 2px solid #9ca3af;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
transition: border-color 0.15s, transform 0.2s;
}
/* Chevron obraca się i czerwienieje przy focus */
.mss-field.mss-has-datalist:focus-within::after {
border-color: #e20000;
transform: translateY(-35%) rotate(225deg);
}
.mss-field input,
.mss-field select {
width: 100%;
height: 40px;
padding: 0 10px 0 32px;
border: 1px solid #9CA3AF;
border-radius: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #1a1a1a;
background: #f9fafb;
-webkit-appearance: none;
appearance: none;
background-image: none !important;
outline: none;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
/* Ukrywa natywną strzałkę datalist – Chrome/Edge/Safari */
.mss-field input::-webkit-calendar-picker-indicator {
display: none !important;
opacity: 0;
}
/* Pola z datalist – dodatkowy padding po prawej na strzałkę */
.mss-field.mss-has-datalist input {
padding-right: 28px;
}
/* Ukrywa natywną strzałkę datalist – Chrome/Edge/Safari */
.mss-field input::-webkit-calendar-picker-indicator {
display: none !important;
opacity: 0;
}
.mss-field input:focus,
.mss-field select:focus {
border-color: #0F8BD9;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(15, 139, 217, 0.12);
}
.mss-field input::placeholder {
color: #9ca3af;
}
/* --- Search button --- */
.mss-btn {
height: 40px;
padding: 0 14px;
background: #e20000;
border: none;
border-radius: 10px;
color: #ffffff;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.mss-btn:active {
transform: scale(0.97);
background: #c70000;
}
.mss-btn:hover {
background: #c70000;
box-shadow: 0 4px 12px rgba(226, 0, 0, 0.30);
}
.mss-btn svg {
width: 20px;
height: 20px;
}
/* --- Collapsed bar (visible on scroll) --- */
.mss-collapsed {
display: none;
align-items: center;
gap: 8px;
}
.mss-collapsed-wrap {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
.mss-collapsed-wrap .mss-icon {
position: absolute;
left: 10px;
width: 15px;
height: 15px;
color: #9ca3af;
pointer-events: none;
}
.mss-collapsed-input {
flex: 1;
height: 40px;
padding: 0 12px 0 36px;
border: 1px solid #e5e7eb;
border-radius: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #1a1a1a;
background: #f9fafb;
outline: none;
transition: border-color 0.15s, background 0.15s;
width: 100%;
}
.mss-collapsed-input:focus {
border-color: #0F8BD9;
background: #ffffff;
}
.mss-expand-btn {
width: 40px;
height: 40px;
flex-shrink: 0;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #f9fafb;
color: #0F8BD9;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.mss-expand-btn:active {
background: #e8f5ee;
}
.mss-expand-btn svg {
width: 18px;
height: 18px;
color: #0F8BD9;
}
/* --- Icon button (search only, no text, for collapsed) --- */
.mss-btn.mss-btn-icon {
padding: 0 12px;
}
/* =============================================
RESPONSIVE: only show on mobile
============================================= */
@media (min-width: 768px) {
.mobile-sticky-search {
display: none;
}
}
@media screen and (max-width: 768px) {
#mss-wrapper input,
#mss-wrapper .mss-collapsed-input,
.headerSection__searchForm input,
.newsletter1__form-wrapper input,
.customerLoginForm-js input,
.registrationFormCompany-js input,
.registrationFormCompany-js select,
.customerData input,
.cart__invoice input,
.cart__invoice select,
.discountCode__input input,
.form__input-value-js,
.form__inputValidate-js {
font-size: 16px !important;
}
#mss-wrapper input:focus,
.headerSection__searchForm input:focus,
.newsletter1__form-wrapper input:focus,
.customerLoginForm-js input:focus,
.registrationFormCompany-js input:focus,
.registrationFormCompany-js select:focus,
.customerData input:focus,
.cart__invoice input:focus,
.cart__invoice select:focus,
.discountCode__input input:focus {
font-size: 16px !important;
}
}
@media screen and (max-width: 768px) {
#mss-manufacturer-search,
#mss-category-search,
#mss-mss-search-input {
font-size: 16px !important;
}
#mss-manufacturer-search:focus,
#mss-category-search:focus,
#mss-mss-search-input:focus {
font-size: 16px !important;
}
}
#mss-manufacturer-search[type="text"],
#mss-category-search[type="text"],
#mss-mss-search-input[type="text"] {
-webkit-appearance: none;
appearance: none;
font-size: 16px !important;
}
/* =============================================
ODŚWIEŻONY WYGLĄD (2026-09-28) - spójny z wyszukiwarką części na komputerze
(css/desktop-search.css, .part-search): jasnoszary panel z odstępem od
krawędzi ekranu, białe pola z szarą ramką, czerwone podświetlenie przy
kliknięciu, czcionka Poppins jak w całym sklepie.
============================================= */
.mobile-sticky-search {
padding: 12px;
background: #f3f3f3;
border-bottom: 0;
font-family: Poppins, sans-serif;
}
/* layout0.css ma globalne svg { fill: #000 }, które zamalowywało ikony na czarno */
.mobile-sticky-search svg {
fill: none;
}
.mss-field .mss-icon {
left: 12px;
width: 18px;
height: 18px;
color: #8a8a8a;
transition: color .15s;
}
.mss-field:focus-within .mss-icon {
color: #e20000;
}
.mss-field input,
.mss-field select {
height: 46px;
padding: 0 12px 0 38px;
border: 1px solid #dcdcdc;
border-radius: 10px;
background: #fff;
color: #262626;
font-family: Poppins, sans-serif;
}
.mss-field.mss-has-datalist input {
padding-right: 30px;
}
.mss-field input::placeholder {
color: #737373;
}
.mss-field input:focus,
.mss-field select:focus {
border-color: #e20000;
background: #fff;
box-shadow: 0 0 0 3px rgba(226, 0, 0, .12);
}
.mss-field.mss-has-datalist::after {
right: 13px;
width: 7px;
height: 7px;
border-color: #8a8a8a;
}
/* pole "Model" to wyszukiwanie, nie lista - bez strzałki */
.mss-field:has(#mss-search-input)::after {
content: none;
}
.mss-field #mss-search-input {
padding-right: 12px;
}
.mss-btn {
height: 46px;
padding: 0 16px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(226, 0, 0, .25);
font-family: Poppins, sans-serif;
font-size: 14px;
font-weight: 600;
}
.mss-btn svg {
width: 18px;
height: 18px;
}
.mss-collapsed-input {
height: 46px;
border-color: #dcdcdc;
background: #fff;
font-family: Poppins, sans-serif;
}
.mss-collapsed-input:focus {
border-color: #e20000;
}
.mss-expand-btn {
width: 46px;
height: 46px;
border-color: #dcdcdc;
background: #fff;
}
.mss-expand-btn svg {
color: #262626;
}
/* =============================================
WYSZUKIWARKA CZĘŚCI W MENU "Kategorie" (telefon) - 2026-09-29
partials/part-search-menu.html. js/part-search.js przenosi blok pod
przełącznik "Produkty / Części" (klasa .is-placed) i pokazuje go tylko
w zakładce "Części". Pola i przycisk korzystają ze stylów .mss-* powyżej,
listy rozwijane - css/desktop-search.css (.ps-dd).
============================================= */
.ps-menu-search {
display: none;
box-sizing: border-box;
width: 100%;
margin: 12px 0 6px;
padding: 12px;
background: #f3f3f3;
border-radius: 12px;
font-family: Poppins, sans-serif;
letter-spacing: normal;
text-align: left;
}
.ps-menu-search.is-placed {
display: block;
}
.ps-menu-search[hidden] {
display: none !important;
}
.ps-menu-search *,
.ps-menu-search *::before,
.ps-menu-search *::after {
box-sizing: border-box;
}
/* layout0.css ma globalne svg { fill: #000 } */
.ps-menu-search svg {
fill: none;
}
.ps-menu-search__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.ps-menu-search__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
}
.ps-menu-search__icon svg {
stroke: #e20000;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.ps-menu-search__text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.ps-menu-search__title {
color: #262626;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.ps-menu-search__hint {
color: #666;
font-size: 12px;
line-height: 1.35;
}
/* 16px - przy mniejszej czcionce iPhone powiększa stronę po kliknięciu w pole */
.ps-menu-search .mss-field input {
font-size: 16px !important;
}
/* pole "Model" bez strzałki listy - etykieta może sięgać prawej krawędzi */
.ps-menu-search .ps-menu-search__model .ps-ph {
right: 12px;
}
@media (min-width: 769px) {
.ps-menu-search {
display: none !important;
}
}
/* =============================================
ODSTĘP POD PASKIEM WYSZUKIWARKI (telefon) - 2026-09-29
Pasek wyszukiwarki części wystaje poza nagłówek o stałej wysokości
(layout-m0.css) i zasłaniał początek strony. js/mobile-search.js mierzy,
ile zasłania (--mss-odstep), i dodaje klasę do <body>:
.mss-nad-lista   - odstęp na górze listy produktów (przewija się razem z nią),
.mss-nad-trescia - odstęp nad całą treścią strony (<main>).
============================================= */
@media (max-width: 768px) {
body.mss-nad-lista main .product-list-js {
padding-top: var(--mss-odstep, 0px);
}
body.mss-nad-trescia > main {
padding-top: var(--mss-odstep, 0px);
}
}