Filter: Reset
button.minus.qib-button {
display: none !important;
}
button.plus.qib-button {
display: none !important;
}
div.quantity.buttons_added {
width: 50px;
height: 40px !important;
}
/* 1. ÜBERNAHME DES SUCH-STILS AUF DEN FILTER */
.wtbpFiltersWrapper select {
/* Übernimmt die exakten Werte des Suchfeldes (12px Rundung und 8px 12px Padding) */
border: 1px solid #ccc !important;
border-radius: 12px !important;
padding: 8px 12px !important;
/* NEU: Stellt sicher, dass die Box mindestens breit genug für "Alle Produkte" ist */
min-width: 130px !important;
width: auto !important; /* Wichtig, damit min-width wirken kann */
/* Weitere Styling-Basis (von den generischen Werten) */
font-size: 14px;
line-height: 1.42857;
color: #555;
background-color: #fff;
box-sizing: border-box;
/* WICHTIG: Überschreiben des Standard-Select-Pfeils und des Paddings für den Pfeil-Fix */
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
/* Hinzufügen eines eigenen Pfeils (z.B. ein grauer SVG-Pfeil) */
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20fill%3D%22%23444444%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 12px center; /* Positioniert den Pfeil 12px vom rechten Rand */
background-size: 16px; /* Größe des Pfeils */
/* WICHTIG: Erhöht das rechte Padding, um Platz für den Pfeil zu schaffen */
padding-right: 30px !important;
}
/* 2. FIX FÜR ABGESCHNITTENES SUCH-LABEL ("Search:" / "Suchen:") */
.dataTables_filter {
/* Setzt die Breite des gesamten Such-Containers auf automatisch, falls es eine fixe Breite gab */
width: auto !important;
display: inline-block !important;
}
/* Stellt sicher, dass das Label und das Suchfeld nicht umbrechen */
.dataTables_filter label {
white-space: nowrap !important;
}
/* 3. ANPASSUNG DES UMGEBENDEN WRAPPERS (Für die Filter-Beschriftung "Filter: ") */
.wtbpFiltersWrapper {
display: flex;
align-items: center; /* Vertikale Zentrierung */
gap: 5px;
}
.wtbpFiltersWrapper .wtbpResetFilter {
margin-left: 10px;
}
/* 1. Ausblenden des Original-Textes "Filter: " im Wrapper */
.wtbpFiltersWrapper {
font-size: 0 !important;
display: flex;
align-items: center;
gap: 5px; /* Abstand zwischen dem neuen Button und dem Select-Feld */
height: 40px; /* Optional: Höhe des Wrappers anpassen, falls nötig */
}
/* 2. Erstellen des "Filter"-Buttons mit ::before Pseudo-Element */
.wtbpFiltersWrapper::before {
content: "Filter:";
background-color: #82313A !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 12px !important;
padding: 0 12px !important;
display: flex;
align-items: center;
justify-content: center;
height: 100%; /* Höhe an den Wrapper anpassen */
margin-right: 5px;
box-sizing: border-box; /* Damit Padding die Höhe nicht überschießt */
}
/* Reset-Button im Stil des Filter-Buttons */
.wtbpFiltersWrapper .wtbpResetFilter {
display: flex;
align-items: center;
justify-content: center;
background-color: #F4D9B9;
color: #34050A;
border-radius: 12px;
padding: 0 12px;
height: 100%;
box-sizing: border-box;
cursor: pointer;
margin-left: 5px;
text-decoration: none;
transition: background-color 0.2s;
overflow: hidden; /* Verhindert, dass Text sichtbar bleibt */
}
/* Hover-Effekt */
.wtbpFiltersWrapper .wtbpResetFilter:hover {
background-color: #78363C;
color: #FFFFFF;
}
/* Text „Reset“ komplett ausblenden */
.wtbpResetFilter span {
display: none; /* Wenn der Text in einem steht */
}
/* Icon sichtbar machen */
.wtbpResetFilter i {
font-size: 16px;
line-height: 1;
}
/* 1. HIDING THE UNWANTED CATEGORY LINKS (DEUTSCH) */
.categories a[href*="/produkt-kategorie/new/"],
.categories a[href*="/produkt-kategorie/haarklammern/"],
.categories a[href*="/produkt-kategorie/haarspangen/"],
.categories a[href*="/produkt-kategorie/ohrringe/"]
{
/* Stellt sicher, dass das Element vollständig entfernt wird */
display: none !important;
visibility: hidden;
font-size: 0;
width: 0;
height: 0;
padding: 0;
margin: 0;
}
/* 2. HIDING THE UNWANTED CATEGORY LINKS (ENGLISH) */
/* Diese Selektoren adressieren die von Ihnen genannten 4 unerwünschten Kategorien im Englischen */
.categories a[href*="/product-category/new-en/"],
.categories a[href*="/product-category/hair-clip/"],
.categories a[href*="/product-category/hair-barrette/"],
.categories a[href*="/product-category/earrings/"]
{
/* Stellt sicher, dass das Element vollständig entfernt wird */
display: none !important;
visibility: hidden;
font-size: 0;
width: 0;
height: 0;
padding: 0;
margin: 0;
}
/* 3. Komprimierung von Textknoten (Kommas/Leerzeichen) in der Zelle */
/* Dies reduziert alle übrig gebliebenen Kommas/Leerzeichen auf ein Minimum, um die Lücke zu schließen. */
.categories {
overflow: hidden !important;
font-size: 1px !important;
line-height: 1px !important;
white-space: normal !important;
}
/* 4. WIEDERHERSTELLUNG der Schriftgröße für die sichtbaren Links (UVP:/RRP:) */
/* Stellt die normale Schriftgröße NUR für die sichtbaren (nicht ausgeblendeten) Links wieder her. */
.categories a:not([style*="display: none"]) {
font-size: 16px !important; /* Anpassen, falls Ihre Standardgröße anders ist. */
line-height: normal !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
}
find your favorite clip.
