/* Hide on mobile */
.advancedSearch {
display: none !important;
}
@media (min-width: 769px) {
.advancedSearch {
display: block !important;
}
}
/* ==========================================================================
WYSZUKIWARKA CZĘŚCI w nagłówku (partials/part-search.html) - wygląd 2026-09-28
Jasnoszary panel z tytułem, pola z ikonami, czerwony przycisk.
Szerokość jak treść strony głównej: 94% ekranu, maks. 1400px.
Pola nadal korzystają z natywnych list (datalist) - logika w js/part-search*.js.
========================================================================== */
.advancedSearch.part-search {
box-sizing: border-box;
width: 94% !important;
max-width: 1400px !important;
height: auto;
margin: 16px auto 0 !important;
padding: 0 !important;
line-height: 1.4;
user-select: none;
font-family: Poppins, sans-serif;
}
.part-search .ps-panel {
display: flex;
align-items: center;
gap: 24px;
margin: 0;
padding: 16px 16px 16px 20px;
background: #f3f3f3;
border-radius: 12px;
}
/* --- tytuł po lewej --- */
.part-search .ps-head {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.part-search .ps-head__icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
}
.part-search .ps-head__icon svg {
fill: none;
stroke: #e20000;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.part-search .ps-head__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.part-search .ps-head__title {
font-size: 16px;
font-weight: 600;
color: #262626;
white-space: nowrap;
}
.part-search .ps-head__hint {
max-width: 190px;
font-size: 12px;
line-height: 1.35;
color: #666;
}
/* --- pola --- */
.part-search .search {
display: flex;
align-items: center;
flex: 1 1 auto;
gap: 10px;
width: auto;
min-width: 0;
height: auto;
margin: 0 !important;
}
.part-search .ps-field {
position: relative;
flex: 1 1 0;
width: auto;
min-width: 0;
margin: 0;
}
.part-search .ps-field__icon {
position: absolute;
top: 50%;
left: 14px;
z-index: 1;
width: 20px;
height: 20px;
fill: none;
stroke: #8a8a8a;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateY(-50%);
pointer-events: none;
transition: stroke .15s ease;
}
.part-search .ps-field:focus-within .ps-field__icon {
stroke: #e20000;
}
.part-search .search .searchProducer,
.part-search .search .searchCategory,
.part-search .search .searchInput {
display: block;
width: 100% !important;
height: 52px !important;
margin: 0 !important;
padding: 0 40px 0 44px !important;
border: 1px solid #dcdcdc !important;
border-radius: 10px !important;
background: #fff !important;
box-shadow: none;
box-sizing: border-box;
color: #262626;
font-family: Poppins, sans-serif;
font-size: 14px;
font-weight: 500;
text-indent: 0;
appearance: none;
-webkit-appearance: none;
cursor: text;
transition: border-color .15s ease, box-shadow .15s ease;
}
.part-search .search .searchProducer,
.part-search .search .searchCategory {
cursor: pointer;
}
.part-search .search .searchInput {
padding-right: 16px !important;
}
.part-search .search .searchProducer::placeholder,
.part-search .search .searchCategory::placeholder,
.part-search .search .searchInput::placeholder {
color: #737373;
font-weight: 400;
opacity: 1;
}
.part-search .search .searchProducer:hover,
.part-search .search .searchCategory:hover,
.part-search .search .searchInput:hover {
border-color: #b5b5b5 !important;
background-image: none !important; /* layout1.css dokłada tu ikonę strzałki */
}
.part-search .search .searchProducer:focus,
.part-search .search .searchCategory:focus,
.part-search .search .searchInput:focus {
border-color: #e20000 !important;
box-shadow: 0 0 0 3px rgba(226, 0, 0, .12);
outline: none;
}
/* bez natywnych strzałek list (Chrome/Edge/Safari) */
.part-search .search input::-webkit-calendar-picker-indicator {
display: none !important;
opacity: 0;
}
/* strzałka rozwijania przy polach z listą (producent, urządzenie) */
.part-search .ps-field--list::after {
content: '';
position: absolute;
top: 50%;
right: 16px;
width: 7px;
height: 7px;
border-right: 2px solid #8a8a8a;
border-bottom: 2px solid #8a8a8a;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
transition: border-color .15s ease, transform .2s ease;
}
.part-search .ps-field--list:focus-within::after {
border-color: #e20000;
transform: translateY(-30%) rotate(225deg);
}
.part-search .searchInput-wrap::after {
content: none;
}
/* --- przycisk --- */
.part-search .search .searchButton {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 10px;
width: auto;
height: 52px !important;
margin: 0 !important;
padding: 0 26px !important;
border: 0 !important;
border-radius: 10px !important;
background: #e20000;
box-shadow: 0 4px 14px rgba(226, 0, 0, .25);
box-sizing: border-box;
color: #fff;
font-family: Poppins, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s ease, box-shadow .15s ease;
}
.part-search .search .searchButton svg {
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
.part-search .search .searchButton:hover {
background: #c70000;
border: 0 !important;
box-shadow: 0 6px 18px rgba(226, 0, 0, .32);
color: #fff;
}
.part-search .search .searchButton:focus-visible {
outline: 2px solid #262626;
outline-offset: 2px;
}
/* --- węższe ekrany --- */
@media (max-width: 1280px) {
.part-search .ps-head__hint { display: none; }
}
@media (max-width: 1100px) {
.part-search .ps-head { display: none; }
.part-search .ps-panel { padding: 12px; }
.part-search .search .searchButton { padding: 0 18px !important; }
}
@media (max-width: 900px) {
.part-search .search .searchButton span { display: none; }
.part-search .search .searchButton { width: 52px; padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
.part-search .ps-field__icon,
.part-search .search input,
.part-search .ps-field--list::after,
.part-search .search .searchButton { transition: none; }
}
/* ==========================================================================
Stary wygląd - zostawiony dla strony "Wyszukiwanie zaawansowane"
(static-elements/advanced-search), która też używa klasy .advancedSearch.
========================================================================== */
.advancedSearch:not(.part-search) {
max-width: auto !important;
height: auto;
user-select: none;
line-height: 1.5em;
margin: 25px auto 10px auto !important;
padding-right: 100px !important;
}
.advancedSearch:not(.part-search) .search {
width: 100%;
display: flex;
align-items: flex-start;
}
.advancedSearch:not(.part-search) .search .searchCategory,
.advancedSearch:not(.part-search) .search .searchProducer {
width: 100% !important;
height: 53.5px !important;
margin: 0 !important;
padding: 0 36px 0 10px !important;
padding-block: 0 !important;
font-size: 13px;
color: #191616;
border: 1px solid #73767A !important;
border-radius: 5px !important;
background-color: #FFFFFF;
appearance: none;
-webkit-appearance: none;
background-image: none !important;
text-indent: 5px;
transition: border-color 200ms, box-shadow 200ms;
box-sizing: border-box;
cursor: pointer;
}
.advancedSearch:not(.part-search) .search .searchCategory:focus,
.advancedSearch:not(.part-search) .search .searchProducer:focus {
border-color: #e20000 !important;
box-shadow: 0 0 0 3px rgba(226, 0, 0, 0.10);
outline: none;
}
.advancedSearch:not(.part-search) .search .searchInput {
width: 100%;
height: 53.5px !important;
padding: 0 36px 0 20px;
font-size: 13px;
color: #191616;
border: 1px solid #73767A;
border-radius: 5px;
margin: 0 !important;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
background-image: none !important;
transition: border-color 200ms, box-shadow 200ms;
}
.advancedSearch:not(.part-search) .search .searchInput:focus {
border-color: #e20000;
box-shadow: 0 0 0 3px rgba(226, 0, 0, 0.10);
outline: none;
}
.advancedSearch:not(.part-search) .search .searchButton {
margin-right: 15px !important;
width: 16%;
height: 53.5px !important;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background-color: rgba(226, 0, 0, 1.00);
color: #ffffff;
border: 1px solid #e20000 !important;
border-radius: 5px !important;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 13px;
cursor: pointer;
transition: background 200ms, box-shadow 200ms;
box-sizing: border-box;
flex-shrink: 0;
}
.advancedSearch:not(.part-search) .search .searchButton:hover {
background-color: #c70000;
box-shadow: 0 4px 12px rgba(226, 0, 0, 0.30);
}
/* ==========================================================================
LISTY ROZWIJANE wyszukiwarki części (komputer i telefon) - 2026-09-28
Tworzy je js/part-search-dropdown.js zamiast natywnych list przeglądarki
(datalist), których wyglądu nie da się zmienić. Lista jest doklejana na
końcu strony (position: fixed) i ustawiana skryptem tuż pod polem;
na telefonie zajmuje całą szerokość ekranu (z marginesem 12px).
========================================================================== */
.ps-dd {
position: fixed;
z-index: 100000;
box-sizing: border-box;
margin: 0;
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
list-style: none;
background: #fff;
border: 1px solid #e3e3e3;
border-radius: 12px;
box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
font-family: Poppins, sans-serif;
text-align: left;
scrollbar-width: thin;
scrollbar-color: #cfcfcf transparent;
-webkit-overflow-scrolling: touch;
}
.ps-dd[hidden] {
display: none !important;
}
.ps-dd::-webkit-scrollbar { width: 10px; }
.ps-dd::-webkit-scrollbar-thumb {
background: #d4d4d4;
border: 3px solid #fff;
border-radius: 10px;
}
.ps-dd__opt,
.ps-dd__note {
list-style: none;
margin: 0;
}
.ps-dd__opt {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
color: #262626;
font-size: 14px;
font-weight: 400;
line-height: 1.3;
cursor: pointer;
user-select: none;
}
.ps-dd__opt.is-active {
background: #f3f3f3;
}
.ps-dd__main {
min-width: 0;
overflow-wrap: anywhere;
}
.ps-dd__main mark {
padding: 0;
background: none;
color: inherit;
font-weight: 700;
}
.ps-dd__sub {
flex-shrink: 0;
max-width: 50%;
margin-left: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #8a8a8a;
font-size: 12px;
}
/* pozycja wybrana w polu: czerwona, z ptaszkiem */
.ps-dd__opt.is-selected {
color: #e20000;
font-weight: 600;
}
.ps-dd__opt.is-selected::after {
content: '';
flex-shrink: 0;
width: 10px;
height: 5px;
margin-left: auto;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(-45deg);
}
.ps-dd__opt.is-selected:has(.ps-dd__sub)::after {
margin-left: 0;
}
/* "Wszyscy producenci" / "Wszystkie urządzenia" - oddzielone kreską */
.ps-dd__opt--all {
position: relative;
margin-bottom: 7px;
color: #737373;
}
.ps-dd__opt--all::before {
content: '';
position: absolute;
right: 12px;
bottom: -4px;
left: 12px;
height: 1px;
background: #ececec;
}
.ps-dd__note {
padding: 12px;
color: #737373;
font-size: 13px;
line-height: 1.4;
cursor: default;
}
@media (max-width: 768px) {
.ps-dd__opt {
padding: 13px 12px;
font-size: 15px;
}
}
@media (prefers-reduced-motion: no-preference) {
.ps-dd {
animation: ps-dd-in .12s ease-out;
}
@keyframes ps-dd-in {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: none; }
}
}
/* --- nagłówki grup na liście "Urządzenie" (Koszenie, Maszyny ogrodowe...) --- */
.ps-dd__group {
list-style: none;
margin: 8px 0 2px;
padding: 8px 12px 4px;
color: #8a8a8a;
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
line-height: 1.3;
text-transform: uppercase;
cursor: default;
}
.ps-dd__opt--all + .ps-dd__group {
margin-top: 2px;
}
/* --- etykiety pól zamiast placeholdera ---
Tekst na stronie (a nie atrybut placeholder), więc tłumaczy go GTranslate.
W polu "Urządzenie" etykieta pokazuje też wybrane urządzenie, a tekst
samego pola jest ukryty (klasa .ps-select, pole tylko do wyboru z listy). */
.ps-ph {
position: absolute;
top: 50%;
z-index: 1;
overflow: hidden;
color: #737373;
font-family: Poppins, sans-serif;
font-weight: 400;
line-height: 1.25;
white-space: nowrap;
text-overflow: ellipsis;
transform: translateY(-50%);
pointer-events: none;
}
.ps-ph[hidden] {
display: none;
}
.ps-ph.is-value {
color: #262626;
font-weight: 500;
}
.part-search .ps-ph {
left: 45px;
right: 40px;
font-size: 14px;
}
.part-search .searchInput-wrap .ps-ph {
right: 16px;
}
.mss-field .ps-ph {
left: 39px;
right: 30px;
font-size: 16px;
}
.mss-field:has(#mss-search-input) .ps-ph {
right: 12px;
}
input.ps-select {
color: transparent !important;
-webkit-text-fill-color: transparent;
caret-color: transparent;
cursor: pointer !important;
user-select: none;
}
input.ps-select::selection {
background: transparent;
}