/*
Theme Name: WUB-Tool Child
Theme URI: https://wub-tool.at
Description: Child-Theme für den WUB-Tool Online-Shop, basiert auf Kadence. Enthält das individuelle Design (Farben, Schriften, Maskottchen) für WUB-Tool.
Author: regio.one (Thomas)
Template: kadence
Version: 1.44.5
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: wub-tool-child
*/
/* =========================================================================
Schriften — lokal gehostet (DSGVO, §9). Variable Fonts.
========================================================================= */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/inter.woff2') format('woff2');
}
@font-face {
font-family: 'Big Shoulders Display';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/big-shoulders-display.woff2') format('woff2');
}
/* =========================================================================
Markenfarben (§9)
========================================================================= */
:root {
--wub-black: #0E0E0E;
--wub-orange: #F06A1A; /* führende Akzentfarbe: CTAs, Sale, Header */
--wub-orange-d: #d65c12; /* Orange hover/aktiv */
--wub-cta-text: #FFFFFF; /* Textfarbe auf CTA-Buttons; je Marke ggf. überschrieben */
--wub-white: #FFFFFF;
--wub-darkgray: #222222;
--wub-midgray: #777777;
--wub-lightgray: #F5F5F5;
--wub-red: #D7263D; /* Fehler, Sale-Badges */
--wub-green: #2E8B57; /* Erfolg, "Auf Lager" */
--wub-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Eine einheitliche Schrift im ganzen Shop: Display-Variable nutzt jetzt dieselbe
Schrift wie der Fließtext (Inter). So gibt es keine zweite, schmale Schrift mehr. */
--wub-font-head: var(--wub-font-body);
}
/* =========================================================================
Eigene Marken-Leiste (gotools-Stil) — eigene dritte Zeile unter dem
Kadence-Header. Nur DIESE Leiste ist sticky, alles andere (USP-Band,
Logo+Suche+Konto+Warenkorb) scrollt mit weg.
========================================================================= */
.wub-brandbar {
background: #f5f5f5;
position: sticky !important; top: 0; z-index: 60;
padding: .55rem 0;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
transition: background-color .2s, border-color .2s;
}
/* Auf Markenseite: Brand-Leiste in Markenfarbe + heller Text */
body.wub-brand-milwaukee .wub-brandbar { background: #D64034; border-color: #B33327; }
body.wub-brand-innotec .wub-brandbar { background: #FFDD00; border-color: #e6c700; }
body.wub-brand-tec7 .wub-brandbar { background: #00722E; border-color: #005a23; }
body.wub-brand-propart .wub-brandbar { background: #006FB6; border-color: #00568D; }
body.wub-brand-bosch .wub-brandbar { background: #005691; border-color: #00477a; }
body.wub-brand-dewalt .wub-brandbar { background: #FEBD17; border-color: #d6a012; }
body.wub-brand-knipex .wub-brandbar { background: #E2231A; border-color: #b51c15; }
body.wub-brand-makita .wub-brandbar { background: #009ACA; border-color: #007fa6; }
body.wub-brand-metabo .wub-brandbar { background: #00A1A4; border-color: #007f82; }
body.wub-brand-wera .wub-brandbar { background: #00946E; border-color: #007757; }
/* Text + Trennstriche auf dunklen Markenfarben → weiß */
body.wub-brand-milwaukee .wub-brand-logo,
body.wub-brand-tec7 .wub-brand-logo,
body.wub-brand-propart .wub-brand-logo,
body.wub-brand-bosch .wub-brand-logo,
body.wub-brand-knipex .wub-brand-logo,
body.wub-brand-makita .wub-brand-logo,
body.wub-brand-metabo .wub-brand-logo,
body.wub-brand-wera .wub-brand-logo {
color: #fff !important;
}
body.wub-brand-milwaukee .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-tec7 .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-propart .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-bosch .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-knipex .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-makita .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-metabo .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-wera .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo {
border-left-color: rgba(255,255,255,.35);
}
/* Auf gelben Markenseiten (Innotec, Dewalt) → schwarzer Text */
body.wub-brand-innotec .wub-brand-logo,
body.wub-brand-dewalt .wub-brand-logo {
color: #0E0E0E !important;
}
body.wub-brand-innotec .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo,
body.wub-brand-dewalt .wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo {
border-left-color: rgba(0,0,0,.2);
}
/* Burger + "Alle Marken"-CTA auf Markenseite — Text in weiß (bzw. schwarz bei gelb).
Höhere Spezifität, damit die Kadence-Defaults überschrieben werden. */
body.wub-brand-milwaukee .wub-brandbar .wub-brandbar__burger,
body.wub-brand-tec7 .wub-brandbar .wub-brandbar__burger,
body.wub-brand-propart .wub-brandbar .wub-brandbar__burger,
body.wub-brand-bosch .wub-brandbar .wub-brandbar__burger,
body.wub-brand-knipex .wub-brandbar .wub-brandbar__burger,
body.wub-brand-makita .wub-brandbar .wub-brandbar__burger,
body.wub-brand-metabo .wub-brandbar .wub-brandbar__burger,
body.wub-brand-wera .wub-brandbar .wub-brandbar__burger,
body.wub-brand-milwaukee .wub-brandbar .wub-brandbar__cta,
body.wub-brand-tec7 .wub-brandbar .wub-brandbar__cta,
body.wub-brand-propart .wub-brandbar .wub-brandbar__cta,
body.wub-brand-bosch .wub-brandbar .wub-brandbar__cta,
body.wub-brand-knipex .wub-brandbar .wub-brandbar__cta,
body.wub-brand-makita .wub-brandbar .wub-brandbar__cta,
body.wub-brand-metabo .wub-brandbar .wub-brandbar__cta,
body.wub-brand-wera .wub-brandbar .wub-brandbar__cta {
color: #fff !important;
background: transparent !important;
border-color: rgba(255,255,255,.55) !important;
}
body.wub-brand-milwaukee .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-tec7 .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-propart .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-bosch .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-knipex .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-makita .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-metabo .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-wera .wub-brandbar .wub-brandbar__cta:hover {
background: rgba(255,255,255,.15) !important;
border-color: #fff !important;
color: #fff !important;
}
/* Gelbe Markenseiten (Innotec, Dewalt) — schwarzer Text */
body.wub-brand-innotec .wub-brandbar .wub-brandbar__burger,
body.wub-brand-dewalt .wub-brandbar .wub-brandbar__burger,
body.wub-brand-innotec .wub-brandbar .wub-brandbar__cta,
body.wub-brand-dewalt .wub-brandbar .wub-brandbar__cta {
color: #0E0E0E !important;
background: transparent !important;
border-color: rgba(0,0,0,.35) !important;
}
body.wub-brand-innotec .wub-brandbar .wub-brandbar__cta:hover,
body.wub-brand-dewalt .wub-brandbar .wub-brandbar__cta:hover {
background: rgba(0,0,0,.08) !important;
border-color: #0E0E0E !important;
}
/* Aktive Marke: weißer (bzw. schwarzer) Unterstrich, damit man sieht
was man gerade ansieht. Brand-Logos haben standardmäßig schon border-bottom
für Hover — hier umfärben. */
body[class*="wub-brand-"] .wub-brand-logo.is-active {
border-bottom-color: #fff !important;
font-weight: 800 !important;
}
body.wub-brand-innotec .wub-brand-logo.is-active,
body.wub-brand-dewalt .wub-brand-logo.is-active {
border-bottom-color: #0E0E0E !important;
color: #0E0E0E !important;
}
body.admin-bar .wub-brandbar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .wub-brandbar { top: 46px; } }
.wub-brandbar__inner {
max-width: 1340px; width: 100%; margin: 0 auto;
padding: 0 1.25rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; flex-wrap: wrap;
position: relative;
}
/* Hamburger-Button links — sauberes SVG-Icon.
In ALLEN States transparent halten (sonst überschreibt Kadences
generische Button-Regel mit var(--wub-orange) bei focus/active). */
.wub-brandbar__burger,
.wub-brandbar__burger:hover,
.wub-brandbar__burger:focus,
.wub-brandbar__burger:active,
.wub-brandbar__burger[aria-expanded="true"] {
background: transparent !important;
color: var(--wub-black) !important;
box-shadow: none !important;
outline: none;
}
.wub-brandbar__burger {
border: 1px solid #d4d4d4 !important;
padding: .35rem .7rem !important;
display: inline-flex; align-items: center; gap: .45rem;
border-radius: 3px; cursor: pointer;
font-size: .85rem; font-weight: 600;
transition: background .15s, border-color .15s;
}
.wub-brandbar__burger:hover,
.wub-brandbar__burger:focus-visible {
background: #fff !important;
border-color: var(--wub-black) !important;
}
.wub-brandbar__burger-icon { display: block; flex: 0 0 auto; }
.wub-brandbar__burger-icon line {
transform-origin: center;
transition: transform .25s, opacity .15s;
}
/* Wenn offen: die 3 Linien werden zu einem X */
.wub-brandbar__burger[aria-expanded="true"] .wub-brandbar__burger-line-top { transform: translateY(5px) rotate(45deg); }
.wub-brandbar__burger[aria-expanded="true"] .wub-brandbar__burger-line-mid { opacity: 0; }
.wub-brandbar__burger[aria-expanded="true"] .wub-brandbar__burger-line-bot { transform: translateY(-5px) rotate(-45deg); }
/* Mega-Menü-Panel */
.wub-megamenu {
position: absolute; left: 0; right: 0; top: 100%;
background: #111; color: #fff;
box-shadow: 0 18px 36px rgba(0,0,0,.35);
z-index: 50;
border-top: 1px solid rgba(255,255,255,.08);
max-height: 70vh; overflow-y: auto;
transform: translateY(-10px); opacity: 0;
transition: opacity .25s, transform .25s;
pointer-events: none;
}
.wub-megamenu[hidden] { display: none; }
.wub-megamenu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wub-megamenu__inner {
max-width: 1340px; margin: 0 auto;
padding: 2rem 1.5rem;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
@media (max-width: 1024px) { .wub-megamenu__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wub-megamenu__inner { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } }
/* Mobile-Suchfeld im Kategorien-Panel: nur auf Handys/Tablets sichtbar.
Auf Desktop gibt es das Header-Suchfeld, daher hier ausblenden. */
.wub-search--megamenu { display: none; }
@media (max-width: 768px) {
.wub-search--megamenu {
display: flex;
grid-column: 1 / -1;
max-width: 100%;
margin: 0 0 .25rem;
position: relative;
z-index: 1;
}
.wub-search--megamenu input[type="search"] {
background: #fff; color: #111;
}
}
/* Schnell-Links „Shop"/„Aktionen" im Kategorien-Panel: nur Mobile.
Auf Desktop stehen sie in der oberen Navi, daher hier ausgeblendet. */
.wub-megamenu__quicklinks { display: none; }
@media (max-width: 768px) {
.wub-megamenu__quicklinks {
display: flex; gap: .6rem; grid-column: 1 / -1;
margin: 0 0 .25rem;
}
.wub-megamenu__quicklinks a {
flex: 1 1 0; text-align: center;
padding: .7rem .5rem; border-radius: 3px;
background: rgba(255,255,255,.08); color: #fff;
text-decoration: none !important; font-weight: 700;
border: 1px solid rgba(255,255,255,.18);
}
.wub-megamenu__quicklinks a:hover { background: var(--wub-orange); border-color: var(--wub-orange); }
/* „Shop" + „Aktionen" (Custom-Menüpunkte) aus der oberen Leiste nehmen —
sie sind jetzt hier im Burger-Menü erreichbar. */
.main-navigation .menu-item-object-custom { display: none !important; }
}
.wub-megamenu__brand {
display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
text-decoration: none !important;
padding-bottom: .5rem; margin-bottom: .75rem;
border-bottom-width: 2px; border-bottom-style: solid;
text-transform: uppercase;
transition: filter .15s;
}
.wub-megamenu__brand:hover { filter: brightness(1.15); }
.wub-megamenu__subs { list-style: none; padding: 0; margin: 0; }
.wub-megamenu__subs li { margin: 0 0 .4rem; }
.wub-megamenu__subs a {
color: rgba(255,255,255,.78) !important; text-decoration: none !important;
font-size: .9rem; display: inline-block;
transition: color .15s, transform .15s;
}
.wub-megamenu__subs a:hover { transform: translateX(3px); }
/* Marken-spezifische Farben für Headings und Subcat-Hover */
.wub-megamenu__col--milwaukee .wub-megamenu__brand { color: #D64034 !important; border-bottom-color: #D64034; }
.wub-megamenu__col--milwaukee .wub-megamenu__subs a:hover { color: #D64034 !important; }
.wub-megamenu__col--innotec .wub-megamenu__brand { color: #FFDD00 !important; border-bottom-color: #FFDD00; }
.wub-megamenu__col--innotec .wub-megamenu__subs a:hover { color: #FFDD00 !important; }
.wub-megamenu__col--tec7 .wub-megamenu__brand { color: #008A32 !important; border-bottom-color: #008A32; } /* helleres Tec7-Grün für besseren Kontrast auf Schwarz */
.wub-megamenu__col--tec7 .wub-megamenu__subs a:hover { color: #008A32 !important; }
.wub-megamenu__col--propart .wub-megamenu__brand { color: #009BE4 !important; border-bottom-color: #009BE4; } /* helleres ProPart-Blau für besseren Kontrast */
.wub-megamenu__col--propart .wub-megamenu__subs a:hover { color: #009BE4 !important; }
.wub-brandbar__brands {
display: flex; align-items: center; gap: 0; flex-wrap: wrap;
justify-content: center;
}
/* Vertikaler Trennstrich zwischen Marken (außer beim letzten) */
.wub-brandbar__brands .wub-brand-item + .wub-brand-item .wub-brand-logo {
border-left: 1px solid #c8c8c8;
}
/* Hover-Dropdown pro Marke als Liste */
.wub-brand-item { position: relative; display: inline-block; }
.wub-brand-dropdown {
position: absolute;
top: 100%;
left: 50%;
background: #fff;
border: 1px solid #e0e0e0;
border-top: 3px solid var(--wub-orange);
box-shadow: 0 8px 20px rgba(0,0,0,.13);
min-width: 240px;
max-width: 320px;
padding: .5rem 0;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-6px);
transition: opacity .15s, transform .15s, visibility 0s linear .15s;
z-index: 200;
pointer-events: none;
}
.wub-brand-item--has-dropdown:hover .wub-brand-dropdown,
.wub-brand-item--has-dropdown:focus-within .wub-brand-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
pointer-events: auto;
}
.wub-brand-dropdown ul {
list-style: none;
margin: 0;
padding: 0;
max-height: 70vh;
overflow-y: auto;
}
.wub-brand-dropdown li { margin: 0; }
.wub-brand-dropdown a {
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem 1rem;
color: var(--wub-black) !important;
text-decoration: none !important;
font-weight: 500 !important;
font-size: .92rem !important;
letter-spacing: 0;
border: 0 !important;
background: transparent;
transition: background .12s, color .12s;
border-radius: 0;
white-space: normal;
}
.wub-brand-dropdown a:hover {
background: #f7f7f7;
}
.wub-brand-dropdown__count {
color: var(--wub-midgray);
font-size: .8rem;
font-weight: 400;
margin-left: .5rem;
}
.wub-brand-dropdown--milwaukee { border-top-color: #D64034; }
.wub-brand-dropdown--innotec { border-top-color: #FFDD00; }
.wub-brand-dropdown--tec7 { border-top-color: #00722E; }
.wub-brand-dropdown--propart { border-top-color: #006FB6; }
.wub-brand-dropdown--bosch { border-top-color: #005691; }
.wub-brand-dropdown--dewalt { border-top-color: #FEBD17; }
.wub-brand-dropdown--knipex { border-top-color: #E2231A; }
.wub-brand-dropdown--makita { border-top-color: #009ACA; }
.wub-brand-dropdown--metabo { border-top-color: #00A1A4; }
.wub-brand-dropdown--wera { border-top-color: #00946E; }
@media (max-width: 768px) {
.wub-brand-dropdown { display: none !important; }
}
/* Akzentfarbe vom oberen Border je Marke */
.wub-brand-dropdown--milwaukee { border-top-color: #D64034; }
.wub-brand-dropdown--innotec { border-top-color: #FFDD00; }
.wub-brand-dropdown--tec7 { border-top-color: #00722E; }
.wub-brand-dropdown--propart { border-top-color: #006FB6; }
.wub-brand-dropdown--bosch { border-top-color: #005691; }
.wub-brand-dropdown--dewalt { border-top-color: #FEBD17; }
.wub-brand-dropdown--knipex { border-top-color: #E2231A; }
.wub-brand-dropdown--makita { border-top-color: #009ACA; }
.wub-brand-dropdown--metabo { border-top-color: #00A1A4; }
.wub-brand-dropdown--wera { border-top-color: #00946E; }
/* Auf schmalen Bildschirmen Dropdown ausblenden (Burger-Menü übernimmt) */
@media (max-width: 768px) {
.wub-brand-dropdown { display: none !important; }
}
/* Alle Marken-Logos in der Brand-Bar: identische Container-Dimensionen
damit sie visuell gleich groß wirken (wie gotools.de). Die Logo-Dateien
selbst haben unterschiedliche Seitenverhältnisse, aber durch fixen
Container + background-size: contain sind sie optisch einheitlich. */
/* Marken-Namen als Text-Links — keine Logos mehr in der Brand-Leiste.
Hover/Aktiv-State färbt den Text in der jeweiligen Markenfarbe. */
.wub-brand-logo {
display: inline-flex; align-items: center; justify-content: center;
padding: .5rem .9rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: .02em;
color: var(--wub-black) !important;
text-decoration: none !important;
background: transparent;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.wub-brand-logo:hover,
.wub-brand-logo.is-active {
background: transparent;
transform: none;
}
/* Pro Marke: Hover-/Aktiv-Farbe per CSS-Variable definiert,
damit Text + Unterstrich in der jeweiligen Markenfarbe leuchten. */
.wub-brand-logo--milwaukee:hover,
.wub-brand-logo--milwaukee.is-active { color: #D64034 !important; border-bottom-color: #D64034; }
.wub-brand-logo--innotec:hover,
.wub-brand-logo--innotec.is-active { color: #E6C700 !important; border-bottom-color: #FFDD00; } /* gelb wäre auf weiß unleserlich → dunkleres Gold für Text */
.wub-brand-logo--tec7:hover,
.wub-brand-logo--tec7.is-active { color: #00722E !important; border-bottom-color: #00722E; }
.wub-brand-logo--propart:hover,
.wub-brand-logo--propart.is-active { color: #006FB6 !important; border-bottom-color: #006FB6; }
.wub-brand-logo--bosch:hover,
.wub-brand-logo--bosch.is-active { color: #005691 !important; border-bottom-color: #005691; }
.wub-brand-logo--dewalt:hover,
.wub-brand-logo--dewalt.is-active { color: #FEBD17 !important; border-bottom-color: #FEBD17; }
.wub-brand-logo--knipex:hover,
.wub-brand-logo--knipex.is-active { color: #E2231A !important; border-bottom-color: #E2231A; }
.wub-brand-logo--makita:hover,
.wub-brand-logo--makita.is-active { color: #009ACA !important; border-bottom-color: #009ACA; }
.wub-brand-logo--metabo:hover,
.wub-brand-logo--metabo.is-active { color: #00A1A4 !important; border-bottom-color: #00A1A4; }
.wub-brand-logo--wera:hover,
.wub-brand-logo--wera.is-active { color: #00946E !important; border-bottom-color: #00946E; }
/* „Alle Marken"-Link rechts in der Brand-Leiste */
.wub-brandbar__cta {
display: inline-flex; align-items: center; gap: .35rem;
color: var(--wub-black) !important; text-decoration: none !important;
font-size: .85rem; font-weight: 600;
padding: .3rem .75rem;
border: 1px solid #d4d4d4;
border-radius: 3px;
background: #fff;
transition: background .15s, border-color .15s;
}
.wub-brandbar__cta:hover {
background: var(--wub-black);
color: #fff !important;
border-color: var(--wub-black);
}
/* Die alten Marken-Einträge im Kadence-Hauptmenü ausblenden — sie wandern
in die neue Brand-Leiste darunter. */
.menu-item.wub-brand-link { display: none !important; }
/* Responsive Brandbar: enger packen, aber die Logos sichtbar groß lassen.
Alle Logos behalten gleiche Dimensionen, nur die Größe wird skaliert. */
@media (max-width: 1024px) {
.wub-brandbar__brands { gap: .5rem; }
.wub-brand-logo { font-size: .9rem; padding: .4rem .6rem; }
}
@media (max-width: 600px) {
.wub-brandbar__inner { gap: .75rem; padding: 0 .75rem; }
.wub-brandbar__brands { gap: .3rem; flex-wrap: nowrap; overflow-x: auto; }
.wub-brand-logo { font-size: .8rem; padding: .3rem .5rem; }
/* Burger: Label ausblenden, nur Icon */
.wub-brandbar__burger-label { display: none; }
.wub-brandbar__burger { padding: .4rem !important; }
/* „Alle Marken"-CTA auf Mini-Screens raus, spart Platz */
.wub-brandbar__cta { display: none; }
}
/* =========================================================================
Startseite „Unsere Marken"-Kacheln: Markenlogo + Hover-Animation
+ sanfte Einblende beim Laden.
========================================================================= */
.wub-brand-tile__logo {
display: block;
max-width: 200px;
height: 70px;
object-fit: contain;
margin: 0 auto 1rem;
transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.wub-brand-tile {
text-align: center;
display: flex;
flex-direction: column;
border: 1.5px solid #e4e4e4;
border-radius: 6px;
padding: 1.5rem 1.25rem !important;
background: #fff;
transition: transform .3s cubic-bezier(.2,.7,.3,1),
box-shadow .3s ease,
border-color .3s ease;
will-change: transform;
opacity: 0;
animation: wub-tile-in .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.wub-brand-tile:hover {
transform: translateY(-6px);
box-shadow: 0 14px 32px rgba(0,0,0,.13);
}
.wub-brand-tile:hover .wub-brand-tile__logo { transform: scale(1.07); }
/* Marken-spezifischer Border beim Hover */
.wub-brand-tile:has(.wub-brand-tile__logo[alt="Milwaukee"]):hover { border-color: #D64034; }
.wub-brand-tile:has(.wub-brand-tile__logo[alt="Innotec"]):hover { border-color: #FFDD00; }
.wub-brand-tile:has(.wub-brand-tile__logo[alt="Tec7"]):hover { border-color: #00722E; }
.wub-brand-tile:has(.wub-brand-tile__logo[alt="ProPart"]):hover { border-color: #006FB6; }
/* Gestaffelte Einblende: jede Kachel kommt 100 ms später rein */
.wub-brand-grid .wp-block-column:nth-child(1) .wub-brand-tile { animation-delay: 0s; }
.wub-brand-grid .wp-block-column:nth-child(2) .wub-brand-tile { animation-delay: .1s; }
.wub-brand-grid .wp-block-column:nth-child(3) .wub-brand-tile { animation-delay: .2s; }
.wub-brand-grid .wp-block-column:nth-child(4) .wub-brand-tile { animation-delay: .3s; }
@keyframes wub-tile-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
.wub-brand-tile,
.wub-brand-tile__logo,
.wub-brand-tile:hover,
.wub-brand-tile:hover .wub-brand-tile__logo {
animation: none !important;
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ProPart-Logo hat weißen „PRO PART"-Text → kleiner dunkelblauer Hintergrund
nur hinter dem Logo, damit's auf der hellen Kachel lesbar bleibt. */
.wub-brand-tile__logo[alt="ProPart"] {
background: #006FB6;
padding: .5rem 1rem;
border-radius: 4px;
max-width: 220px;
box-sizing: content-box;
}
/* „Ansehen"-Button mittig in der Kachel — dezent schwarz (statt knallorange),
damit das Markenlogo darüber im Vordergrund bleibt. Im Hover wird der
Button in der jeweiligen Markenfarbe gefärbt (Akzent). */
.wub-brand-tile .wp-block-buttons {
justify-content: center !important;
margin-top: auto;
}
.wub-brand-tile .wp-block-button__link {
background: var(--wub-black) !important;
color: #fff !important;
border: none !important;
transition: background .2s ease;
}
.wub-brand-tile:has(.wub-brand-tile__logo[alt="Milwaukee"]) .wp-block-button__link:hover { background: #D64034 !important; }
.wub-brand-tile:has(.wub-brand-tile__logo[alt="Innotec"]) .wp-block-button__link:hover { background: #FFDD00 !important; color: #0E0E0E !important; }
.wub-brand-tile:has(.wub-brand-tile__logo[alt="Tec7"]) .wp-block-button__link:hover { background: #00722E !important; }
.wub-brand-tile:has(.wub-brand-tile__logo[alt="ProPart"]) .wp-block-button__link:hover { background: #006FB6 !important; }
/* =========================================================================
Markenlogos im Header-Menü — in Original-Farben angezeigt
(Filter-weiß-Trick sieht bei Multi-Color-Logos unsauber aus).
Beim Hover etwas heller (Opacity) und auf der aktiven Markenseite
leichter Glow zur Hervorhebung.
========================================================================= */
.menu-item.wub-brand-link > a {
display: inline-flex !important;
align-items: center; justify-content: center;
height: 40px; padding: 0 .8rem !important;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-size: 0 !important; line-height: 0 !important; color: transparent !important;
overflow: hidden;
transition: opacity .15s, transform .15s;
opacity: .9;
}
.menu-item.wub-brand-link > a:hover,
.menu-item.wub-brand-link.current-menu-item > a,
.menu-item.wub-brand-link.current-menu-ancestor > a {
opacity: 1; transform: scale(1.04);
}
/* Mindestbreiten an Logo-Proportionen angepasst, damit jedes Logo Luft hat */
.menu-item.wub-brand-link--milwaukee > a { background-image: url("assets/brands/milwaukee-logo.png"); min-width: 130px; }
.menu-item.wub-brand-link--innotec > a { background-image: url("assets/brands/innotec-logo.svg"); min-width: 110px; }
.menu-item.wub-brand-link--tec7 > a { background-image: url("assets/brands/tec7-logo.svg"); min-width: 95px; }
.menu-item.wub-brand-link--propart > a { background-image: url("assets/brands/propart-logo.png"); min-width: 95px; }
/* =========================================================================
Markenfarben je Markenseite — überschreibt die Akzentfarbe (--wub-orange)
auf Innotec/Milwaukee/Tec7/ProPart-Seiten. Buttons, Hover-Rahmen,
Titel-Trennstriche, Filter-Highlights usw. übernehmen die Farbe
automatisch, weil sie alle var(--wub-orange) benutzen.
========================================================================= */
body.wub-brand-innotec { --wub-orange: #FFDD00; --wub-orange-d: #e6c700; --wub-cta-text: #0E0E0E; } /* Innotec-Gelb → schwarzer Buttontext */
body.wub-brand-milwaukee { --wub-orange: #D64034; --wub-orange-d: #B33327; } /* Milwaukee-Rot (exakt aus Logo) */
body.wub-brand-tec7 { --wub-orange: #00722e; --wub-orange-d: #005a23; } /* Tec7-Grün (lt. Logo-SVG) */
body.wub-brand-propart { --wub-orange: #006FB6; --wub-orange-d: #00568D; } /* ProPart-Blau (exakt aus Logo extrahiert) */
/* Auf Gelb braucht's schwarzen Text statt weißem (Lesbarkeit). Gilt für
ALLE Buttons/CTAs auf Innotec-Seiten — sehr spezifisch geschrieben,
damit es andere Regeln mit hoher Spezifität schlägt. */
body.wub-brand-innotec .add_to_cart_button,
body.wub-brand-innotec .single_add_to_cart_button,
body.wub-brand-innotec .woocommerce ul.products li.product .add_to_cart_button,
body.wub-brand-innotec .woocommerce ul.products li.product .product_type_variable,
body.wub-brand-innotec .button,
body.wub-brand-innotec .woocommerce .button,
body.wub-brand-innotec .wub-carousel__cta,
body.wub-brand-innotec .wub-filter-search button,
body.wub-brand-innotec .wub-search__btn,
body.wub-brand-innotec .wub-subcat-banner__brand,
body.wub-brand-innotec .wub-priceslider__apply,
body.wub-brand-innotec input[type="submit"],
body.wub-brand-innotec button[type="submit"] {
color: var(--wub-black) !important;
}
/* Auch SVG-Icons (z. B. Suchen-Lupe) auf Gelb dunkel einfärben */
body.wub-brand-innotec .wub-filter-search button svg,
body.wub-brand-innotec .wub-search__btn svg {
stroke: var(--wub-black) !important;
fill: var(--wub-black) !important;
}
body.wub-brand-innotec .wub-summary-actions__wl a:hover svg,
body.wub-brand-innotec .wub-summary-actions__share:hover svg,
body.wub-brand-innotec .yith-wcwl-add-to-wishlist-button--added,
body.wub-brand-innotec .yith-wcwl-add-to-wishlist-button--added a,
body.wub-brand-innotec .yith-wcwl-add-to-wishlist-button--added i {
/* Herz im aktiven Zustand bleibt mit Markenfarbe sichtbar (gelb auf weiß
ist ok, weil Größe + Stroke gut erkennbar sind). */
}
/* =========================================================================
Typografie
========================================================================= */
body,
.entry-content,
button,
input,
select,
textarea {
font-family: var(--wub-font-body);
}
h1, h2, h3, h4, h5, h6, .entry-title, .site-title,
.woocommerce-loop-product__title,
.product_title {
font-family: var(--wub-font-body);
letter-spacing: -0.01em;
text-transform: none;
}
h1, .product_title { font-weight: 700; }
h2, h3 { font-weight: 700; }
/* =========================================================================
CTAs / Buttons — Orange als Leitfarbe
========================================================================= */
.button,
button.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.single_add_to_cart_button,
.wc-block-components-button {
background-color: var(--wub-orange) !important;
border-color: var(--wub-orange) !important;
color: var(--wub-cta-text) !important;
border-radius: 3px;
font-weight: 600;
transition: background-color .15s ease, transform .05s ease;
}
.button:hover,
button.button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:hover {
background-color: var(--wub-orange-d) !important;
border-color: var(--wub-orange-d) !important;
}
a { color: var(--wub-darkgray); }
a:hover { color: var(--wub-orange); }
/* =========================================================================
Preise / Sale / Verfügbarkeit
========================================================================= */
.woocommerce ins,
.woocommerce .price ins { text-decoration: none; }
.woocommerce del,
.woocommerce .price del { color: var(--wub-midgray); opacity: 1; }
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
background-color: var(--wub-red) !important;
color: #fff !important;
border-radius: 2px;
font-weight: 700;
}
.stock.in-stock { color: var(--wub-green); font-weight: 600; }
.stock.out-of-stock { color: var(--wub-red); }
/* Füllmenge (Gebindegröße) unter dem Produkttitel */
.wub-fuellmenge { color: var(--wub-midgray); font-weight: 600; font-size: 1.05rem; margin: -.25rem 0 1rem; }
.wub-fuellmenge:empty { display: none; }
/* Trust-Elemente auf der Produktseite (siehe Child functions.php) */
.wub-trust { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; font-size: .9em; }
.wub-trust span { display: inline-flex; align-items: center; gap: .4rem; color: var(--wub-darkgray); }
/* Produktseite gotools-Stil: Kauf-Box, Verfügbarkeit, USP, Meta, Anker-Menü */
.wub-buybox {
border: 1px solid #e4e4e4; border-radius: 3px; background: #fff;
padding: 1.25rem 1.5rem; margin: .25rem 0 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
/* füllt die rechte Spalte aus, damit die Icons oben rechts bündig
mit der Kaufbox abschließen */
}
.single-product .wub-buybox > .price { margin: 0 0 .25rem; }
/* Produktbild füllt die Galerie-Spalte (gotools-Stil, weniger Leerraum) */
/* Produktbild scharf halten: nie über die echte Bildgröße hinaus vergrößern, zentriert. */
.single-product .woocommerce-product-gallery__image img { width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 auto; display: block; }
/* Produktseite (gotools-Stil): links Bild und Beschreibung (lange Spalte),
rechts die Kauf-Box, die beim Scrollen mitläuft (sticky) und an den
ähnlichen Produkten endet. Bei Milwaukee hängen evtl. „Weitere Ausführungen"-
Kacheln unter der Kaufbox in der rechten Spalte mit dran — die Box läuft dann
so weit mit, wie die rechte Spalte hoch ist. */
.single-product .wub-product-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
column-gap: 2.5rem;
align-items: start;
}
.single-product .wub-product-grid > * { min-width: 0; }
/* Linke Spalte: Bild (Zeile 1) + Beschreibung/Reiter (Zeile 2) */
.single-product .wub-product-grid > .woocommerce-product-gallery {
grid-column: 1; grid-row: 1; float: none !important; width: auto !important; margin: 0 !important;
}
.single-product .wub-product-grid > .woocommerce-tabs {
grid-column: 1; grid-row: 2; margin-top: 2rem;
}
/* Rechte Spalte: Kauf-Box läuft über beide Zeilen, ist sticky und löst sich am
Ende des Wrappers (= dort, wo die ähnlichen Produkte anfangen).
Sitzt unter Brand-Leiste (70 px) + Anker-Menü (~73 px) = 143 px + Buffer. */
.single-product .wub-product-grid > .summary.entry-summary {
grid-column: 2; grid-row: 1 / 3;
float: none !important; width: auto !important; margin: 0 !important;
position: -webkit-sticky !important; position: sticky !important;
top: 143px; align-self: start;
}
body.admin-bar .single-product .wub-product-grid > .summary.entry-summary { top: 175px; }
@media (max-width: 782px) {
body.admin-bar .single-product .wub-product-grid > .summary.entry-summary { top: 189px; }
}
/* Ähnliche Produkte + Up-Sells stehen AUSSERHALB des Grids in voller Breite */
.single-product div.product.type-product > .related.products,
.single-product div.product.type-product > .up-sells {
clear: both; width: 100%; margin-top: 2.5rem;
}
@media (max-width: 768px) {
.single-product .wub-product-grid { display: block; }
.single-product .wub-product-grid > .woocommerce-tabs { margin-top: 1.5rem; }
.single-product .wub-product-grid > .summary.entry-summary { position: static !important; }
}
/* =========================================================================
„Aktuelle Angebote bei [Marke]"-Section auf Top-Level-Markenseiten.
Sitzt unter dem Slider, oberhalb des normalen Produktrasters.
========================================================================= */
.wub-brand-deals {
margin: 0 0 2.5rem;
padding: 1.5rem 0 0;
}
.wub-brand-deals__title {
font-size: 1.3rem; font-weight: 700; margin: 0 0 1.25rem;
color: var(--wub-black);
padding-bottom: .5rem;
border-bottom: 2px solid var(--wub-orange);
display: inline-block;
}
.wub-brand-deals__grid {
list-style: none; padding: 0 !important; margin: 0 !important;
display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1rem;
}
.wub-brand-deals__grid::before, .wub-brand-deals__grid::after { content: none !important; display: none !important; }
@media (max-width: 1024px) { .wub-brand-deals__grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px) { .wub-brand-deals__grid { grid-template-columns: repeat(2, 1fr) !important; } }
/* ≤480 (echte Handys): 2 Spalten beibehalten — wie gotools. 1 Spalte wirkte
leer und man musste endlos scrollen. Etwas engerer Gap für schmale Schirme. */
@media (max-width: 480px) { .wub-brand-deals__grid { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem !important; } }
/* =========================================================================
Unterkategorie-Banner (schmaler Streifen mit Bild + Marken-Kicker + Titel),
wird nur auf Unterkategorien gezeigt — Top-Level-Marken sehen den Slider.
========================================================================= */
.wub-subcat-banner {
position: relative;
min-height: 280px;
background-size: cover; background-position: center;
display: flex; align-items: flex-end;
background-color: #2b2b2b; /* generischer Fallback */
/* Sitzt jetzt INNERHALB .wub-archive-main → automatisch bündig mit den
Produktkacheln rechts. Volle Breite des Grid-Bereichs ausnutzen. */
width: 100%;
margin: 0 0 1.5rem;
border-radius: 4px;
overflow: hidden;
}
.wub-subcat-banner::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 100%);
}
/* Solid-Banner (ohne Foto) — Marken-Farbe als Hintergrund */
.wub-subcat-banner--solid { background-image: none !important; }
.wub-subcat-banner--solid::before {
background: linear-gradient(120deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
}
.wub-subcat-banner--innotec { background-color: #FFD400; } /* Innotec-Gelb */
.wub-subcat-banner--milwaukee { background-color: #D64034; } /* Milwaukee-Rot (Logo) */
.wub-subcat-banner--tec7 { background-color: #00833F; } /* TEC7-Grün */
.wub-subcat-banner--propart { background-color: #006FB6; } /* ProPart-Blau (Logo) */
/* Auf gelbem Innotec-Solid-Banner: weißes Pill + schwarzer Text (Kontrast).
Außerdem Titel-Text dunkel statt weiß, sonst nicht lesbar. */
.wub-subcat-banner--innotec .wub-subcat-banner__brand {
background: var(--wub-black); color: #fff;
}
.wub-subcat-banner--innotec .wub-subcat-banner__title { color: var(--wub-black); }
.wub-subcat-banner--innotec::before {
background: linear-gradient(120deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 100%);
}
.wub-subcat-banner__inner {
position: relative; z-index: 1;
padding: 1.25rem 1.5rem;
color: #fff;
max-width: 1200px; width: 100%; margin: 0 auto;
}
.wub-subcat-banner__brand {
display: inline-block;
font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
background: var(--wub-orange); color: #fff;
padding: .2rem .6rem; border-radius: 2px; margin-bottom: .6rem;
}
.wub-subcat-banner__title {
font-size: 2rem; font-weight: 800; margin: 0; color: #fff; line-height: 1.1;
}
@media (max-width: 768px) {
.wub-subcat-banner { min-height: 200px; }
.wub-subcat-banner__title { font-size: 1.4rem; }
}
/* Kadence-Default-Abstand vom Header zum Content auf ein Minimum reduzieren —
Standard 80 px ist nach unserem sticky Brand-Header zu viel Leerraum. */
#primary.content-area { margin-top: 1rem !important; }
/* Anker-Menü oben sticky — sitzt UNTER der sticky Brand-Leiste (Höhe ~70 px).
Brand-Leiste ist auf top: 0 (z 60), Anker-Menü darunter auf top: 70. */
.wub-anchornav {
position: -webkit-sticky !important; position: sticky !important; top: 70px !important;
z-index: 50 !important;
background: #fff !important;
min-height: 50px;
padding: .5rem 0 !important;
border-bottom: 1px solid #e4e4e4;
box-shadow: 0 2px 4px rgba(0,0,0,.04);
}
.wub-anchornav a { color: var(--wub-darkgray) !important; visibility: visible !important; }
/* Mit Admin-Bar (32 px) + Brand-Leiste (70 px) = 102 px */
body.admin-bar .wub-anchornav { top: 102px !important; }
@media (max-width: 782px) {
body.admin-bar .wub-anchornav { top: 116px !important; } /* 46 + 70 */
}
/* Onepager: alle Reiter-Inhalte ausklappen, Reiter-Navigation ausblenden,
damit das Anker-Menü oben direkt zu den Abschnitten scrollen kann. */
.single-product .woocommerce-tabs > .wc-tabs,
.single-product .woocommerce-tabs > ul.tabs { display: none !important; }
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel { display: block !important; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel + .woocommerce-Tabs-panel {
margin-top: 1.5rem !important;
padding-top: 1.5rem !important;
border-top: 1px solid #eee;
}
/* Lesbare Zeilenlänge für die Beschreibung (gotools macht das genauso). */
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
max-width: 760px;
}
/* Sektions-Headings ruhiger und einheitlich. line-height 1.2, damit der
Text nicht in der oberen Hälfte der Zeile hängt sondern visuell mittig
sitzt — Theme-Default 1.5 macht den Block sonst zu hoch. */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel > h3:first-child {
font-size: 1.4rem; font-weight: 700; line-height: 1.2;
margin: 0 0 1rem; color: var(--wub-black);
padding-bottom: .5rem; border-bottom: 2px solid var(--wub-orange); display: inline-block;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel p { line-height: 1.6; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel ul { line-height: 1.7; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h4,
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3:not(:first-child) {
font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 .5rem;
}
/* „Zusätzliche Information"-Tabelle aufhübschen */
.single-product .woocommerce-product-attributes {
width: 100%; border-collapse: collapse; margin: .5rem 0;
}
.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
padding: .65rem .75rem; border-bottom: 1px solid #eee; background: transparent;
text-align: left; vertical-align: middle; line-height: 1.4;
}
.single-product .woocommerce-product-attributes th { font-weight: 600; width: 12rem; color: var(--wub-darkgray); }
/* WooCommerce wickelt den Wert in …
mit Margin — den Margin
wegräumen, sonst sitzt der Wert nicht mittig auf der Zeile. */
.single-product .woocommerce-product-attributes td p { margin: 0; }
/* Zubehörempfehlung-Sektion: nimmt mehr als 760px Breite */
.single-product .woocommerce-tabs #tab-zubehoer { max-width: none; }
.single-product .woocommerce-tabs .wub-zubehoer {
list-style: none; padding: 0; margin: 1rem 0 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 1100px) { .single-product .woocommerce-tabs .wub-zubehoer { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .single-product .woocommerce-tabs .wub-zubehoer { grid-template-columns: repeat(2, 1fr); } }
.single-product .woocommerce-tabs .wub-zubehoer .wub-zubehoer__card {
margin: 0 !important; padding: .8rem !important; list-style: none !important;
border: 1px solid #e4e4e4; border-radius: 4px; background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.05);
transition: box-shadow .15s, border-color .15s;
}
.single-product .woocommerce-tabs .wub-zubehoer .wub-zubehoer__card:hover {
border-color: var(--wub-orange); box-shadow: 0 6px 18px rgba(0,0,0,.13);
}
.single-product .woocommerce-tabs .wub-zubehoer .wub-zubehoer__card a {
display: flex; flex-direction: column; gap: .35rem;
text-decoration: none; color: var(--wub-darkgray);
}
.single-product .woocommerce-tabs .wub-zubehoer .wub-zubehoer__img img {
display: block; width: 100%; height: 140px; object-fit: contain; background: #fff;
}
.single-product .woocommerce-tabs .wub-zubehoer .woocommerce-loop-product__title {
font-size: .9rem !important; line-height: 1.3; margin: .25rem 0 0 !important;
color: var(--wub-black); font-weight: 600;
padding: 0 !important; border: none !important;
}
.single-product .woocommerce-tabs .wub-zubehoer .price {
font-size: 1rem; font-weight: 700; color: var(--wub-black); margin: .2rem 0 0;
}
/* Preis prominent */
.single-product .wub-buybox .price { font-size: 1.9rem; font-weight: 800; color: var(--wub-black); line-height: 1.15; }
.single-product .wub-buybox .price del { font-size: 1.05rem; font-weight: 400; }
.single-product .wub-buybox .price ins { font-weight: 800; }
.wub-avail { margin: .5rem 0 1rem; font-weight: 600; color: var(--wub-darkgray); }
.wub-avail__ok { color: var(--wub-green); }
.wub-avail__soon { color: var(--wub-darkgray); }
.wub-avail--out { color: var(--wub-red); }
.wub-usp-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.wub-usp-list li { display: flex; align-items: center; gap: .5rem; color: var(--wub-darkgray); font-size: .95rem; }
.wub-meta__row { display: block; color: var(--wub-midgray); font-size: .9rem; margin-top: .15rem; }
.wub-meta__row strong { color: var(--wub-darkgray); font-weight: 600; }
.wub-anchornav {
display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; align-items: center;
border-bottom: 1px solid #e4e4e4; margin: 0 0 1.5rem; padding: 0;
}
.wub-anchornav a {
display: inline-block; padding: .65rem .15rem; color: var(--wub-midgray);
font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent;
margin-bottom: -1px;
}
.wub-anchornav a:hover { color: var(--wub-orange); border-bottom-color: var(--wub-orange); }
/* "Weitere Ausführungen" — Karten mit 3 Aktionen (Produkt · Warenkorb · Wunschliste) */
.wub-weitere { margin-top: 1.75rem; }
.wub-weitere__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; }
.wub-weitere__card {
display: flex; align-items: stretch; overflow: hidden;
border: 1px solid #e4e4e4; border-radius: 3px;
margin-bottom: .6rem;
transition: border-color .12s ease, box-shadow .12s ease;
}
.wub-weitere__card:hover { border-color: var(--wub-orange); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wub-weitere__main {
display: flex; align-items: center; gap: .9rem; flex: 1 1 auto; min-width: 0;
padding: .6rem .9rem; text-decoration: none; color: var(--wub-darkgray);
}
.wub-weitere__main:hover { background: var(--wub-lightgray, #f5f5f5); }
.wub-weitere__img { flex: 0 0 56px; }
.wub-weitere__img img { width: 56px; height: 56px; object-fit: contain; display: block; }
/* Neutrale Box, wenn kein echtes Bild vorhanden (statt kaputtem Platzhalter) */
.wub-weitere__noimg { display: block; width: 56px; height: 56px; border-radius: 2px;
background: var(--wub-lightgray, #f5f5f5) url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23c9c9c9%22%3E%3Cpath%20d%3D%22M21%2019V5c0-1.1-.9-2-2-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2zM8.5%2013.5l2.5%203.01L14.5%2012l4.5%206H5l3.5-4.5z%22%2F%3E%3C%2Fsvg%3E") center / 26px no-repeat; }
.wub-weitere__txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wub-weitere__name { font-weight: 600; line-height: 1.25; }
.wub-weitere__price { color: var(--wub-midgray); font-size: .95rem; }
.wub-weitere__price .amount { color: var(--wub-darkgray); font-weight: 700; }
/* Aktions-Buttons rechts (Produktkachel-Stil): Pfeil · Warenkorb-Box · Herz-Umriss */
.wub-weitere__actions { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; padding: 0 .9rem; }
.wub-weitere__act {
display: flex; align-items: center; justify-content: center;
background: none; border: none; color: var(--wub-midgray, #777);
text-decoration: none; cursor: pointer; padding: 0;
}
/* Pfeil (zum Produkt) */
.wub-weitere__view { font-size: 1.5rem; line-height: 1; width: 20px; }
.wub-weitere__view:hover { color: var(--wub-orange); }
/* Warenkorb: orange Box mit weißem Symbol */
.wub-weitere__cart { width: 52px; height: 40px; border-radius: 3px; background: var(--wub-orange); }
.wub-weitere__cart:hover { background: var(--wub-orange-d); }
.wub-weitere__cart::before {
content: ""; display: block; width: 22px; height: 22px; background-color: #fff;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zM1%202v2h2l3.6%207.59-1.35%202.45c-.16.28-.25.61-.25.96%200%201.1.9%202%202%202h12v-2H7.42c-.14%200-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75%200%201.41-.41%201.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48%200-.55-.45-1-1-1H5.21l-.94-2H1zm16%2016c-1.1%200-1.99.9-1.99%202s.89%202%201.99%202%202-.9%202-2-.9-2-2-2z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zM1%202v2h2l3.6%207.59-1.35%202.45c-.16.28-.25.61-.25.96%200%201.1.9%202%202%202h12v-2H7.42c-.14%200-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75%200%201.41-.41%201.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48%200-.55-.45-1-1-1H5.21l-.94-2H1zm16%2016c-1.1%200-1.99.9-1.99%202s.89%202%201.99%202%202-.9%202-2-.9-2-2-2z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.wub-weitere__cart .added_to_cart { display: none !important; }
/* Wunschliste: Herz-Umriss (eigenes Icon; YITH-Herz ausgeblendet, Klick bleibt aktiv) */
.wub-weitere__wl { width: 40px; height: 40px; padding: 0; }
.wub-weitere__wl .yith-wcwl-add-to-wishlist,
.wub-weitere__wl .yith-add-to-wishlist-button-block { margin: 0 !important; display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; }
.wub-weitere__wl a { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none !important; }
.wub-weitere__wl svg,
.wub-weitere__wl .yith-wcwl-add-to-wishlist-button__label { display: none !important; }
.wub-weitere__wl a::before {
content: ""; display: block; width: 24px; height: 24px; background-color: var(--wub-black, #0E0E0E);
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.5%203c-1.74%200-3.41.81-4.5%202.09C10.91%203.81%209.24%203%207.5%203%204.42%203%202%205.42%202%208.5c0%203.78%203.4%206.86%208.55%2011.54L12%2021.35l1.45-1.32C18.6%2015.36%2022%2012.28%2022%208.5%2022%205.42%2019.58%203%2016.5%203zm-4.4%2015.55l-.1.1-.1-.1C7.14%2014.24%204%2011.39%204%208.5%204%206.5%205.5%205%207.5%205c1.54%200%203.04.99%203.57%202.36h1.87C13.46%205.99%2014.96%205%2016.5%205c2%200%203.5%201.5%203.5%203.5%200%202.89-3.14%205.74-7.9%2010.05z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.5%203c-1.74%200-3.41.81-4.5%202.09C10.91%203.81%209.24%203%207.5%203%204.42%203%202%205.42%202%208.5c0%203.78%203.4%206.86%208.55%2011.54L12%2021.35l1.45-1.32C18.6%2015.36%2022%2012.28%2022%208.5%2022%205.42%2019.58%203%2016.5%203zm-4.4%2015.55l-.1.1-.1-.1C7.14%2014.24%204%2011.39%204%208.5%204%206.5%205.5%205%207.5%205c1.54%200%203.04.99%203.57%202.36h1.87C13.46%205.99%2014.96%205%2016.5%205c2%200%203.5%201.5%203.5%203.5%200%202.89-3.14%205.74-7.9%2010.05z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.wub-weitere__wl a:hover::before { background-color: var(--wub-orange); }
/* Auf der Merkliste: gefülltes oranges Herz */
.wub-weitere__wl a.yith-wcwl-add-to-wishlist-button--added::before,
.wub-weitere__wl .yith-wcwl-wishlistaddedbrowse a::before,
.wub-weitere__wl .yith-wcwl-wishlistexistsbrowse a::before {
background-color: var(--wub-orange) !important;
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E");
}
/* =========================================================================
Accessibility — sichtbare Fokus-Indikatoren (§22)
========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
outline: 3px solid var(--wub-orange);
outline-offset: 2px;
}
/* =========================================================================
HEADER — hell (weißer Hintergrund, dunkle Texte, orange Akzente)
========================================================================= */
.site-header,
.site-header-wrap,
.site-header-row-container,
.site-main-header-wrap,
.site-main-header-inner-wrap,
.site-header-upper-wrap {
background-color: #fff !important;
}
.site-header { border-bottom: 1px solid #e5e5e5; }
/* Logo */
.site-header .site-branding img.custom-logo,
.site-header .custom-logo-link img {
max-height: 60px;
width: auto;
}
/* Navigation */
.site-header .main-navigation a,
.site-header .header-navigation a,
.header-menu-container .menu > li > a {
color: var(--wub-black) !important;
font-family: var(--wub-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
}
.site-header .main-navigation a:hover,
.site-header .header-navigation a:hover,
.header-menu-container .menu > li > a:hover {
color: var(--wub-orange) !important;
}
/* Mobil-Menü-Icon dunkel */
.site-header .menu-toggle-open .kadence-svg-iconset,
.site-header .menu-toggle-open { color: var(--wub-black) !important; }
/* =========================================================================
STARTSEITE
========================================================================= */
.wub-hero {
background: var(--wub-black);
color: #fff;
text-align: center;
padding: 5rem 1.5rem;
}
.wub-hero__title { color: #fff; font-size: clamp(2.2rem, 5vw, 4rem); margin: 0 0 .5rem; line-height: 1.05; }
.wub-accent { color: var(--wub-orange); }
.wub-hero__sub { color: #dcdcdc; font-size: 1.15rem; max-width: 680px; margin: 1rem auto 2rem; }
.wub-hero .wp-block-buttons { justify-content: center; }
/* Outline-Button im Hero */
.wub-hero .is-style-outline .wp-block-button__link {
background: transparent !important;
border: 2px solid var(--wub-orange) !important;
color: var(--wub-orange) !important;
}
.wub-hero .is-style-outline .wp-block-button__link:hover {
background: var(--wub-orange) !important;
color: #fff !important;
}
.wub-section-title { margin-top: 3.5rem; margin-bottom: 1.5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.wub-brand-grid { gap: 1rem; }
/* Hinweis: Die eigentlichen .wub-brand-tile-Regeln stehen weiter oben
(siehe „Startseite ‚Unsere Marken'-Kacheln"). Hier nur noch die
Typografie für h3 + Beschreibung. */
.wub-brand-tile h3 { margin-top: 0; }
.wub-brand-tile p { color: var(--wub-midgray); min-height: 3em; }
/* =========================================================================
UVP-Preis-Darstellung (durchgestrichener UVP + aktueller VK-Preis)
Greift wenn _wub_uvp_brutto > regular_price gesetzt ist — typisch
bei Marken-Werkzeug (Milwaukee, Bosch etc.) wo der Händler unter UVP
verkauft. Wirkt wie "Sale", ist aber technisch keiner.
========================================================================= */
/* UVP + Preis IMMER in 2 Zeilen — UVP klein oben, Preis groß unten.
Verhindert dass die Preiszeile mal wraped und mal nicht. */
.wub-uvp-price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
line-height: 1.15;
}
.wub-uvp-strike {
color: #888;
font-size: .78em;
font-weight: 400;
text-decoration: line-through;
line-height: 1.3;
}
.wub-uvp-strike::before { content: 'UVP '; font-size: .9em; letter-spacing: .02em; color: #aaa; }
.wub-uvp-actual {
color: var(--wub-black);
font-weight: 700;
font-size: 1em;
}
/* Rabatt-Badge neben dem Preis (z.B. "-39%") — gotools-Stil, grün, abgerundet.
Wird im Preis-HTML mitgeliefert (via woocommerce_get_price_html-Filter).
Im Loop wird er ausgeblendet, weil dort der eigene .wub-loop-discount Badge
in der Preiszeile schon erscheint. */
.wub-uvp-discount {
display: inline-flex; align-items: center;
padding: .2rem .55rem;
background: #0a9c44;
color: #fff;
border-radius: 999px;
font-size: .8rem; font-weight: 700; line-height: 1.4;
white-space: nowrap; letter-spacing: 0;
margin-left: .2rem;
}
/* In Produktkarten (Loop): kompaktere Darstellung */
.woocommerce ul.products li.product .price .wub-uvp-price {
font-size: 1em;
}
.woocommerce ul.products li.product .price .wub-uvp-strike { font-size: .8em; }
/* Im Loop den UVP-Badge ausblenden — dort gibt's einen eigenen Badge
außerhalb des Preis-HTML (siehe wub-loop-discount). */
.woocommerce ul.products li.product .wub-uvp-discount { display: none; }
/* Auch in der Pseudo-Variants-Liste rechts (Sidebar) ausblenden — dort
hat jede Zeile ihren eigenen kompakten Rabatt-Hinweis. */
.wub-pseudo-variants .wub-uvp-discount { display: none; }
/* =========================================================================
PSEUDO-VARIANTEN (Milwaukee-Maschinen) — gotools-Stil
Kompakte Liste IN der Kaufbox-Spalte (sticky scrollt mit). Pro Zeile:
Mini-Thumbnail + Produktname + aktueller Preis + UVP-Strike + Rabatt-%.
========================================================================= */
.wub-pseudo-variants {
margin: 1.5rem 0 0;
}
.wub-pseudo-variants__heading {
margin: 0 0 .75rem;
font-family: var(--wub-font-head);
font-weight: 700;
font-size: 1rem;
color: var(--wub-black);
}
.wub-pseudo-variants__list {
list-style: none; padding: 0; margin: 0;
}
.wub-pseudo-variants__list li { margin: 0 0 .5rem; }
.wub-pseudo-variants__list li:last-child { margin-bottom: 0; }
.wub-pseudo-row {
display: flex; align-items: center; gap: .75rem;
padding: .65rem .75rem;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
text-decoration: none !important;
color: var(--wub-black) !important;
transition: border-color .15s ease, background .15s ease;
}
.wub-pseudo-row:hover {
border-color: var(--wub-orange);
background: #fff8f3;
}
.wub-pseudo-row__img {
flex: 0 0 56px;
width: 56px; height: 56px;
object-fit: contain;
border-radius: 3px;
background: #fafafa;
}
.wub-pseudo-row__img--placeholder { background: #f0f0f0; }
.wub-pseudo-row__info {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; gap: .2rem;
}
.wub-pseudo-row__name {
font-size: .82rem;
font-weight: 500;
line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.wub-pseudo-row__price {
display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
font-size: .82rem;
}
.wub-pseudo-row__current {
font-weight: 700; color: var(--wub-black);
}
.wub-pseudo-row__current .woocommerce-Price-amount { font-size: .92rem; }
.wub-pseudo-row__uvp {
color: #888;
font-size: .72rem;
text-decoration: line-through;
}
.wub-pseudo-row__uvp .woocommerce-Price-amount { color: inherit; }
.wub-pseudo-row__discount {
background: #16a34a;
color: #fff;
font-weight: 700;
font-size: .7rem;
padding: .1rem .35rem;
border-radius: 3px;
letter-spacing: .02em;
}
.wub-pseudo-row__chevron {
flex: 0 0 14px;
color: #999;
transition: transform .15s ease, color .15s ease;
}
.wub-pseudo-row:hover .wub-pseudo-row__chevron {
color: var(--wub-orange);
transform: translateX(3px);
}
@media (max-width: 600px) {
.wub-pseudo-row__img { flex: 0 0 48px; width: 48px; height: 48px; }
}
/* =========================================================================
WUB-DEALS (Shortcode [wub_deals])
Karussell-Sektion mit 5 reduzierten Produkten pro Slide, Pfeil-Navigation.
Header rechtsbündig (Titel + "Alle WUB-Deals"-Link in einer Reihe).
========================================================================= */
.wub-deals { margin: 3rem 0; }
/* Kadence default: .content-area hat margin-bottom: 80px und
.entry-content-wrap hat padding-bottom: 32px. Auf der Startseite
führt das zu ~112 px überflüssigem Whitespace zwischen letzter
Section (WUB-Deals) und Pre-Footer — Abstand unten war 160 px
während oben nur 48 px. Wir nullen die beiden NUR auf der Frontpage,
damit die wub-deals-margins symmetrisch wirken. */
body.home .content-area { margin-bottom: 0 !important; }
body.home .entry-content-wrap { padding-bottom: 0 !important; }
.wub-deals__header {
display: flex; align-items: baseline; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
margin-bottom: 1.75rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e5e5;
}
.wub-deals__title {
font-family: var(--wub-font-head);
font-weight: 800;
font-size: clamp(1.5rem, 2.8vw, 2rem);
margin: 0;
line-height: 1.2;
letter-spacing: -.01em;
display: inline-flex;
align-items: center;
gap: .55rem;
}
.wub-deals__title-icon {
font-size: 1.15em;
line-height: 1;
display: inline-block;
}
.wub-deals__all {
display: inline-flex; align-items: center; gap: .4rem;
text-decoration: none !important;
font-size: .92rem; font-weight: 600;
color: var(--wub-black) !important;
transition: color .15s ease, gap .15s ease;
}
.wub-deals__all:hover { color: var(--wub-orange) !important; gap: .6rem; }
.wub-deals__all svg { transition: transform .15s ease; }
.wub-deals__all:hover svg { transform: translateX(2px); }
.wub-deals__carousel { position: relative; }
.wub-deals__viewport {
overflow: hidden;
margin: 0 .25rem;
}
.wub-deals__track {
display: flex !important;
gap: 1rem;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.wub-deals__track > li.product {
flex: 0 0 calc((100% - 4rem) / 5);
max-width: calc((100% - 4rem) / 5);
margin: 0 !important;
width: auto !important;
box-sizing: border-box;
}
/* Pfeile aussen, schweben rechts/links über die Karussell-Viewport hinaus */
.wub-deals__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 50%;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--wub-black);
box-shadow: 0 4px 12px rgba(0,0,0,.08);
transition: background .15s ease, border-color .15s ease, transform .15s ease;
z-index: 5;
padding: 0;
}
.wub-deals__arrow:hover:not(:disabled) {
background: var(--wub-black);
border-color: var(--wub-black);
color: #fff;
}
.wub-deals__arrow:disabled {
opacity: .3;
cursor: default;
box-shadow: none;
}
.wub-deals__arrow--prev { left: -22px; }
.wub-deals__arrow--next { right: -22px; }
/* WUB-Deals: Cart-Buttons im Outline-Stil (weiss/oranger Rahmen statt
knallorange Fill) — wirkt edler und passt zur reduzierten Farbpalette.
Hover wird volles Orange. Nur INNERHALB von .wub-deals — auf Marken-
Archiven bleiben die Buttons weiterhin in der Markenfarbe (gefüllt).
Spezifizität durch .wub-deals.woocommerce erhöht, sonst überschreiben
die generischen Cart-Button-Regeln (gleiche 4-Klassen-Spezifizität,
aber spätere Position im File). */
.wub-deals.woocommerce ul.products li.product .add_to_cart_button,
.wub-deals.woocommerce ul.products li.product .product_type_variable,
.wub-deals.woocommerce ul.products li.product .added_to_cart {
background: #fff !important;
color: var(--wub-black) !important;
border: 1.5px solid var(--wub-orange) !important;
box-shadow: none !important;
}
.wub-deals.woocommerce ul.products li.product .add_to_cart_button:hover,
.wub-deals.woocommerce ul.products li.product .product_type_variable:hover {
background: var(--wub-orange) !important;
color: var(--wub-cta-text) !important;
border-color: var(--wub-orange) !important;
}
@media (max-width: 1024px) {
.wub-deals__track > li.product {
flex: 0 0 calc((100% - 3rem) / 4);
max-width: calc((100% - 3rem) / 4);
}
}
@media (max-width: 720px) {
.wub-deals__track > li.product {
flex: 0 0 calc((100% - 2rem) / 3);
max-width: calc((100% - 2rem) / 3);
}
.wub-deals__arrow { width: 38px; height: 38px; }
.wub-deals__arrow--prev { left: -8px; }
.wub-deals__arrow--next { right: -8px; }
}
/* Handy (≤600px, deckt iPhone 430–480 mit ab): nur 2 Karten — bei 3 Karten
brechen die Produkttitel mitten im Wort um und der MwSt.-Hinweis zerfällt
in 4 Zeilen. 2 Karten = genug Breite für sauberen Text. */
@media (max-width: 600px) {
.wub-deals__track > li.product {
flex: 0 0 calc((100% - 1rem) / 2);
max-width: calc((100% - 1rem) / 2);
}
}
/* =========================================================================
MARKEN-STREIFEN (Shortcode [wub_brand_strip])
10 Logo-Kacheln in einem 5x2-Grid — gotools-Stil, nur Logos.
Echte Abstände zwischen den Kacheln (gap), keine Trennlinien.
========================================================================= */
.wub-brand-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
margin: 0 0 2.5rem;
}
.wub-brand-strip__tile {
display: flex; align-items: center; justify-content: center;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 6px;
min-height: 120px;
padding: 1.75rem 2rem;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wub-brand-strip__tile:hover {
border-color: #c9c9c9;
box-shadow: 0 6px 16px rgba(0,0,0,.08);
transform: translateY(-2px);
}
.wub-brand-strip__tile img {
max-width: 100%; max-height: 60px; width: auto; height: auto;
object-fit: contain;
opacity: .92;
transition: opacity .2s ease, transform .2s ease;
}
.wub-brand-strip__tile:hover img {
opacity: 1;
transform: scale(1.04);
}
/* ProPart-Tile hat per inline-style einen blauen Hintergrund (weil das
ProPart-Logo einen weissen Schriftzug hat). */
.wub-brand-strip__tile--propart { background: #006FB6 !important; border-color: #006FB6 !important; }
.wub-brand-strip__tile--propart:hover { background: #00568D !important; border-color: #00568D !important; }
@media (max-width: 1024px) {
.wub-brand-strip { gap: .75rem; }
.wub-brand-strip__tile { min-height: 100px; padding: 1.25rem 1.5rem; }
.wub-brand-strip__tile img { max-height: 50px; }
}
@media (max-width: 720px) {
.wub-brand-strip { grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.wub-brand-strip__tile { min-height: 84px; padding: 1rem 1.25rem; }
.wub-brand-strip__tile img { max-height: 42px; }
}
@media (max-width: 480px) {
.wub-brand-strip { grid-template-columns: repeat(2, 1fr); }
}
.wub-trustbar {
background: var(--wub-darkgray);
color: #fff;
gap: 2rem;
padding: 1.25rem;
flex-wrap: wrap;
margin-top: 3.5rem;
}
.wub-trustbar p { margin: 0; font-weight: 600; }
/* =========================================================================
FOOTER — dunkel
========================================================================= */
.site-footer,
.site-footer-wrap,
.site-footer-row-container,
.site-bottom-footer-wrap,
.site-top-footer-wrap,
.site-middle-footer-wrap {
background-color: var(--wub-black) !important;
color: #cfcfcf;
}
.site-footer { border-top: 3px solid var(--wub-orange); }
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: var(--wub-orange); }
/* =========================================================================
Feinschliff Header/Startseite
========================================================================= */
/* Logo genügt — separaten Seitentitel/Slogan im Header ausblenden */
.site-header .site-title,
.site-header .site-branding .site-name,
.site-branding .site-description { display: none !important; }
/* Startseite: Kadence-Seitentitel-/Hero-Bereich ausblenden (eigener Hero im Inhalt) */
.home .entry-hero-container-inner,
.home .entry-hero,
.home header.entry-header,
.home .page-title { display: none !important; }
.home .content-area,
.home .site-main,
.home .content-container { padding-top: 0 !important; margin-top: 0 !important; }
/* Hero direkt an den Header anschließen */
.home .wub-hero { margin-top: 0; }
/* =========================================================================
USP-Leiste (oben, site-weit)
========================================================================= */
/* USP-Band oben bleibt IMMER WUB-Orange — unabhängig von der Markenfarbe
der jeweiligen Seite. Sonst wird's auf Innotec gelb und unleserlich. */
.wub-usp-bar { background: #F06A1A; color: #fff; font-weight: 600; }
.wub-usp-bar__inner {
max-width: 1180px; margin: 0 auto; padding: .45rem 1rem;
display: flex; gap: 1.75rem; justify-content: center; flex-wrap: wrap;
font-size: .85rem;
}
.wub-usp-bar span {
display: inline-flex; align-items: center; gap: .45rem;
}
.wub-icon { flex-shrink: 0; vertical-align: middle; }
.wub-usp-bar .wub-icon { width: 16px; height: 16px; }
.wub-trust .wub-icon { width: 16px; height: 16px; }
/* =========================================================================
HERO-KARUSSELL
========================================================================= */
.wub-carousel { position: relative; overflow: hidden; background: var(--wub-black); }
.wub-carousel__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.wub-carousel__slide {
min-width: 100%;
height: clamp(380px, 44vw, 560px);
display: flex; align-items: center;
position: relative;
}
.wub-carousel__slide::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.15); }
.wub-slide--1 { background: linear-gradient(120deg, #0E0E0E 0%, #2b2b2b 60%, #3a2410 100%); }
.wub-slide--2 { background: linear-gradient(120deg, #0E0E0E 0%, #4a0c14 55%, #D7263D 120%); }
.wub-slide--3 { background: linear-gradient(120deg, #0E0E0E 0%, #14202e 60%, #1d3a52 120%); }
.wub-carousel__inner {
position: relative; z-index: 2;
max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem);
color: #fff;
}
.wub-carousel__badge {
display: inline-block; background: var(--wub-orange); color: #fff;
font-family: var(--wub-font-head); font-weight: 800; letter-spacing: .05em;
padding: .3rem .8rem; border-radius: 2px; font-size: .9rem; margin-bottom: 1rem;
}
.wub-carousel__title {
font-family: var(--wub-font-head); font-weight: 800; text-transform: uppercase;
font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: .98; margin: 0 0 1rem; color: #fff;
}
.wub-carousel__title .o { color: var(--wub-orange); }
.wub-carousel__sub { font-size: clamp(1rem, 1.6vw, 1.3rem); color: #e6e6e6; margin: 0 0 1.75rem; max-width: 620px; }
.wub-carousel__cta {
display: inline-block; background: var(--wub-orange); color: #fff !important;
font-family: var(--wub-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
padding: .85rem 2rem; border-radius: 3px; text-decoration: none; font-size: 1.05rem;
transition: background .15s ease;
}
.wub-carousel__cta:hover { background: var(--wub-orange-d); }
.wub-carousel__arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 48px; height: 48px; border: none; border-radius: 50%;
background: rgba(255,255,255,.15); color: #fff; font-size: 1.8rem; line-height: 1;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .15s ease;
}
.wub-carousel__arrow:hover { background: var(--wub-orange); }
.wub-carousel__arrow.prev { left: 16px; }
.wub-carousel__arrow.next { right: 16px; }
.wub-carousel__dots {
position: absolute; bottom: 18px; left: 0; right: 0; z-index: 3;
display: flex; gap: .5rem; justify-content: center;
}
.wub-carousel__dot {
width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
background: transparent; cursor: pointer; padding: 0;
}
.wub-carousel__dot.is-active { background: var(--wub-orange); border-color: var(--wub-orange); }
@media (max-width: 600px) {
.wub-carousel__arrow { width: 38px; height: 38px; font-size: 1.4rem; }
.wub-usp-bar__inner { gap: .9rem; font-size: .72rem; }
}
/* =========================================================================
STARTSEITEN-HERO — 4 Marken-Slides (Milwaukee / Innotec / Tec7 / ProPart)
Wird als Shortcode [wub_home_hero] im Page-Content gerendert, erbt
dadurch automatisch die gleiche Breite wie Marken-Tiles und
Aktuelle-Angebote-Grid (über das Kadence entry-content Wrapper-System).
========================================================================= */
.wub-home-hero {
background: #0E0E0E;
width: 100%;
margin: 0 0 2rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 14px 36px rgba(0,0,0,.12);
}
.wub-home-hero .wub-carousel__slide {
height: clamp(360px, 42vw, 520px);
overflow: hidden;
}
.wub-home-hero .wub-carousel__slide::after { display: none; }
/* Marken-spezifische Hintergrund-Verläufe — dezent, fast schwarz, mit Marken-Akzent rechts */
.wub-hero--milwaukee { background: radial-gradient(circle at 80% 50%, rgba(214,64,52,.55) 0%, rgba(20,8,8,1) 60%), #0E0E0E; }
.wub-hero--innotec { background: radial-gradient(circle at 80% 50%, rgba(255,221,0,.45) 0%, rgba(20,18,5,1) 60%), #0E0E0E; }
.wub-hero--tec7 { background: radial-gradient(circle at 80% 50%, rgba(0,114,46,.55) 0%, rgba(6,18,10,1) 60%), #0E0E0E; }
.wub-hero--propart { background: radial-gradient(circle at 80% 50%, rgba(0,111,182,.55) 0%, rgba(6,12,22,1) 60%), #0E0E0E; }
.wub-home-hero__inner {
position: relative; z-index: 2;
max-width: 1180px; width: 100%; margin: 0 auto;
padding: 0 clamp(1.5rem, 5vw, 4rem);
display: grid;
grid-template-columns: minmax(180px, 320px) 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
color: #fff;
}
.wub-home-hero__brand {
display: flex; align-items: center; justify-content: center;
min-height: 120px;
}
.wub-home-hero__logo {
max-width: 100%;
width: clamp(180px, 22vw, 320px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.wub-home-hero__copy { max-width: 560px; }
.wub-home-hero__tagline {
display: inline-block;
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
margin: 0 0 1rem;
font-weight: 600;
}
.wub-home-hero__title {
font-family: var(--wub-font-head);
font-weight: 800;
font-size: clamp(1.8rem, 3.5vw, 3rem);
line-height: 1.05;
margin: 0 0 1.75rem;
color: #fff;
text-transform: none;
letter-spacing: -.01em;
}
.wub-home-hero__cta {
display: inline-flex; align-items: center; gap: .55rem;
background: transparent;
color: #fff !important;
border: 1.5px solid #fff;
font-family: var(--wub-font-head);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
padding: .8rem 1.6rem;
border-radius: 2px;
text-decoration: none;
font-size: .95rem;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wub-home-hero__cta:hover {
background: #fff;
color: #0E0E0E !important;
}
.wub-home-hero__cta svg { transition: transform .15s ease; }
.wub-home-hero__cta:hover svg { transform: translateX(3px); }
@media (max-width: 720px) {
.wub-home-hero__inner {
grid-template-columns: 1fr;
text-align: center;
padding: 1.5rem clamp(1rem, 4vw, 2rem);
gap: .75rem !important;
}
.wub-home-hero .wub-carousel__slide {
/* Slide niedriger auf Mobile — sonst klebt der CTA mitten in
der Card mit dunkler Fläche drum rum */
height: auto !important;
min-height: 320px;
padding: 1rem 0 2.5rem; /* Platz für die Dots unten */
}
.wub-home-hero__brand { min-height: 60px; }
.wub-home-hero__logo { width: clamp(110px, 40vw, 180px); }
.wub-home-hero__copy { max-width: 100%; margin: 0 auto; }
.wub-home-hero__tagline { font-size: .7rem !important; margin: 0 0 .5rem !important; }
.wub-home-hero__title {
font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important;
line-height: 1.1 !important;
margin: 0 0 1rem !important;
hyphens: auto;
word-break: break-word;
}
.wub-home-hero__cta { padding: .55rem 1rem; font-size: .85rem; }
/* Carousel-Pfeile auf Mobile weg, Dots klein und sauber unten */
.wub-home-hero .wub-carousel__arrow { display: none !important; }
.wub-home-hero .wub-carousel__dots {
bottom: .5rem !important;
gap: .35rem !important;
}
.wub-home-hero .wub-carousel__dot {
width: 8px !important; height: 8px !important;
border-width: 1px !important;
}
}
/* =========================================================================
PRE-FOOTER (Spalten)
========================================================================= */
.wub-prefooter { background: var(--wub-black); color: #cfcfcf; border-top: 3px solid var(--wub-orange); }
.wub-prefooter__inner {
max-width: 1180px; margin: 0 auto; padding: 3rem 1.5rem;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
.wub-fcol h4 { color: #fff; font-family: var(--wub-font-head); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 1rem; }
.wub-fcol ul { list-style: none; margin: 0; padding: 0; }
.wub-fcol li { margin: .45rem 0; }
.wub-fcol a { color: #cfcfcf; text-decoration: none; }
.wub-fcol a:hover { color: var(--wub-orange); }
.wub-fcol--cta { text-align: center; }
/* Doppelte orange Linie vermeiden: echten Footer-Border zurücknehmen */
.wub-prefooter + .site-footer { border-top: none; }
@media (max-width: 880px) { .wub-prefooter__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wub-prefooter__inner { grid-template-columns: 1fr; text-align: center; } }
/* =========================================================================
Header-Icons (Wunschliste / Konto / Warenkorb) — nur Symbole
========================================================================= */
.wub-menu-icon a {
display: inline-flex; align-items: center; gap: .3rem; position: relative;
color: var(--wub-black); transition: color .15s;
}
.wub-menu-icon a:hover,
.wub-menu-icon a:focus-visible { color: var(--wub-orange); }
.wub-menu-icon__ico { display: inline-flex; align-items: center; line-height: 0; }
.wub-menu-icon__ico .wub-icon-svg { width: 23px; height: 23px; display: block; }
/* Text-Label ausblenden — Symbole reichen, aria-label bleibt für Screenreader. */
.wub-menu-icon__label {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.wub-cart-count,
.wub-wishlist-count {
background: var(--wub-orange); color: #fff; border-radius: 999px;
min-width: 1.25em; text-align: center;
padding: .05rem .45rem; font-size: .72em; line-height: 1.4; font-weight: 700;
}
/* Wunschliste leer → Badge ausblenden (kein „0" am Herz). */
.wub-wishlist-count.is-empty { display: none; }
/* „Shop" + „Aktionen" als Text aus der oberen Navi nehmen.
- „Shop" (menu-item-27): über „Alle Marken" + Markenlogos erreichbar,
im Mobil-Burger zusätzlich als Schnell-Link.
- „Aktionen" (menu-item-26): jetzt als Prozent-Icon (.wub-menu-icon--aktionen)
rechts bei den anderen Symbolen. */
.main-navigation .menu-item-26,
.main-navigation .menu-item-27 { display: none !important; }
/* 404-Seite */
.wub-404 { padding: 4rem 1.5rem; text-align: center; }
.wub-404__inner { max-width: 640px; margin: 0 auto; }
.wub-404__search { max-width: 420px; margin: 1.5rem auto; }
/* =========================================================================
Wunschliste (YITH) — Markenfarbe
========================================================================= */
.yith-wcwl-add-to-wishlist a,
.yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-wishlistexistsbrowse a { color: var(--wub-orange) !important; font-weight: 600; text-decoration: none; }
.yith-wcwl-add-to-wishlist a:hover { color: var(--wub-orange-d) !important; }
.yith-wcwl-icon, .yith-wcwl-add-to-wishlist i { color: var(--wub-orange); }
.yith-wcwl-add-to-wishlist { margin-top: .75rem; }
/* ---- Oben rechts: Wunschlisten-Herz + Teilen-Button (gotools-Stil) ---- */
.single-product .summary.entry-summary { position: relative; }
.wub-summary-actions {
position: absolute; top: 0; right: 0;
display: flex; gap: .5rem; align-items: center;
z-index: 2;
}
.wub-summary-actions__wl,
.wub-summary-actions__wl .yith-wcwl-add-to-wishlist,
.wub-summary-actions__wl .yith-add-to-wishlist-button-block {
display: inline-flex !important; align-items: center; justify-content: center;
margin: 0 !important; padding: 0 !important;
}
.wub-summary-actions__wl a,
.wub-summary-actions__share {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
flex-direction: row !important;
width: 38px; height: 38px; padding: 0 !important; margin: 0 !important; box-sizing: border-box;
border: 1px solid #ddd; border-radius: 50%;
background: #fff; color: var(--wub-darkgray);
cursor: pointer; text-decoration: none !important;
transition: color .15s, border-color .15s, background .15s;
position: relative; line-height: 1; text-align: center;
}
.wub-summary-actions__wl a:hover,
.wub-summary-actions__share:hover {
color: var(--wub-orange); border-color: var(--wub-orange);
}
/* Alles innen drin streng auf flex-zentriert trimmen, damit das Herz mittig sitzt */
.wub-summary-actions__wl a > *,
.wub-summary-actions__wl .yith-wcwl-icon-wrapper,
.wub-summary-actions__wl .yith-wcwl-icon {
display: inline-flex !important; align-items: center; justify-content: center;
margin: 0 !important; padding: 0 !important; line-height: 1 !important;
width: auto; height: auto;
}
.wub-summary-actions__wl .yith-wcwl-icon,
.wub-summary-actions__wl i { font-size: 18px; }
/* SVG-Icon der Wunschliste auf eine saubere Größe trimmen, sonst kommt
YITH mit ~27 px daher und das Herz wirkt verschoben. */
.wub-summary-actions__wl svg { width: 20px !important; height: 20px !important; display: block; }
/* Den (leeren) Label-Span komplett raus — YITH benutzt sowohl __label
(doppelter Unterstrich) als auch -label, je nach Version. */
.wub-summary-actions__wl .yith-wcwl-add-to-wishlist-button__label,
.wub-summary-actions__wl .yith-wcwl-add-to-wishlist-button-label { display: none !important; width: 0 !important; height: 0 !important; }
.wub-summary-actions__wl .yith-wcwl-add-to-wishlist-button--added,
.wub-summary-actions__wl .yith-wcwl-add-to-wishlist-button--added a,
.wub-summary-actions__wl .yith-wcwl-add-to-wishlist-button--added i { color: var(--wub-orange) !important; }
/* „Link kopiert"-Tooltip auf dem Teilen-Button */
.wub-summary-actions__share .wub-summary-actions__tip {
position: absolute; right: 50%; transform: translateX(50%); top: calc(100% + 6px);
background: var(--wub-darkgray); color: #fff;
font-size: .8rem; padding: .25rem .55rem; border-radius: 3px;
white-space: nowrap; opacity: 0; pointer-events: none;
transition: opacity .18s;
}
.wub-summary-actions__share.is-copied .wub-summary-actions__tip { opacity: 1; }
/* ---- Produkt-Meta unter Titel/Kurzbeschreibung (Artikel-Nr/EAN/Hersteller) ---- */
.wub-product-meta {
display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem;
margin: .75rem 0 1.1rem; padding: 0;
font-size: .95rem; color: var(--wub-darkgray);
}
.wub-product-meta dt { font-weight: 600; margin: 0; }
.wub-product-meta dd { margin: 0; }
.wub-product-meta .wub-meta__placeholder { color: var(--wub-midgray); font-style: italic; }
/* ---- Variantenprodukt: Auswahl-Tabelle (Farbe + Gebindegröße) ---- */
.single-product .wub-buybox form.variations_form .variations {
width: 100%; margin: 0 0 .75rem; border: none; border-collapse: collapse;
}
.single-product .wub-buybox form.variations_form .variations tr,
.single-product .wub-buybox form.variations_form .variations th,
.single-product .wub-buybox form.variations_form .variations td {
border: none; background: transparent; padding: .35rem 0;
}
.single-product .wub-buybox form.variations_form .variations th {
width: 9rem; text-align: left; color: var(--wub-darkgray); font-weight: 600;
vertical-align: middle;
}
.single-product .wub-buybox form.variations_form .variations td { vertical-align: middle; }
.single-product .wub-buybox form.variations_form .variations select {
width: 100%; padding: .55rem .65rem; border: 1px solid #ccc; border-radius: 3px;
background: #fff; font-size: 1rem; line-height: 1.2;
}
.single-product .wub-buybox form.variations_form .reset_variations {
display: inline-block; margin-top: .25rem; font-size: .85rem;
color: var(--wub-midgray);
}
.single-product .wub-buybox form.variations_form .single_variation { margin: .25rem 0 .9rem; }
.single-product .wub-buybox form.variations_form .single_variation .price { margin: 0; }
/* ---- Produktseite: Menge links neben „In den Warenkorb", Wunschliste
exakt darunter — gleiches Raster für simple- UND variantenformulare.
Für Varianten greift es auf der inneren .variations_button, für simple
direkt auf dem Cart-Formular (das KEINE Varianten ist). ---- */
.single-product .wub-buybox form.variations_form .woocommerce-variation-add-to-cart,
.single-product .wub-buybox form.cart:not(.variations_form) {
display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center;
}
.single-product .wub-buybox form.variations_form .woocommerce-variation-add-to-cart .quantity,
.single-product .wub-buybox form.cart:not(.variations_form) .quantity {
grid-column: 1; grid-row: 1; margin: 0;
}
.single-product .wub-buybox form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single-product .wub-buybox form.cart:not(.variations_form) .single_add_to_cart_button {
grid-column: 2; grid-row: 1; width: 100%;
display: flex; align-items: center; justify-content: center;
min-height: 52px; line-height: 1.2; white-space: nowrap;
}
.single-product .wub-buybox form.variations_form .woocommerce-variation-add-to-cart .wub-wishlist-btn,
.single-product .wub-buybox form.cart:not(.variations_form) .wub-wishlist-btn {
grid-column: 2; grid-row: 2; width: 100%;
}
.single-product .wub-buybox .wub-wishlist-btn .yith-wcwl-add-to-wishlist,
.single-product .wub-buybox .wub-wishlist-btn .yith-add-to-wishlist-button-block { display: block !important; width: 100% !important; margin: 0 !important; }
.single-product .wub-buybox .wub-wishlist-btn a {
display: flex !important; align-items: center; justify-content: center; gap: .5rem;
width: 100% !important; min-height: 52px; box-sizing: border-box;
padding: .6rem 1rem; border-radius: 3px;
border: 2px solid var(--wub-orange);
background: #fff; color: var(--wub-orange) !important;
font-weight: 600; text-decoration: none !important; line-height: 1.2; white-space: nowrap;
}
.single-product .wub-buybox .wub-wishlist-btn a:hover { background: var(--wub-orange); color: #fff !important; }
/* eigenes Herz-Icon, YITH-eigene Icons hier ausblenden */
.single-product .wub-buybox .wub-wishlist-btn i,
.single-product .wub-buybox .wub-wishlist-btn svg,
.single-product .wub-buybox .wub-wishlist-btn .yith-wcwl-icon { display: none !important; }
.single-product .wub-buybox .wub-wishlist-btn a::before { content: "\2665"; font-size: 1.15em; line-height: 1; }
/* Rechtstext-ENTWURF-Hinweis */
.wub-legal-warning {
background: #fff4e6; border: 2px solid var(--wub-orange); border-radius: 3px;
padding: 1rem 1.25rem; color: var(--wub-darkgray); font-size: .95rem;
}
/* =========================================================================
Produktkacheln im gotools-Stil — einheitliches Raster, alles in der
Karte fluchtet, Buttons unten bündig.
========================================================================= */
.woocommerce ul.products li.product {
border: 1px solid #e4e4e4 !important;
border-radius: 4px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.05);
box-sizing: border-box;
padding: .6rem !important;
display: flex !important;
flex-direction: column !important;
transition: box-shadow .15s ease, border-color .15s ease;
}
.woocommerce ul.products li.product:hover {
box-shadow: 0 6px 18px rgba(0,0,0,.13);
border-color: var(--wub-orange);
}
/* Bild-Link */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
display: block !important; text-decoration: none !important;
}
.woocommerce ul.products li.product .woocommerce-loop-image-link img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img:first-of-type {
width: 100% !important;
height: 200px !important;
object-fit: contain !important;
background: #fff;
margin: 0 0 .75rem !important;
}
/* Titel: feste 5-Zeilen-Box, damit ALLE Karten exakt gleich hoch sind
und der Preis auf derselben horizontalen Linie steht. Längere Titel
werden nach Zeile 5 mit Ellipsis abgekürzt. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: .95rem !important;
line-height: 1.35 !important;
font-weight: 600 !important;
color: var(--wub-black) !important;
margin: 0 0 .5rem !important;
padding: .5rem 0 0 !important;
border: 0 !important;
border-top: 1px solid #e4e4e4 !important;
/* Genau 5 Zeilen reserviert (5 × 1.35 = 6.75em) — gleiche Card-Höhe */
height: 6.75em !important;
box-sizing: content-box;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
hyphens: auto;
}
/* Preiszeile: Preis links, Rabatt-Badge auf Höhe des Verkaufspreises (unten). */
.woocommerce ul.products li.product .wub-loop-price-row {
display: flex; align-items: flex-end; justify-content: flex-start;
gap: .5rem; flex-wrap: nowrap;
margin: 0 0 .15rem;
}
/* Badge bekommt margin-bottom um auf "Baseline" des Verkaufspreises zu sitzen */
.woocommerce ul.products li.product .wub-loop-discount {
margin-bottom: .1rem;
}
.woocommerce ul.products li.product .price {
display: flex !important; flex-wrap: wrap; align-items: baseline; gap: .35rem;
font-size: 1.2rem !important; font-weight: 700 !important;
color: var(--wub-black) !important;
margin: 0 !important; line-height: 1.2;
flex: 0 1 auto; min-width: 0;
}
.woocommerce ul.products li.product .price del {
font-size: .85rem; font-weight: 400; color: var(--wub-midgray); text-decoration: line-through;
}
.woocommerce ul.products li.product .price ins {
text-decoration: none; font-weight: 700;
}
/* Rabatt-Badge: direkt neben dem Preis, immer kompakt — kein Umbruch. */
.woocommerce ul.products li.product .wub-loop-discount {
display: inline-block; padding: .2rem .55rem;
background: var(--wub-black);
color: #fff;
border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.4;
white-space: nowrap;
flex: 0 0 auto;
}
/* Auf Marken-Archivseiten Badge in Markenfarbe — passt visuell zur Seite */
body.wub-brand-milwaukee .woocommerce ul.products li.product .wub-loop-discount { background: #D64034; color: #fff; }
body.wub-brand-innotec .woocommerce ul.products li.product .wub-loop-discount { background: #FFDD00; color: #0E0E0E; }
body.wub-brand-tec7 .woocommerce ul.products li.product .wub-loop-discount { background: #00722E; color: #fff; }
body.wub-brand-propart .woocommerce ul.products li.product .wub-loop-discount { background: #006FB6; color: #fff; }
/* MwSt-/Versand-Hinweis (kleine graue Zeile) */
.woocommerce ul.products li.product .wub-loop-tax {
display: block; font-size: .78rem; color: var(--wub-midgray);
margin: 0 0 .75rem; line-height: 1.4;
}
/* Germanized-eigener Hinweis ausblenden — wir zeigen unseren eigenen.
Germanized rendert zwei -Elemente innerhalb .product-action-wrap mit
Steuern/Versandinfo. Verstecken, sonst stört's die Button-Reihe. */
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .wc-gzd-additional-info-loop,
.woocommerce ul.products li.product p.wc-gzd-additional-info { display: none !important; }
/* Aktions-Reihe (Warenkorb + Herz) immer ganz unten in der Karte.
.product-details ist der Wrapper um Titel+Preis+Button. Wir machen ihn
selbst zu einem flex-column-Container mit flex: 1, damit er die
restliche Card-Höhe füllt — DANN kann margin-top: auto auf den
Action-Wrap diesen an den Boden der Card schieben. */
.woocommerce ul.products li.product .product-details {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
.woocommerce ul.products li.product .product-action-wrap {
position: static !important;
opacity: 1 !important;
display: flex !important; flex-direction: row !important;
align-items: stretch !important; justify-content: stretch !important;
gap: .5rem;
width: 100% !important;
margin: auto 0 0 !important; /* füllt restliche Höhe → Button am Boden */
padding: 0 !important;
flex-wrap: nowrap !important;
transition: none !important;
}
/* „In den Warenkorb"-Button: Outline-Stil — weißer Hintergrund, schwarzer Text,
nur der Rand in Marken-/Akzentfarbe. Hover füllt mit Markenfarbe.
Fixe Höhe 46 px, damit das Wunschlist-Herz daneben exakt gleich hoch ist. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable {
flex: 1 1 auto; min-width: 0;
display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem;
font-size: .9rem !important; font-weight: 600 !important;
line-height: 1.2 !important;
padding: 0 .65rem !important;
min-height: 46px !important; height: auto !important;
border-radius: 3px !important;
background: #fff !important;
color: var(--wub-black) !important;
border: 1.5px solid var(--wub-orange) !important;
text-decoration: none !important;
transition: background .15s, color .15s, border-color .15s;
box-sizing: border-box;
white-space: normal !important;
text-align: center;
text-transform: none !important;
letter-spacing: 0 !important;
overflow: hidden;
}
/* Nach dem AJAX-„In den Warenkorb" hängt WooCommerce einen
„Warenkorb anzeigen"-Link an die Kachel — der sprengt das Layout.
Ausblenden: Feedback gibt der Live-Zähler oben im Header. */
.woocommerce ul.products li.product .added_to_cart { display: none !important; }
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .product_type_variable:hover {
background: var(--wub-orange) !important;
color: var(--wub-cta-text) !important;
border-color: var(--wub-orange) !important;
}
.woocommerce ul.products li.product .add_to_cart_button::before { content: none !important; }
.woocommerce ul.products li.product .add_to_cart_button .kadence-svg-iconset { display: none !important; }
/* Wunschliste-Herz: rundes Icon-Button neben dem Warenkorb.
YITH-Wrapper-Klassen variieren je Version (`.yith-add-to-wishlist-button-block`,
`.yith-wcwl-add-to-wishlist`) — beide Selektoren werden adressiert. */
.woocommerce ul.products li.product .yith-add-to-wishlist-button-block,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist {
flex: 0 0 auto;
margin: 0 !important;
display: inline-flex !important; align-items: center;
}
.woocommerce ul.products li.product .yith-add-to-wishlist-button-block a,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist a,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist-button {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 46px !important; height: 46px !important; box-sizing: border-box;
border: 1px solid #ddd !important; border-radius: 50% !important;
background: #fff !important; color: var(--wub-darkgray) !important;
padding: 0 !important; margin: 0 !important;
text-decoration: none !important;
transition: color .15s, border-color .15s;
}
.woocommerce ul.products li.product .yith-add-to-wishlist-button-block a:hover,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist a:hover {
color: var(--wub-orange) !important; border-color: var(--wub-orange) !important;
}
.woocommerce ul.products li.product .yith-add-to-wishlist-button-block svg,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist svg {
width: 18px !important; height: 18px !important;
}
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist-button-label,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist-button__label { display: none !important; }
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist-button--added,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist-button--added a { color: var(--wub-orange) !important; }
/* „Ähnliche Produkte" / Up-Sells auf der Produktseite: kompakter */
.related.products ul.products li.product,
.up-sells ul.products li.product { padding: .7rem !important; }
.related.products ul.products li.product img:first-of-type,
.up-sells ul.products li.product img:first-of-type { height: 150px !important; }
.related.products ul.products li.product .woocommerce-loop-product__title,
.up-sells ul.products li.product .woocommerce-loop-product__title { font-size: .85rem !important; min-height: 2.4em; }
.related.products ul.products li.product .price,
.up-sells ul.products li.product .price { font-size: 1.05rem !important; }
/* =========================================================================
Produkt-Suchleiste (Kopfbereich, außer Startseite)
========================================================================= */
.wub-searchbar { background: var(--wub-lightgray); padding: .85rem 1rem; }
.wub-search { max-width: 720px; margin: 0 auto; display: flex; }
.wub-search input[type="search"] {
flex: 1; min-width: 0;
border: 1px solid #cfcfcf; border-right: none;
border-radius: 3px 0 0 3px;
padding: .65rem .95rem; font-size: 1rem; background: #fff;
}
.wub-search input[type="search"]:focus { outline: none; border-color: var(--wub-orange); }
.wub-search__btn {
border: none; background: var(--wub-orange);
border-radius: 0 3px 3px 0; width: 54px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.wub-search__btn:hover { background: var(--wub-orange-d); }
.wub-search__btn::before {
content: ""; display: block; width: 24px; height: 24px; background-color: #fff;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E") center / 24px 24px no-repeat;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E") center / 24px 24px no-repeat;
}
/* =========================================================================
Shop-/Kategorie-Filterleiste
========================================================================= */
.wub-shopfilter {
display: flex; flex-wrap: wrap; gap: 1.25rem;
margin: 0 0 1.5rem; padding: 1rem;
background: var(--wub-lightgray); border-radius: 3px;
}
.wub-shopfilter__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wub-shopfilter__group > span {
font-weight: 700; font-family: var(--wub-font-body);
text-transform: none; font-size: 1.05rem; color: var(--wub-darkgray);
}
/* Kategorie-Accordion (aufklappbar, zeigt Unterkategorien) */
.wub-cat { border: 0; }
.wub-cat__sum {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
padding: .5rem .9rem; border: 1px solid #d8d8d8; border-radius: 3px; background: #fff;
font-weight: 600; color: var(--wub-darkgray); user-select: none;
}
.wub-cat__sum::-webkit-details-marker { display: none; }
.wub-cat__sum:hover { border-color: var(--wub-orange); }
.wub-cat__sum.is-active { background: var(--wub-orange); border-color: var(--wub-orange); color: #fff; }
.wub-cat__caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; margin-left: .5rem; flex: 0 0 auto; }
.wub-cat[open] > .wub-cat__sum .wub-cat__caret { transform: rotate(225deg); }
.wub-cat__kids { display: flex; flex-direction: column; gap: .3rem; padding: .45rem 0 .4rem .7rem; }
.wub-subchip {
display: block; padding: .35rem .8rem; border-radius: 3px; text-decoration: none;
color: var(--wub-darkgray); font-size: .92rem; border: 1px solid transparent;
}
.wub-subchip:hover { color: var(--wub-orange); border-color: #e4e4e4; }
.wub-subchip.is-active { background: var(--wub-orange); color: #fff; }
/* Preis-Doppel-Schieberegler */
.wub-priceslider { width: 100%; }
.wub-priceslider__rail { position: relative; height: 30px; }
.wub-priceslider__rail::before {
content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px;
background: #d8d8d8; border-radius: 2px;
}
.wub-priceslider__fill { position: absolute; top: 13px; height: 4px; background: var(--wub-orange); border-radius: 2px; }
.wub-priceslider__r {
position: absolute; top: 0; left: 0; width: 100%; height: 30px; margin: 0;
background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.wub-priceslider__r::-webkit-slider-thumb {
-webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 6px;
border-radius: 50%; background: #fff; border: 2px solid var(--wub-orange); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wub-priceslider__r::-moz-range-thumb {
pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 2px solid var(--wub-orange); cursor: pointer;
}
.wub-priceslider__r::-webkit-slider-runnable-track { background: none; height: 30px; }
.wub-priceslider__r::-moz-range-track { background: none; }
.wub-priceslider__vals { display: flex; justify-content: space-between; margin: .4rem 0 .7rem; font-weight: 700; font-size: .9rem; }
.wub-priceslider__apply {
width: 100%; background: var(--wub-orange); color: #fff; border: none; border-radius: 3px;
padding: .5rem; font-weight: 600; cursor: pointer;
}
.wub-priceslider__apply:hover { background: var(--wub-orange-d); }
/* =========================================================================
Kategorie-/Shop-Hero (wie Startseite) + Standard-Kadence-Titel ausblenden
========================================================================= */
.wub-cat-hero {
background: linear-gradient(120deg, #0E0E0E 0%, #2b2b2b 60%, #3a2410 100%);
color: #fff;
display: flex; align-items: center;
min-height: clamp(280px, 32vw, 440px);
}
.wub-cat-hero__inner {
max-width: 1180px; width: 100%; margin: 0 auto;
padding: 2.5rem clamp(1.5rem, 5vw, 4rem);
text-align: left;
}
.wub-cat-hero__badge {
display: inline-block; background: var(--wub-orange); color: #fff;
font-family: var(--wub-font-head); font-weight: 800; letter-spacing: .05em;
padding: .3rem .8rem; border-radius: 2px; font-size: .9rem; margin-bottom: 1rem;
}
.wub-cat-hero__title {
color: #fff; font-family: var(--wub-font-head); font-weight: 800;
text-transform: uppercase; letter-spacing: .01em;
font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: .98; margin: 0;
}
.wub-cat-hero__sub { color: #e6e6e6; margin: 1rem 0 0; font-size: clamp(1rem, 1.6vw, 1.3rem); max-width: 620px; }
/* Standard-Kadence-Titel/Hero auf Shop + Kategorie ausblenden (eigener Hero ersetzt ihn) */
body.tax-product_cat .entry-hero,
body.post-type-archive-product .entry-hero,
body.tax-product_cat .entry-hero-container,
body.post-type-archive-product .entry-hero-container { display: none !important; }
/* =========================================================================
Kategorie-Karussell: begrenzte Breite wie auf der Startseite (nicht full-bleed)
========================================================================= */
.wub-hero-contain {
max-width: var(--global-content-width, 1290px);
margin: 2.5rem auto 0;
padding: 0 clamp(1rem, 4vw, 2rem);
}
/* =========================================================================
Header über die volle Seitenbreite
========================================================================= */
.site-main-header-wrap .site-header-row-container-inner,
.site-main-header-inner-wrap {
max-width: 100% !important;
}
.site-main-header-wrap .site-header-row-container-inner {
padding-left: clamp(1rem, 3vw, 2.5rem);
padding-right: clamp(1rem, 3vw, 2.5rem);
}
/* =========================================================================
Suchfeld IM Header (Mitte)
========================================================================= */
.site-main-header-inner-wrap .site-header-main-section-center { flex: 1 1 auto; min-width: 0; padding: 0 clamp(.75rem, 2vw, 2rem); }
.wub-search--header { display: flex; width: 100%; max-width: 560px; margin: 0 auto; }
.wub-search--header input[type="search"] {
border: 1px solid #ddd; border-right: none; background: #fff;
border-radius: 3px 0 0 3px; padding: .55rem .9rem;
}
@media (max-width: 1024px) {
.site-main-header-inner-wrap .site-header-main-section-center { display: none; }
}
/* =========================================================================
Archiv: Filter als vertikale Sidebar LINKS, Produkte rechts
========================================================================= */
.wub-archive-cols { display: flex; gap: 2rem; align-items: flex-start; }
.wub-archive-sidebar {
flex: 0 0 300px; max-width: 300px;
position: sticky; top: 110px; align-self: flex-start;
max-height: calc(100vh - 130px); overflow-y: auto;
}
.wub-archive-main { flex: 1 1 auto; min-width: 0; }
/* Produktraster: feste 4 Spalten (responsiv weniger auf kleinen Schirmen).
Engerer Gap = Karten wirken zusammenhängender, mehr Inhalt sichtbar. */
.wub-archive-main ul.products {
display: grid !important;
grid-template-columns: repeat( 4, 1fr ) !important;
gap: .6rem !important;
margin: 0 !important;
}
@media (max-width: 1100px) { .wub-archive-main ul.products { grid-template-columns: repeat( 3, 1fr ) !important; } }
@media (max-width: 768px) { .wub-archive-main ul.products { grid-template-columns: repeat( 2, 1fr ) !important; } }
/* ≤480 (echte Handys): 2 Spalten beibehalten — wie gotools, statt 1 Spalte. */
@media (max-width: 480px) { .wub-archive-main ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
.wub-archive-main ul.products::before,
.wub-archive-main ul.products::after { content: none !important; display: none !important; }
.wub-archive-main ul.products li.product {
width: auto !important; margin: 0 !important; float: none !important; padding: .9rem !important;
}
.wub-archive-main ul.products li.product .woocommerce-loop-product__title { font-size: .95rem; }
.wub-archive-main ul.products li.product .price { font-size: 1rem; }
/* Filter-Sidebar: kompakte, saubere Liste (kein Kasten-Look) */
.wub-archive-sidebar .wub-shopfilter {
flex-direction: column; align-items: stretch; gap: 1.6rem; margin: 0;
background: transparent; padding: 0; border-radius: 0;
}
.wub-archive-sidebar .wub-shopfilter__group { flex-direction: column; align-items: stretch; gap: 0; }
.wub-archive-sidebar .wub-shopfilter__group > span { margin-bottom: .5rem; color: var(--wub-darkgray); font-size: 1.05rem; }
/* Kleines Suchfeld direkt oben in der Filter-Sidebar */
.wub-archive-sidebar .wub-filter-search {
display: flex; align-items: stretch; width: 100%;
margin: 0 0 1rem;
border: 1px solid #ddd; border-radius: 3px;
background: #fff;
overflow: hidden;
}
.wub-archive-sidebar .wub-filter-search input[type="search"] {
flex: 1 1 auto; min-width: 0;
border: none; outline: none; background: transparent;
padding: .45rem .6rem;
font-size: .9rem; font-family: inherit; color: var(--wub-darkgray);
}
.wub-archive-sidebar .wub-filter-search input[type="search"]::placeholder {
color: var(--wub-midgray); font-style: italic; font-size: .85rem;
}
.wub-archive-sidebar .wub-filter-search button {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; padding: 0; border: 0; cursor: pointer;
background: var(--wub-orange); color: #fff;
transition: background .15s;
}
.wub-archive-sidebar .wub-filter-search button:hover { background: #c64a00; }
.wub-archive-sidebar .wub-filter-search:focus-within { border-color: var(--wub-orange); }
/* Kategorie-Zeilen als Liste — einheitliche Schriftgröße/-gewicht für Einträge
mit und ohne Pfeil ( erbt sonst Browser-Default 17px, 14.4px). */
.wub-archive-sidebar .wub-chip,
.wub-archive-sidebar .wub-cat > .wub-cat__sum {
display: flex; align-items: center; justify-content: space-between;
text-align: left; border: 0; border-bottom: 1px solid #e9e9e9;
background: none; border-radius: 0; padding: .5rem .1rem;
font-size: .95rem; line-height: 1.45;
font-weight: 500; color: var(--wub-darkgray);
font-family: inherit;
}
.wub-archive-sidebar .wub-chip:hover,
.wub-archive-sidebar .wub-cat__sum:hover { color: var(--wub-orange); background: none; }
.wub-archive-sidebar .wub-chip.is-active,
.wub-archive-sidebar .wub-cat__sum.is-active { color: var(--wub-orange); font-weight: 700; background: none; border-bottom-color: var(--wub-orange); }
.wub-archive-sidebar .wub-cat__caret { width: 7px; height: 7px; }
/* Unterkategorien eingerückt, dezent */
.wub-archive-sidebar .wub-cat__kids { padding: .1rem 0 .4rem .9rem; gap: 0; border-bottom: 1px solid #e9e9e9; }
.wub-archive-sidebar .wub-subchip { border: 0; border-radius: 0; padding: .35rem .1rem; font-size: .9rem; color: var(--wub-midgray); }
.wub-archive-sidebar .wub-subchip:hover { color: var(--wub-orange); border: 0; }
.wub-archive-sidebar .wub-subchip.is-active { background: none; color: var(--wub-orange); font-weight: 600; }
/* "Mehr"-Filter (Auf Lager / Nur Angebote) als kleine Buttons */
.wub-archive-sidebar .wub-shopfilter__group:last-child { gap: .5rem; }
.wub-archive-sidebar .wub-shopfilter__group:last-child .wub-chip {
border: 1px solid #d8d8d8; border-radius: 3px; padding: .4rem .7rem; justify-content: flex-start;
}
.wub-archive-sidebar .wub-shopfilter__group:last-child .wub-chip.is-active {
border-color: var(--wub-orange); color: #fff; background: var(--wub-orange);
}
@media (max-width: 768px) {
.wub-archive-cols { flex-direction: column; }
.wub-archive-sidebar { flex-basis: auto; max-width: none; width: 100%; position: static; max-height: none; overflow: visible; }
}
/* =========================================================================
Header-Suchfeld breiter + Live-Vorschläge (Dropdown)
========================================================================= */
.site-main-header-inner-wrap .site-header-main-section-center { padding: 0 clamp(1rem, 3vw, 3rem); }
/* Kadence-Header-Zeile ist ein CSS-GRID (nicht Flex). Bei „center-column" sind die
Spalten 1fr auto 1fr → die Mitte ist nur inhaltsbreit. Auf auto 1fr auto stellen,
damit die mittlere Spalte (Suche) den freien Platz bekommt und breit wird. */
.site-main-header-inner-wrap.site-header-row-center-column {
grid-template-columns: auto 1fr auto !important;
}
/* Such-Item füllt die nun breite Mitte-Spalte */
.site-header-main-section-center .site-header-focus-item {
flex: 1 1 auto; width: 100%; max-width: 1100px;
}
/* Redundanten Kadence-Such-Umschalter (Lupe) ausblenden — eigenes Suchfeld ist inline */
.site-header-main-section-center .search-toggle-open-container { display: none; }
.wub-search--header { width: 100%; max-width: 1100px; position: relative; z-index: 70; }
.wub-search__suggestions {
position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
background: #fff; border: 1px solid #ddd; border-top: none;
border-radius: 0 0 3px 3px; box-shadow: 0 10px 28px rgba(0,0,0,.18);
max-height: 72vh; overflow: auto;
}
/* Header über der Brandbar (z-index 60) halten, damit Suchvorschläge
den schwarzen Marken-Balken überlagern und nicht dahinter verschwinden. */
header#masthead.site-header { position: relative; z-index: 70; }
.wub-sugg {
display: flex; align-items: center; gap: .75rem;
padding: .55rem .8rem; text-decoration: none; color: var(--wub-black);
border-bottom: 1px solid #f0f0f0;
}
.wub-sugg:hover { background: var(--wub-lightgray); }
.wub-sugg img, .wub-sugg__noimg {
width: 46px; height: 46px; flex: 0 0 46px;
object-fit: contain; background: #f5f5f5; border-radius: 2px;
}
.wub-sugg__name { flex: 1; font-size: .9rem; line-height: 1.25; }
.wub-sugg__price { font-weight: 700; white-space: nowrap; color: var(--wub-black); }
.wub-sugg__all {
display: block; width: 100%; text-align: center; cursor: pointer;
padding: .65rem; border: none; background: var(--wub-orange); color: #fff;
font-weight: 600; font-family: var(--wub-font-head); letter-spacing: .02em;
}
.wub-sugg__all:hover { background: var(--wub-orange-d); }
.wub-sugg__empty { padding: .85rem; color: var(--wub-midgray); }
/* Dropdown der Live-Suche nicht vom Header abschneiden */
.site-main-header-inner-wrap,
.site-main-header-inner-wrap .site-header-main-section-center,
.site-main-header-wrap .site-header-row-container-inner { overflow: visible; }
/* =========================================================================
Milwaukee-Datensektionen — Features, Tech. Daten, Lieferumfang, Datenblatt
========================================================================= */
.wub-mw-section-h {
font-size: 1.15rem; font-weight: 700; color: var(--wub-black);
margin: 0 0 .6rem; padding-bottom: .3rem;
border-bottom: 2px solid var(--wub-orange);
display: inline-block;
}
.wub-mw-list,
.wub-mw-features {
list-style: none; padding: 0; margin: 0 0 1.5rem;
}
.wub-mw-list li,
.wub-mw-features li {
position: relative;
padding: .35rem 0 .35rem 1.5rem;
line-height: 1.5;
border-bottom: 1px solid #f0f0f0;
}
.wub-mw-list li:last-child,
.wub-mw-features li:last-child { border-bottom: none; }
.wub-mw-list li::before,
.wub-mw-features li::before {
content: "";
position: absolute; left: .25rem; top: .75em;
width: 6px; height: 6px;
background: var(--wub-orange); border-radius: 50%;
}
/* Tech-Daten als 2-Spalten-Tabelle, gotools-Stil mit alternierenden Zeilen */
.wub-mw-tech-table {
width: 100%; border-collapse: collapse; margin: 0 0 1.5rem;
}
.wub-mw-tech-table th,
.wub-mw-tech-table td {
padding: .6rem .9rem; text-align: left; vertical-align: top;
border: 0; line-height: 1.4;
}
.wub-mw-tech-table tbody tr:nth-child(even) { background: #f7f7f7; }
.wub-mw-tech-table tbody tr:nth-child(odd) { background: #fff; }
.wub-mw-tech-table th {
font-weight: 500; color: var(--wub-darkgray);
width: 45%; min-width: 200px;
}
.wub-mw-tech-table td {
font-weight: 600; color: var(--wub-black);
}
/* Datenblatt-Download-Button (am Ende der Beschreibung) */
.wub-mw-datenblatt {
margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid #e4e4e4;
}
.wub-mw-datenblatt-btn {
display: inline-flex; align-items: center; gap: .5rem;
padding: .65rem 1rem;
background: #fff; color: var(--wub-black) !important;
border: 1.5px solid var(--wub-orange);
border-radius: 3px;
font-weight: 600; text-decoration: none !important;
transition: background .15s, color .15s;
}
.wub-mw-datenblatt-btn:hover {
background: var(--wub-orange); color: var(--wub-cta-text) !important;
}
.wub-mw-datenblatt-btn svg { stroke: currentColor; }
/* =========================================================================
Milwaukee-Super-Sale Sektion auf der Marken-Seite (unter dem Slider)
========================================================================= */
.wub-brand-sale-section {
margin: 2.5rem 0 0;
padding: 2.5rem 0;
background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
border-top: 3px solid #D64034;
border-bottom: 1px solid #eee;
}
.wub-brand-sale-section__inner {
max-width: var(--global-content-width, 1290px);
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 2rem);
}
.wub-brand-sale-section__head {
text-align: center;
margin: 0 0 1.5rem;
}
.wub-brand-sale-section__head h2 {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 900;
color: var(--wub-black);
margin: 0 0 .4rem;
text-transform: uppercase;
letter-spacing: -.01em;
}
.wub-brand-sale-section__head p {
font-size: 1rem;
color: var(--wub-midgray);
margin: 0;
}
.wub-brand-sale-section__grid ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: .8rem !important;
margin: 0 !important;
}
@media (max-width: 1024px) { .wub-brand-sale-section__grid ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 700px) { .wub-brand-sale-section__grid ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
.wub-brand-sale-section__grid ul.products::before,
.wub-brand-sale-section__grid ul.products::after { display: none !important; }
.wub-brand-sale-section__grid li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
}
.wub-brand-sale-section__cta {
display: inline-flex;
align-items: center;
margin: 1.5rem auto 0;
padding: .7rem 1.5rem;
background: #D64034;
color: #fff !important;
border: 2px solid #D64034;
border-radius: 3px;
font-weight: 700;
font-size: 1rem;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: .04em;
transition: background .15s, color .15s;
}
.wub-brand-sale-section__inner { display: flex; flex-direction: column; align-items: stretch; }
.wub-brand-sale-section__cta { align-self: center; }
.wub-brand-sale-section__cta:hover {
background: #fff;
color: #D64034 !important;
}
/* =========================================================================
MOBILE-RESPONSIVE — alle eigenen Komponenten
========================================================================= */
/* Brand-Leiste: ab 1100px Marken-Links horizontal scrollbar */
@media (max-width: 1100px) {
.wub-brandbar__brands {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
gap: 0;
}
.wub-brandbar__brands::-webkit-scrollbar { height: 3px; }
.wub-brand-logo { font-size: .85rem; padding: .4rem .65rem; }
}
/* Mobile: nur Burger + max. 3 Marken sichtbar, Rest via Burger erreichbar */
@media (max-width: 768px) {
.wub-brandbar__inner {
flex-wrap: nowrap;
gap: .5rem;
padding: 0 .75rem;
}
.wub-brandbar__brands { display: none; }
.wub-brandbar__cta { display: none; }
.wub-brandbar__burger-label { display: inline; }
}
/* Brand-Landing: Logo + Suche stacken */
@media (max-width: 768px) {
.wub-brand-landing-wrap { padding: 1rem 0 .25rem; }
.wub-brand-landing-wrap__inner { padding: 0 1rem; }
.wub-brand-search {
flex-direction: column;
align-items: stretch;
gap: .75rem;
}
.wub-brand-search__logo {
justify-content: flex-start;
min-width: 0;
height: 44px;
}
.wub-brand-search__logo img { max-height: 44px; }
.wub-brand-search__form input[type="search"] { height: 44px; font-size: .95rem; }
.wub-brand-search__submit { height: 44px; padding: 0 1rem; font-size: .9rem; }
/* Kat-Buttons: 2 Spalten */
.wub-brand-cat-buttons {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 50px;
gap: .5rem;
}
.wub-brand-cat-button { font-size: .85rem; padding: .3rem .5rem; }
}
/* Slider: kleinere Höhe auf Mobile */
@media (max-width: 768px) {
.wub-carousel__slide { height: clamp(220px, 38vw, 320px) !important; }
.wub-carousel__title { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.wub-carousel__sub { font-size: .9rem; }
.wub-carousel__cta { padding: .55rem 1.1rem; font-size: .85rem; }
.wub-carousel__arrow { display: none; }
}
/* Milwaukee-Super-Sale-Sektion: 2 Spalten auf Mobile (schon definiert, hier zur Sicherheit) */
@media (max-width: 700px) {
.wub-brand-sale-section { padding: 1.5rem 0; margin: 1.5rem 0 0; }
.wub-brand-sale-section__head h2 { font-size: 1.4rem; }
.wub-brand-sale-section__head p { font-size: .9rem; }
.wub-brand-sale-section__cta { font-size: .9rem; padding: .6rem 1rem; }
}
/* Milwaukee-Super-Sale-Page Filter — auf Mobile alles untereinander */
@media (max-width: 768px) {
.wub-sale-wrapper { padding: 1rem; margin: 0; }
.wub-sale-header h1 { font-size: 1.5rem; }
.wub-sale-header p { font-size: .9rem; }
.wub-sale-filters {
flex-direction: column;
align-items: stretch;
gap: .75rem;
}
.wub-sale-field { width: 100%; }
.wub-sale-field select,
.wub-sale-field input[type="search"] {
width: 100%;
min-width: 0;
}
.wub-sale-field--search input[type="search"] { padding-left: 2.2rem; }
.wub-sale-submit { width: 100%; }
.wub-sale-reset { width: 100%; text-align: center; justify-content: center; }
}
/* Pseudo-Variants-Sidebar auf Mobile: unter dem Produkt statt rechts */
@media (max-width: 768px) {
.wub-product-grid { flex-direction: column; }
.summary.entry-summary { position: static !important; }
}
/* Footer-Trennstriche auf Mobile: gleicher Look */
@media (max-width: 768px) {
.wub-brand-dropdown { display: none !important; }
}
/* =========================================================================
GLOBALE MOBILE-SAFETY — verhindert horizontalen Scroll, Überlauf, etc.
========================================================================= */
/* 1. Kein horizontaler Scroll auf der ganzen Seite (Mobile + Desktop).
WICHTIG: `overflow-x: clip` statt `hidden` — `hidden` würde alle
`position:sticky` Elemente in der Seite kaputtmachen (Brandbar,
Anker-Menü, Kaufbox-Sticky). `clip` verhindert Scroll OHNE einen
neuen Scroll-Container zu erzeugen → Sticky bleibt heil.
Browser-Support: Chrome 90+, Firefox 81+, Safari 16+ (alle relevanten). */
html, body {
overflow-x: clip;
max-width: 100%;
}
img, video, iframe {
max-width: 100%;
height: auto;
}
/* 2. Brandbar — komplett kompakt auf Mobile */
@media (max-width: 768px) {
.wub-brandbar { padding: .35rem 0; }
.wub-brandbar__inner {
flex-wrap: nowrap !important;
gap: .35rem !important;
padding: 0 .5rem !important;
justify-content: flex-start;
}
.wub-brandbar__burger {
padding: .35rem .55rem !important;
flex: 0 0 auto;
}
.wub-brandbar__burger-label { font-size: .85rem; }
/* Marken-Liste + "Alle Marken" → Burger-Menü übernimmt */
.wub-brandbar__brands,
.wub-brandbar__cta { display: none !important; }
}
/* 3. Brand-Landing-Wrap — Logo + Suche untereinander, Kat-Buttons 2-spaltig */
@media (max-width: 768px) {
.wub-brand-landing-wrap { padding: .75rem 0 .25rem; }
.wub-brand-landing-wrap__inner { padding: 0 .75rem; }
.wub-brand-search {
flex-direction: column !important;
align-items: stretch !important;
gap: .5rem !important;
}
.wub-brand-search__logo {
min-width: 0 !important;
height: 40px !important;
justify-content: flex-start !important;
}
.wub-brand-search__logo img {
max-width: 140px !important;
max-height: 40px !important;
}
.wub-brand-search__form {
width: 100%;
min-width: 0;
}
.wub-brand-search__form input[type="search"] {
height: 42px !important;
font-size: 16px !important; /* prevents iOS-Zoom */
min-width: 0;
}
.wub-brand-search__submit {
height: 42px !important;
padding: 0 .9rem !important;
font-size: .9rem !important;
}
/* Kat-Buttons */
.wub-brand-cat-buttons {
grid-template-columns: repeat(2, 1fr) !important;
grid-auto-rows: 44px !important;
gap: .4rem !important;
margin: 0 0 1rem !important;
}
.wub-brand-cat-button {
font-size: .82rem !important;
padding: .25rem .35rem !important;
}
}
@media (max-width: 380px) {
.wub-brand-cat-button { font-size: .75rem !important; }
}
/* 4. Slider — kompakt, Pfeile weg */
@media (max-width: 768px) {
.wub-hero-contain { padding: 0 !important; margin-top: .75rem !important; }
.wub-carousel { border-radius: 0; }
.wub-carousel__slide {
height: clamp(200px, 40vw, 280px) !important;
padding: 0 1rem;
}
.wub-carousel__inner {
padding: 1rem !important;
max-width: 100% !important;
}
.wub-carousel__title {
font-size: clamp(1.3rem, 5vw, 1.7rem) !important;
line-height: 1.1 !important;
}
.wub-carousel__sub { font-size: .8rem !important; line-height: 1.3; }
.wub-carousel__badge { font-size: .65rem !important; padding: .15rem .55rem !important; }
.wub-carousel__cta {
padding: .5rem 1rem !important;
font-size: .82rem !important;
}
.wub-carousel__arrow { display: none !important; }
.wub-carousel__dots { bottom: .5rem !important; }
}
/* 5. Milwaukee-Super-Sale-Sektion auf Marken-Seite */
@media (max-width: 768px) {
.wub-brand-sale-section {
padding: 1.25rem 0 !important;
margin: 1rem 0 0 !important;
}
.wub-brand-sale-section__inner { padding: 0 .75rem !important; }
.wub-brand-sale-section__head h2 {
font-size: 1.2rem !important;
}
.wub-brand-sale-section__head p {
font-size: .85rem !important;
}
.wub-brand-sale-section__grid ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
.wub-brand-sale-section__cta {
font-size: .85rem !important;
padding: .55rem 1rem !important;
margin-top: 1rem !important;
}
}
@media (max-width: 380px) {
.wub-brand-sale-section__grid ul.products {
grid-template-columns: 1fr !important;
}
}
/* 6. Milwaukee-Super-Sale-Page (eigene Seite) */
@media (max-width: 768px) {
.wub-sale-wrapper {
max-width: none !important;
margin: 0 !important;
padding: 1rem .75rem !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.wub-sale-header h1 { font-size: 1.5rem !important; }
.wub-sale-header p { font-size: .9rem !important; }
.wub-sale-filters {
flex-direction: column !important;
align-items: stretch !important;
gap: .6rem !important;
}
.wub-sale-field {
width: 100% !important;
min-width: 0 !important;
}
.wub-sale-field select,
.wub-sale-field input[type="search"] {
width: 100% !important;
min-width: 0 !important;
font-size: 16px !important; /* prevents iOS-Zoom */
}
.wub-sale-submit, .wub-sale-reset {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
}
/* 7. Off-Canvas-Filter — auf Mobile breiter */
@media (max-width: 768px) {
body.wub-brand-top-level .wub-archive-sidebar {
width: min(85vw, 320px) !important;
top: 60px !important;
max-height: calc(100vh - 60px) !important;
}
}
/* 8. Produktkacheln-Grid — auf Mobile */
@media (max-width: 700px) {
.woocommerce ul.products li.product { padding: .5rem !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: .88rem !important;
min-height: auto !important;
height: auto !important;
-webkit-line-clamp: 3 !important;
}
.woocommerce ul.products li.product .price { font-size: 1rem !important; }
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable {
font-size: .8rem !important;
padding: .35rem .4rem !important;
min-height: 40px !important;
height: auto !important;
line-height: 1.15 !important;
}
.wub-sale-flag {
padding: .25rem .55rem !important;
font-size: .7rem !important;
}
}
/* 9. Produkt-Detailseite — Sticky-Kaufbox aus, alles untereinander */
@media (max-width: 900px) {
.wub-product-grid { display: block !important; }
.summary.entry-summary {
position: static !important;
max-width: 100% !important;
}
}
/* 10. Form-Inputs allgemein — iOS-Zoom verhindern (input < 16px → zoomt) */
@media (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
select, textarea {
font-size: 16px !important;
}
}
/* 11. Pattern-Streifen "SUPERSALE" auf Mobile aus (kein Platz seitlich) */
@media (max-width: 1280px) {
.wub-sale-pattern { display: none !important; }
}
/* 12. USP-Bar (oben mit "Versand kostenfrei…") — kompakter auf Mobile */
@media (max-width: 768px) {
.wub-usp-bar { padding: .35rem 0; }
.wub-usp-bar__inner {
flex-wrap: wrap;
justify-content: center;
gap: .6rem 1rem !important;
font-size: .72rem !important;
}
.wub-usp-bar span { font-size: .72rem; }
.wub-usp-bar .wub-icon { width: 12px; height: 12px; }
}
/* 13. Header (Kadence Logo + Konto + Cart) — wir lassen Kadence das machen,
sorgen aber dafür dass nichts überläuft */
@media (max-width: 768px) {
.site-main-header-inner-wrap,
.site-main-header-wrap { overflow: visible; }
.site-header-row-container-inner > .site-header-row { max-width: 100vw; }
.wub-search--header { max-width: 100% !important; }
}
/* 14. WooCommerce Cart-Page (Standard-WC) */
@media (max-width: 768px) {
.woocommerce-cart-form table.shop_table_responsive,
.woocommerce-page table.shop_table_responsive {
display: block;
}
.woocommerce-cart-form table.shop_table_responsive thead { display: none; }
.woocommerce-cart-form table.shop_table_responsive tbody tr { display: block; margin-bottom: 1rem; border: 1px solid #e0e0e0; padding: .5rem; border-radius: 3px; }
.woocommerce-cart-form table.shop_table_responsive tbody td { display: flex; justify-content: space-between; border: 0; padding: .35rem 0; }
.woocommerce .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
}
/* 15. WooCommerce Checkout-Page — Form-Spalten gestackt */
@media (max-width: 768px) {
.woocommerce-checkout form.checkout {
display: block;
}
.woocommerce-checkout #customer_details { width: 100% !important; float: none !important; }
.woocommerce-checkout .woocommerce-checkout-review-order { width: 100% !important; float: none !important; margin-top: 1.5rem; }
}
/* 16. Account-Page (My-Account) */
@media (max-width: 768px) {
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
width: 100% !important; float: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1rem; }
}
/* 17. Anker-Menü auf Produktdetailseite — auf Mobile als horizontal scrollbar */
@media (max-width: 768px) {
.wub-anchornav {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 0 !important;
padding: 0 .5rem !important;
justify-content: flex-start !important;
top: 110px !important; /* Brandbar 70 + USP-Bar 40 */
}
.wub-anchornav a {
flex: 0 0 auto !important;
padding: .5rem .75rem !important;
font-size: .8rem !important;
white-space: nowrap !important;
}
}
/* 18. Pseudo-Variants-Liste auf Produktseite — auf Mobile kompakt */
@media (max-width: 768px) {
.wub-pseudo-variants { margin-top: 1rem !important; }
.wub-pseudo-variants__heading { font-size: 1rem !important; }
.wub-pseudo-row__name { font-size: .82rem; }
.wub-pseudo-row__current { font-size: .9rem; }
.wub-pseudo-row__uvp { font-size: .7rem; }
}
/* 19. Tabs (Beschreibung/Tech.Daten/Lieferumfang) — kompakter */
@media (max-width: 768px) {
.woocommerce-tabs ul.tabs.wc-tabs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding: 0 !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li {
flex: 0 0 auto !important;
margin: 0 !important;
}
.wub-mw-tech-table th, .wub-mw-tech-table td {
display: block;
width: 100%;
padding: .35rem .6rem;
}
.wub-mw-tech-table th {
background: #f5f5f5;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .03em;
}
}
/* 20. Datenblatt-Button + CTA-Buttons — touch-friendly */
@media (max-width: 768px) {
.wub-mw-datenblatt-btn {
display: flex !important;
justify-content: center;
text-align: center;
}
}
/* 21. Footer (Kadence-Default) — sicherstellen dass nichts überläuft */
@media (max-width: 768px) {
.site-footer .site-footer-wrap > .site-container { padding-left: 1rem; padding-right: 1rem; }
}
/* 22. Min-Touch-Target 44x44 für interaktive Elemente (Apple-Guideline)
AUSNAHME: .wub-carousel__dot — Deko-Slider-Punkte sind keine Tipp-Fläche;
die 44px-min-height streckte sie sonst zu senkrechten Ellipsen (8x44). */
@media (max-width: 768px) {
button:not(.wub-carousel__dot), a.button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
input[type="submit"] {
min-height: 44px;
}
}
/* 23. Produkt-Karten MOBILE FIX — Preis nicht umbrechen, Button-Text sichtbar */
@media (max-width: 700px) {
/* Preise NICHT umbrechen — egal wie schmal die Karte ist */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .wub-uvp-actual,
.woocommerce ul.products li.product .wub-uvp-strike {
white-space: nowrap !important;
}
.woocommerce ul.products li.product .price {
font-size: 1.05rem !important;
}
.woocommerce ul.products li.product .wub-uvp-strike {
font-size: .72rem !important;
}
.woocommerce ul.products li.product .wub-uvp-actual {
font-size: 1rem !important;
}
/* "In den Warenkorb"-Button bekommt vollen Karten-Platz, kein Heart daneben */
.woocommerce ul.products li.product .product-action-wrap {
flex-wrap: wrap !important;
gap: .35rem !important;
}
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable {
flex: 1 1 100% !important;
font-size: .8rem !important;
padding: 0 .5rem !important;
height: 40px !important;
min-height: 40px !important;
}
/* Wunschliste-Herz kleiner + unterhalb */
.woocommerce ul.products li.product .yith-add-to-wishlist-button-block,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist {
flex: 0 0 auto !important;
}
.woocommerce ul.products li.product .yith-add-to-wishlist-button-block a,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist a {
width: 36px !important;
height: 36px !important;
}
/* Rabatt-Badge kompakter */
.woocommerce ul.products li.product .wub-loop-discount {
font-size: .72rem !important;
padding: .15rem .45rem !important;
}
.wub-sale-flag {
font-size: .68rem !important;
padding: .25rem .5rem !important;
top: .35rem !important;
left: .35rem !important;
}
/* "Angebot!"-Badge (Standard-WC onsale) auf den WUB-Deals-Karten */
.woocommerce span.onsale {
font-size: .7rem !important;
padding: .25rem .55rem !important;
min-height: auto !important;
min-width: auto !important;
line-height: 1.4 !important;
}
/* Produkt-Bild kleiner machen, damit mehr Platz für Text */
.woocommerce ul.products li.product img:first-of-type,
.woocommerce ul.products li.product .woocommerce-loop-product__title + a img {
height: 140px !important;
}
}
/* Sehr kleine Bildschirme (≤ 380 px) */
@media (max-width: 380px) {
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable {
font-size: .72rem !important;
padding: 0 .3rem !important;
}
.woocommerce ul.products li.product .price { font-size: .95rem !important; }
.woocommerce ul.products li.product .wub-uvp-strike { font-size: .65rem !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: .8rem !important;
}
}
/* 24. AGGRESSIVE MOBILE-CARDS FIX:
- Button-Text "In den Warenkorb" wird durch ein Warenkorb-Icon (SVG, inline via
background-image data-URI) ersetzt. Spart Platz und sieht nicht abgeschnitten aus.
- Wunschliste-Herz auf Mobile komplett ausblenden (frisst Platz)
- Produktbild kompakter
- Rabatt-Badge als Eck-Sticker AUF dem Produktbild (oben rechts), nicht mehr
neben dem Preis — dort ist's auf 2-Spalten-Layout immer zu eng. */
@media (max-width: 700px) {
/* Herz weg auf Mobile */
.woocommerce ul.products li.product .yith-add-to-wishlist-button-block,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist {
display: none !important;
}
/* Button: Text raus, Warenkorb-Icon rein (SVG als background-image,
verwendet currentColor → erbt automatisch die Markenfarbe) */
.woocommerce ul.products li.product .product-action-wrap .add_to_cart_button,
.woocommerce ul.products li.product .product-action-wrap .product_type_variable {
font-size: 0 !important; /* Originaltext ausblenden */
letter-spacing: 0 !important;
text-transform: none !important;
padding: .55rem !important;
position: relative;
min-width: 0 !important;
min-height: 42px;
display: flex !important;
align-items: center;
justify-content: center;
}
.woocommerce ul.products li.product .product-action-wrap .add_to_cart_button::after,
.woocommerce ul.products li.product .product-action-wrap .product_type_variable::after {
content: "";
display: block;
width: 22px; height: 22px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* "Loading"-Spinner / Added-Indikator nicht überschreiben */
.woocommerce ul.products li.product .add_to_cart_button.loading::after,
.woocommerce ul.products li.product .add_to_cart_button.added::after {
content: none;
background: none;
-webkit-mask: none;
mask: none;
}
.woocommerce ul.products li.product .add_to_cart_button.added + .added_to_cart {
font-size: .8rem !important;
}
/* Produkt-Bild deutlich kompakter */
.woocommerce ul.products li.product .woocommerce-loop-image-link img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product img:first-of-type {
height: 110px !important;
}
/* Card-Padding noch kleiner */
.woocommerce ul.products li.product {
padding: .4rem !important;
}
/* Titel kürzer und kompakter */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: .8rem !important;
line-height: 1.2 !important;
padding: .35rem 0 0 !important;
margin: 0 0 .35rem !important;
height: auto !important;
min-height: 0 !important;
-webkit-line-clamp: 3 !important;
}
/* Rabatt-Badge: aus dem Preisbereich raus, oben rechts AUF dem Produktbild.
Card ist sowieso schon position:relative. */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product .wub-loop-price-row {
flex-wrap: wrap;
}
.woocommerce ul.products li.product .wub-loop-discount {
position: absolute !important;
top: .5rem !important;
right: .5rem !important;
margin: 0 !important;
padding: .15rem .45rem !important;
font-size: .7rem !important;
line-height: 1.3 !important;
border-radius: 3px !important;
z-index: 3;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
/* Preis selbst etwas kompakter, damit nichts mehr umbricht */
.woocommerce ul.products li.product .price {
font-size: 1.05rem !important;
gap: .25rem !important;
white-space: nowrap;
}
.woocommerce ul.products li.product .price del {
font-size: .75rem !important;
}
}
/* =========================================================================
Marken-Landing — Logo + Suche oben, Kategorie-Buttons darunter
Rendert über dem Karussell (nach Header, vor dem Slider).
========================================================================= */
.wub-brand-landing-wrap {
background: #fff;
padding: 1.5rem 0 .5rem;
}
.wub-brand-landing-wrap__inner {
max-width: 1340px;
margin: 0 auto;
padding: 0 1.25rem;
}
.wub-brand-search {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 0 0 1.25rem;
flex-wrap: nowrap;
}
.wub-brand-search__logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 160px;
height: 60px;
}
.wub-brand-search__logo img {
max-width: 200px;
max-height: 60px;
height: auto;
width: auto;
object-fit: contain;
}
.wub-brand-search__logo-text {
font-size: 1.6rem;
font-weight: 900;
color: var(--wub-orange);
text-transform: uppercase;
}
.wub-brand-search__form {
flex: 1 1 auto;
display: flex;
align-items: stretch;
gap: 0;
min-width: 0;
}
.wub-brand-search__form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
height: 50px;
padding: 0 1.25rem;
font-size: 1rem;
border: 1px solid #d0d0d0;
border-right: 0;
border-radius: 3px 0 0 3px;
background: #fff;
outline: none;
}
.wub-brand-search__form input[type="search"]:focus {
border-color: var(--wub-orange);
}
.wub-brand-search__submit {
flex: 0 0 auto;
height: 50px;
padding: 0 1.5rem;
background: var(--wub-orange);
color: var(--wub-cta-text);
border: 1px solid var(--wub-orange);
border-radius: 0 3px 3px 0;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.wub-brand-search__submit:hover {
background: var(--wub-orange-d, #d65c12);
border-color: var(--wub-orange-d, #d65c12);
}
/* Auf Top-Level-Marken: Filter ist Off-Canvas-Overlay.
Slidet von links über den Inhalt — Produktraster bleibt unverändert.
Brandbar-Burger ("Kategorien") toggelt is-filter-open auf . */
body.wub-brand-top-level .wub-archive-cols {
display: block; /* kein Flex → Main nimmt volle Breite */
}
body.wub-brand-top-level .wub-archive-main {
width: 100%;
}
/* 5 Spalten auf Top-Level-Markenseite (mehr Platz, da Filter eingeklappt) */
body.wub-brand-top-level .wub-archive-main ul.products {
grid-template-columns: repeat( 5, 1fr ) !important;
}
@media (max-width: 1400px) { body.wub-brand-top-level .wub-archive-main ul.products { grid-template-columns: repeat( 4, 1fr ) !important; } }
@media (max-width: 1100px) { body.wub-brand-top-level .wub-archive-main ul.products { grid-template-columns: repeat( 3, 1fr ) !important; } }
@media (max-width: 768px) { body.wub-brand-top-level .wub-archive-main ul.products { grid-template-columns: repeat( 2, 1fr ) !important; } }
/* ≤480 (echte Handys): 2 Spalten beibehalten — wie gotools, statt 1 Spalte. */
@media (max-width: 480px) { body.wub-brand-top-level .wub-archive-main ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
body.wub-brand-top-level .wub-archive-sidebar {
position: fixed;
top: 110px; /* unter Brandbar (70) + USP-Bar (~40) */
left: 0;
bottom: 0;
width: 300px;
max-height: calc( 100vh - 130px );
overflow-y: auto;
background: #fff;
z-index: 80;
padding: 1rem 1.25rem;
border-right: 1px solid #e0e0e0;
box-shadow: 4px 0 16px rgba(0,0,0,.12);
transform: translateX(-100%);
transition: transform .3s ease;
}
body.wub-brand-top-level.is-filter-open .wub-archive-sidebar {
transform: translateX(0);
}
/* Halbtransparenter Backdrop hinter dem Filter — Klick schließt */
body.wub-brand-top-level::after {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,.35);
z-index: 79;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
pointer-events: none;
}
body.wub-brand-top-level.is-filter-open::after {
opacity: 1;
visibility: visible;
transition-delay: 0s;
pointer-events: auto;
}
/* Aktiv-Indikator auf dem Brandbar-Burger wenn Filter offen */
body.is-filter-open .wub-brandbar__burger {
background: rgba(0,0,0,.08);
border-radius: 3px;
}
@media (max-width: 480px) {
body.wub-brand-top-level .wub-archive-sidebar { width: 90vw; }
}
/* Kategorie-Buttons — ALLE Kacheln exakt gleich groß (auch zeilenübergreifend) */
.wub-brand-cat-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 56px;
gap: .6rem;
margin: 0 0 2rem;
}
@media (max-width: 1024px) { .wub-brand-cat-buttons { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .wub-brand-cat-buttons { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 50px; } }
.wub-brand-cat-button {
display: flex;
align-items: center;
justify-content: center;
padding: .3rem .75rem;
background: #fff;
color: var(--wub-orange) !important;
border: 2px solid var(--wub-orange);
border-radius: 4px;
font-weight: 700;
font-size: .95rem;
line-height: 1.2;
text-decoration: none !important;
text-align: center;
transition: background .15s, color .15s;
}
.wub-brand-cat-button:hover {
background: var(--wub-orange);
color: var(--wub-cta-text) !important;
}
/* "Mehr Kategorien"-Ausklappbereich — kompakter Pfeil zentriert */
.wub-brand-cat-more {
margin: -1.2rem 0 1rem; /* zieht näher an die obigen Kacheln ran */
text-align: center;
}
.wub-brand-cat-more > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--wub-orange);
background: #fff;
border: 1.5px solid var(--wub-orange);
border-radius: 999px;
user-select: none;
transition: background .15s, color .15s;
}
.wub-brand-cat-more > summary::-webkit-details-marker { display: none; }
.wub-brand-cat-more > summary::marker { content: ''; }
.wub-brand-cat-more > summary:hover {
background: var(--wub-orange);
color: var(--wub-cta-text);
}
.wub-brand-cat-more__chev {
transition: transform .2s ease;
}
.wub-brand-cat-more[open] .wub-brand-cat-more__chev {
transform: rotate(180deg);
}
.wub-brand-cat-buttons--more {
margin-top: .8rem !important;
}
@media (max-width: 768px) {
.wub-brand-search { flex-wrap: wrap; }
.wub-brand-search__logo { flex: 1 1 100%; justify-content: flex-start; min-width: 0; }
.wub-brand-search__form { flex: 1 1 100%; }
}
/* =========================================================================
Milwaukee-Super-Sale: roter Sale-Badge auf Produktkarten + roter Body-BG
========================================================================= */
/* Sale-Badge oben links über dem Featured-Image jeder Produktkarte */
.woocommerce ul.products li.product .wub-sale-flag {
position: absolute;
top: .6rem;
left: .6rem;
z-index: 5;
display: inline-block;
padding: .35rem .8rem;
background: #D64034; /* Milwaukee-Rot */
color: #fff;
font-weight: 800;
font-size: .8rem;
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,.15);
font-family: var(--wub-font-head, sans-serif);
line-height: 1.2;
}
/* Card muss relativ sein, damit absolute Badge greift (i.d.R. schon gesetzt) */
.woocommerce ul.products li.product { position: relative; }
/* Milwaukee-Super-Sale: Body komplett rot, alle Kadence-Layout-Container
transparent, nur der Sale-Wrapper bleibt als weißes Rechteck zentriert.
So entstehen automatisch links + rechts rote Streifen, weil der weiße
Block max. 1280 px breit ist. Header + Footer haben eigene Hintergründe
und bleiben unbeeinflusst. */
html body.wub-sale-bg {
background-color: #D64034 !important;
}
/* Alle Kadence-Layout-Container transparent — sonst überdecken sie den
roten Body-Hintergrund mit eigenem Weiß. */
html body.wub-sale-bg .site,
html body.wub-sale-bg .site-container,
html body.wub-sale-bg .wp-site-blocks,
html body.wub-sale-bg #wrapper,
html body.wub-sale-bg #inner-wrap,
html body.wub-sale-bg #content,
html body.wub-sale-bg #primary,
html body.wub-sale-bg .content-area,
html body.wub-sale-bg main.site-main,
html body.wub-sale-bg article,
html body.wub-sale-bg .entry-content,
html body.wub-sale-bg .entry-content-wrap {
background: transparent !important;
}
/* Kadence Page-Title-Bereich oben (grauer Hero-Block mit page-title)
auf der Sale-Seite komplett ausblenden — der Titel wird im Shortcode
selbst gerendert (eigene Optik). */
html body.wub-sale-bg .entry-hero,
html body.wub-sale-bg .entry-hero-container-inner,
html body.wub-sale-bg .page-title,
html body.wub-sale-bg .kadence-title-row,
html body.wub-sale-bg .kadence-entry-header,
html body.wub-sale-bg .entry-header,
html body.wub-sale-bg .above-entry-meta,
html body.wub-sale-bg .below-entry-meta {
display: none !important;
}
/* Pattern-Container: zwei fix positionierte Streifen mit gestapeltem
Milwaukee-Logo + "SUPERSALE"-Schriftzug, vertikal rotiert.
Skalierung über vh-Einheiten → wirkt auf jedem Bildschirm sauber. */
.wub-sale-pattern {
position: fixed;
top: 0;
bottom: 0;
width: calc( (100vw - 1400px) / 2 );
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
overflow: hidden;
pointer-events: none;
box-sizing: border-box;
}
.wub-sale-pattern--left { left: 0; }
.wub-sale-pattern--right { right: 0; }
/* Items: Logo + Text gestapelt. Text ist vertikal mit writing-mode.
Sauber gestapelt, keine Rotation auf Container-Ebene → keine Overlaps. */
.wub-sale-pattern__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
flex-shrink: 0;
padding: 1rem 0;
}
.wub-sale-pattern__item img {
display: block;
width: clamp( 70px, 65%, 160px );
max-width: 90%;
height: auto;
filter: brightness(0) invert(1); /* Logo komplett weiß */
opacity: .9;
}
.wub-sale-pattern__label {
font-family: var(--wub-font-head, sans-serif);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .25em;
color: #fff;
font-size: clamp( 1.1rem, 1.5vw, 1.6rem );
white-space: nowrap;
opacity: .9;
line-height: 1;
/* Text vertikal von oben nach unten lesbar */
writing-mode: vertical-rl;
}
/* Auf der linken Seite: Text spiegeln (von unten nach oben lesen) */
.wub-sale-pattern--left .wub-sale-pattern__label {
transform: rotate( 180deg );
}
/* Auf schmaleren Schirmen kein Pattern (kein Platz seitlich) */
@media (max-width: 1280px) {
.wub-sale-pattern { display: none; }
}
/* Sale-Wrapper als zentrierter weißer Block mit max-width.
Links + rechts entstehen automatisch rote Streifen vom Body. */
.wub-sale-wrapper {
background: #fff;
max-width: 1400px;
margin: 2rem auto;
padding: 2rem;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
/* Header (im Shortcode) */
.wub-sale-header {
text-align: center;
margin: 0 0 2rem;
padding: 0 0 1.5rem;
border-bottom: 3px solid #D64034;
}
.wub-sale-header h1 {
margin: 0 0 .5rem;
font-size: 2rem;
font-weight: 800;
color: var(--wub-black);
}
.wub-sale-header p { margin: 0; color: var(--wub-midgray); font-size: 1.05rem; }
/* Layout: 1-Spaltig — Filter-Leiste oben (sticky horizontal), Grid drunter */
.wub-sale-layout {
display: flex;
flex-direction: column;
gap: 1rem;
}
.wub-sale-main { min-width: 0; }
/* Horizontale Filter-Leiste — sticky beim Scrollen */
.wub-sale-sidebar {
position: sticky;
top: 95px;
z-index: 10;
background: #fff;
border-radius: 4px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
padding: .85rem 1rem;
}
.wub-sale-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem 1rem;
}
.wub-sale-field {
display: flex;
flex-direction: column;
gap: .25rem;
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--wub-darkgray);
}
.wub-sale-field strong { color: var(--wub-black); }
.wub-sale-field select,
.wub-sale-field input[type="search"] {
padding: .5rem .7rem;
border: 1px solid #d0d0d0;
border-radius: 3px;
background: #fff;
font-size: .95rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--wub-black);
min-width: 160px;
height: 40px;
box-sizing: border-box;
}
.wub-sale-field select:focus,
.wub-sale-field input[type="search"]:focus {
outline: none;
border-color: #D64034;
}
.wub-sale-field--search {
position: relative;
}
.wub-sale-field--search svg {
position: absolute;
left: .7rem;
top: calc( 50% + 8px ); /* center berücksichtigt label-span */
color: var(--wub-midgray);
pointer-events: none;
}
.wub-sale-field--search input[type="search"] {
padding-left: 2.2rem;
min-width: 200px;
}
.wub-sale-field--search::before {
/* leeres pseudo-element damit label-flex-column das Suchfeld korrekt sized */
content: "Suche";
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
/* Slider */
.wub-sale-field--slider { min-width: 220px; }
.wub-sale-field--slider input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: #ddd;
border-radius: 3px;
outline: none;
margin: .8rem 0 0;
}
.wub-sale-field--slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #D64034;
border-radius: 50%;
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wub-sale-field--slider input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
background: #D64034;
border-radius: 50%;
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wub-sale-submit {
padding: .55rem 1.2rem;
background: #D64034;
color: #fff;
border: 1px solid #D64034;
border-radius: 3px;
font-weight: 700;
cursor: pointer;
height: 40px;
align-self: flex-end;
}
.wub-sale-submit:hover { background: #B33327; border-color: #B33327; }
/* Filter-Gruppen nebeneinander */
.wub-sale-filtergroup {
display: flex;
align-items: center;
gap: .6rem;
margin: 0;
padding: 0;
border: 0;
flex-wrap: wrap;
}
.wub-sale-filtergroup h4 {
margin: 0;
font-size: .8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--wub-darkgray);
white-space: nowrap;
}
.wub-sale-filtergroup ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.wub-sale-filtergroup li { margin: 0; padding: 0; }
.wub-sale-filtergroup a {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .35rem .7rem;
color: var(--wub-black);
text-decoration: none;
border-radius: 3px;
font-size: .85rem;
border: 1px solid #ddd;
background: #fff;
transition: background .15s, color .15s, border-color .15s;
white-space: nowrap;
}
.wub-sale-filtergroup a:hover { border-color: #D64034; color: #D64034; }
.wub-sale-filtergroup a.is-active {
background: #D64034;
color: #fff;
font-weight: 600;
border-color: #D64034;
}
.wub-sale-filtergroup .wub-sale-count { font-size: .75rem; opacity: .7; }
.wub-sale-filtergroup a.is-active .wub-sale-count { color: rgba(255,255,255,.9); opacity: 1; }
.wub-sale-reset {
padding: .55rem 1rem;
color: var(--wub-midgray);
text-decoration: none;
font-size: .9rem;
border-radius: 3px;
background: transparent;
border: 1px solid #ddd;
height: 40px;
display: inline-flex;
align-items: center;
align-self: flex-end;
}
.wub-sale-reset:hover { color: #D64034; border-color: #D64034; }
.wub-sale-result-count {
margin: .5rem 0 1rem;
font-size: .95rem;
color: var(--wub-midgray);
font-weight: 500;
}
.wub-sale-empty {
padding: 3rem 1rem;
text-align: center;
color: var(--wub-midgray);
background: #f6f6f6;
border-radius: 4px;
}
/* Mobile: Filter-Leiste nicht sticky (zu wenig Platz), normales Layout */
@media (max-width: 1280px) {
.wub-sale-wrapper {
margin: 0;
padding: 1rem;
box-shadow: none;
border-radius: 0;
max-width: none;
}
.wub-sale-sidebar {
position: static;
gap: .75rem 1rem;
}
}