/*
 * Heimwerkglobal-Design 2026
 * ---------------------------------------------------------------------------
 * Design-Ebene ueber NOVA (clear) + heimwerkglobal.css + custom.css.
 * Reines CSS, kein Kompilieren noetig. Wird in template.xml als LETZTE Datei
 * eingebunden und gewinnt deshalb bei gleicher Spezifitaet.
 *
 * Grundsatz: nur Optik. Keine Funktion haengt an diesem Stylesheet - faellt
 * es weg, sieht der Shop aus wie NOVAChild und funktioniert unveraendert.
 *
 * Schriften: selbst gehostet (DSGVO - kein Abruf bei Google). Lizenz OFL 1.1,
 * siehe fonts/LICENSE-*.txt. Latin-Teilmenge enthaelt Umlaute und ß.
 *
 * Gliederung:
 *   1. Schriften und Farb-Tokens
 *   2. Grundtypografie, Buttons, Formulare
 *   3. Topbar, Kopfbereich, Suche, Icons, Warenkorb
 *   4. Hauptnavigation
 *   5. Brotkruemel
 *   6. Produktkarten (Listen, Slider)
 *   7. Kategorieseite (Kopf, Filter, Werkzeugleiste)
 *   8. Produktseite
 *   9. Footer
 *  10. Mobil
 */

/* 1. Schriften und Farb-Tokens ============================================ */

@font-face {
    font-family: "HWG Archivo";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url("fonts/archivo-latin-variable.woff2") format("woff2-variations"),
         url("fonts/archivo-latin-variable.woff2") format("woff2");
}

@font-face {
    font-family: "HWG Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-variable.woff2") format("woff2-variations"),
         url("fonts/inter-latin-variable.woff2") format("woff2");
}

:root {
    --hwg-green-900: #0b2e22;
    --hwg-green-800: #004c25;
    --hwg-green-700: #0d5f35;
    --hwg-green-600: #1b6a48;
    --hwg-green-100: #e4efe8;
    --hwg-green-50: #f1f7f3;
    --hwg-amber: #f5b301;
    --hwg-amber-hover: #ffc21a;
    --hwg-red: #b42318;
    --hwg-ink: #16201b;
    --hwg-ink-2: #3b4741;
    --hwg-ink-3: #6b7670;
    --hwg-line: #e3e6e1;
    --hwg-line-2: #eef0ec;
    --hwg-stone: #f3f6f4;   /* neutrales Hellgrau mit Gruenstich (vorher beige #f6f5f1) */
    --hwg-radius: 14px;
    --hwg-radius-sm: 10px;
    --hwg-shadow: 0 1px 2px rgba(16, 32, 24, .06), 0 8px 24px -12px rgba(16, 32, 24, .18);
    --hwg-shadow-lg: 0 2px 4px rgba(16, 32, 24, .06), 0 24px 48px -20px rgba(16, 32, 24, .28);
    --hwg-font-head: "HWG Archivo", "Arial Narrow", system-ui, sans-serif;
    --hwg-font-body: "HWG Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 2. Grundtypografie, Buttons, Formulare =================================== */

body {
    font-family: var(--hwg-font-body);
    color: var(--hwg-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .h1, .h2, .h3,
.product-title, .productlist-header h1 {
    font-family: var(--hwg-font-head);
    font-stretch: 85%;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hwg-ink);
}

h4, h5, h6, .h4, .h5, .h6 {
    font-family: var(--hwg-font-body);
    font-weight: 600;
}

a { color: var(--hwg-green-700); }
a:hover { color: var(--hwg-green-800); }

.btn {
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--hwg-green-800);
    border-color: var(--hwg-green-800);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hwg-green-700);
    border-color: var(--hwg-green-700);
    color: #fff;
}

.btn-outline-primary {
    border-width: 1.5px;
    border-color: var(--hwg-line);
    color: var(--hwg-ink);
}

.btn-outline-primary:hover {
    background-color: var(--hwg-green-50);
    border-color: var(--hwg-green-700);
    color: var(--hwg-green-800);
}

.form-control {
    border-radius: 10px;
    border-color: var(--hwg-line);
}

.form-control:focus {
    border-color: var(--hwg-green-700);
    box-shadow: 0 0 0 4px var(--hwg-green-100);
}

/* 3. Topbar, Kopfbereich, Suche, Icons, Warenkorb ========================== */

#header-top-bar {
    background: var(--hwg-green-900);
    color: #d6e4dc;
    font-size: 13px;
}

#header-top-bar .nav-link,
#header-top-bar a {
    color: #d6e4dc;
}

#header-top-bar a:hover { color: #fff; }

/* Eintraege der Trust-Leiste: heimwerkglobal.scss faerbt sie in $primary
   (fuer hellen Grund). Auf dem dunklen Grund hell - Kontrast #d6e4dc auf
   #0b2e22 ca. 12:1, Quellenangabe #a9c2b4 ca. 7:1 (Minimum AA: 4,5:1). */
#header-top-bar .hwg-topbar-item {
    color: #d6e4dc;
    font-weight: 500;
}

#header-top-bar .hwg-topbar-sources {
    color: #a9c2b4;
    opacity: 1;
}

#header-top-bar .fas,
#header-top-bar .hwg-topbar-star {
    color: var(--hwg-amber);
}

/* Kopfbereich DECKEND weiss: NOVA legt beim Oeffnen von Warenkorb/Menue einen
   dunklen Schleier ueber die Seite. Ein halbtransparenter Kopf wurde dadurch
   grau, und das Logo (JPG mit weissem Grund) stand als weisser Kasten heraus. */
#jtl-nav-wrapper {
    background: #fff;
    border-bottom: 1px solid var(--hwg-line);
    box-shadow: none;
}

/* Suchfeld als Pille mit eingebettetem Button */
#search .input-group,
.search-form-wrapper-fixed .input-group {
    border: 1.5px solid var(--hwg-line);
    border-radius: 999px;
    background: var(--hwg-stone);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

#search .input-group:focus-within,
.search-form-wrapper-fixed .input-group:focus-within {
    border-color: var(--hwg-green-700);
    background: #fff;
    box-shadow: 0 0 0 4px var(--hwg-green-100);
}

#search .form-control,
.search-form-wrapper-fixed .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
    height: 48px;
    padding-left: 22px;
    font-size: 15px;
}

#search .input-group-append .btn,
.search-form-wrapper-fixed .input-group-append .btn {
    margin: 4px;
    border-radius: 999px !important;
    background: var(--hwg-green-800);
    border-color: var(--hwg-green-800);
    color: #fff;
    min-width: 48px;
}

#search .input-group-append .btn:hover {
    background: var(--hwg-green-700);
}

/* Icon-Leiste rechts: Konto, Merkliste, Warenkorb */
#shop-nav .nav-link {
    border-radius: 12px;
    color: var(--hwg-ink-2);
    transition: background .2s, color .2s;
}

#shop-nav .nav-link:hover {
    background: var(--hwg-stone);
    color: var(--hwg-ink);
}

#shop-nav .cart-icon-dropdown > .nav-link {
    background: var(--hwg-green-800);
    color: #fff;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 6px;
}

#shop-nav .cart-icon-dropdown > .nav-link:hover {
    background: var(--hwg-green-700);
    color: #fff;
}

#shop-nav .fa-sup,
#shop-nav .badge-pill {
    background: var(--hwg-amber);
    color: var(--hwg-ink);
    font-weight: 700;
}

/* 4. Hauptnavigation ======================================================= */

#mainNavigation .navbar-nav > .nav-item > .nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--hwg-ink-2);
    border-radius: 10px;
    transition: background .2s, color .2s;
}

#mainNavigation .navbar-nav > .nav-item > .nav-link:hover,
#mainNavigation .navbar-nav > .nav-item.active > .nav-link {
    background: var(--hwg-green-50);
    color: var(--hwg-green-800);
}

/* NOVA zeichnet den aktiven Punkt mit einer Unterstreichung - ersetzt durch
   die Hintergrundflaeche oben. */
@media (min-width: 992px) {
    #mainNavigation .navbar-nav > .nav-item > .nav-link::before,
    #mainNavigation .navbar-nav > .nav-item > .nav-link::after {
        border-bottom-color: transparent !important;
    }
}

/* Angebote rot hervorheben */
#mainNavigation .navbar-nav > .nav-item > .nav-link[href$="/Angebot-Aktionen"] {
    color: var(--hwg-red);
    font-weight: 600;
}

/* Mega-Menue: NUR das oberste Aufklapp-Panel bekommt Rahmen/Schatten.
   Die verschachtelten Unterlisten darin sind ebenfalls .dropdown-menu - ohne
   die Einschraenkung bekam jede Liste einen eigenen Kasten mit Schatten. */
#mainNavigation .navbar-nav > .nav-item > .dropdown-menu {
    border: 0;
    border-top: 1px solid var(--hwg-line);
    border-radius: 0 0 18px 18px;
    box-shadow: var(--hwg-shadow-lg);
}

#mainNavigation .dropdown-menu .dropdown-menu,
#mainNavigation .dropdown-menu .nav,
#mainNavigation .dropdown-menu .submenu-headline + * {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

/* Ueberschriften und Links im Mega-Menue */
#mainNavigation .dropdown-menu .submenu-headline,
#mainNavigation .dropdown-menu .submenu-headline-toplevel {
    font-family: var(--hwg-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--hwg-ink);
    border-bottom-color: var(--hwg-line);
}

#mainNavigation .dropdown-menu .nav-link {
    padding: 4px 0;
    font-size: 14px;
    color: var(--hwg-ink-2);
    border-radius: 0;
    background: none;
}

#mainNavigation .dropdown-menu .nav-link:hover,
#mainNavigation .dropdown-menu .submenu-headline:hover {
    color: var(--hwg-green-700);
    background: none;
}

/* 5. Brotkruemel =========================================================== */

.breadcrumb {
    background: transparent;
    font-size: 13px;
    color: var(--hwg-ink-3);
}

.breadcrumb-item a { color: var(--hwg-ink-3); }
.breadcrumb-item a:hover { color: var(--hwg-green-700); }
.breadcrumb-item.active { color: var(--hwg-ink); font-weight: 600; }

/* 6. Produktkarten ========================================================= */

.productbox.productbox-column {
    background: #fff;
    border: 1px solid var(--hwg-line);
    border-radius: var(--hwg-radius);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    height: 100%;
}

.productbox.productbox-column:hover {
    border-color: #cdd3cc;
    box-shadow: var(--hwg-shadow-lg);
}

/* NOVA blendet beim Hover einen Rahmen ein - der eigene Rahmen ersetzt ihn */
.productbox-hover:hover::before { display: none; }

/* Karteninhalt: NOVA baut ihn als Bootstrap-Zeile (.row mit negativem Rand
   -15px). Ohne Innenabstand der Karte rutschte der Inhalt links heraus und
   wurde abgeschnitten (Bild verschoben, Text/Preis links abgeschnitten).
   Deshalb Zeile und Spalten selbst neutralisieren. */
.productbox-column .productbox-inner { padding: 0; }
.productbox-column .productbox-inner > .row { margin-left: 0; margin-right: 0; }
.productbox-column .productbox-inner > .row > .col { padding-left: 0; padding-right: 0; }

/* Bildbereich: NUR Hintergrund, KEIN Innenabstand. NOVA baut den Rahmen als
   Quadrat mit absolut positioniertem Inhalt (inkl. zweitem Hover-Bild) -
   ein Innenabstand verschob und beschnitt die Bilder (z. B. Kategorie Sanitaer). */
.productbox-column .productbox-image {
    background: #fff;
    padding: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--hwg-line-2);
}

/* WICHTIG: Bei Artikeln mit 2 Bildern liegt das Hover-Bild in einem eigenen,
   absolut positionierten .productbox-image UEBER dem ersten. Ohne diese
   Ruecksetzung bekam es den weissen Grund von oben und deckte das erste Bild
   komplett ab (leere Karten, z. B. 'Fiskars Teleskop Schneeraeumer'). */
.productbox-column .productbox-image .productbox-image {
    background: transparent;
    border: 0;
}

/* NOVA-Kartenbilder: KEINE eigenen transform-/mix-blend-Regeln. NOVA zentriert
   das Bild per transform: translate(-50%,-50%) und blendet beim Hover ein
   zweites Bild ueber - jede eigene transform-Angabe verschiebt das Bild
   (es sass dann rechts unten und wurde abgeschnitten). */

.productbox-column .productbox-inner > .row > .col:last-child {
    padding: 14px 16px 16px;
}

.productbox-title a {
    color: var(--hwg-ink);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

.productbox-title a:hover { color: var(--hwg-green-700); }

.productbox .price,
.productbox-price {
    font-family: var(--hwg-font-head);
    font-stretch: 90%;
    font-size: 22px;
    font-weight: 700;
    color: var(--hwg-ink);
    letter-spacing: -.01em;
}

.productbox .base-price {
    font-size: 12px;
    color: var(--hwg-ink-3);
}

/* Ribbons ("Auf Lager", "Neu", "Sale") als kleine Etiketten */
.productbox-ribbon.ribbon {
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 8px;
    left: 12px;
    top: 12px;
    box-shadow: none;
}

.productbox-ribbon.ribbon::before,
.productbox-ribbon.ribbon::after { display: none; }

/* NOVA schiebt das Band beim Hovern nach links oben (fuer sein gefaltetes Band) -
   unser Etikett bleibt an seinem Platz */
.productbox.productbox-hover:hover .productbox-ribbon.ribbon,
.productbox.productbox-hover:focus .productbox-ribbon.ribbon,
.productbox.productbox-hover.focus .productbox-ribbon.ribbon {
    top: 12px;
    left: 12px;
}

/* Schnellaktionen (Merken/Vergleichen) als runde weisse Buttons */
.productbox-quick-actions .btn.badge-circle-1 {
    background: #fff;
    border: 0;
    color: var(--hwg-ink);
    box-shadow: var(--hwg-shadow);
}

.productbox-quick-actions .btn.badge-circle-1:hover {
    color: var(--hwg-red);
}

/* Produkt-Slider (OPC "Produkt-Slider", z. B. Startseite, "Aehnliche Artikel") */
.product-wrapper-product {
    padding: 6px;
}

/* NOVA schreibt die Kartenhoehe beim Laden fest per style="height:..px" in jede
   Karte. Laden Schriften danach, wird der Inhalt hoeher und der Grundpreis unten
   abgeschnitten. Stattdessen: Spur als Flex-Zeile, alle Karten gleich hoch per CSS. */
.slick-type-product .slick-track {
    display: flex;
}

.slick-type-product .slick-track > .product-wrapper-product.slick-slide {
    height: auto !important;
    float: none;
}

.product-wrapper-product > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--hwg-line);
    border-radius: var(--hwg-radius);
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.product-wrapper-product > a:hover {
    border-color: #cdd3cc;
    box-shadow: var(--hwg-shadow-lg);
    text-decoration: none;
}

/* Bild in Originalgroesse von NOVA, KEIN Innenabstand und kein Mischmodus:
   ein Innenabstand zwang das Bild in eine kleinere Flaeche als NOVA es per
   srcset/sizes angefordert hat - Ergebnis waren unscharfe Bilder. */
.product-wrapper-product .item-slider.productbox-image {
    background: #fff;
    margin: 0;
    border-bottom: 1px solid var(--hwg-line-2);
}

.product-wrapper-product .item-slider-desc {
    color: var(--hwg-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 12px 14px 0;
    text-decoration: none;
    min-height: calc(2.8em + 12px);
}

.product-wrapper-product .item-slider-price {
    padding: 6px 14px 14px;
    margin-top: auto;
}

.product-wrapper-product .item-slider-price .price { font-size: 20px; }

/* Grundpreis/Einheit ("3,94 € pro 1 Einheit"): darf auf 2 Zeilen umbrechen
   (einzeilig wurde er auf schmalen Karten abgeschnitten). Feste Mindesthoehe fuer
   2 Zeilen, damit die Karten im Slider trotzdem gleich hoch bleiben. */
.product-wrapper-product .price-note {
    display: block;
    min-height: 2.7em;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
}

.product-wrapper-product .base-price {
    display: block;
    white-space: normal;
}

.product-wrapper-product .base-price,
.product-wrapper-product .base-price a,
.product-wrapper-product .base-price .value {
    font-size: 11.5px;
    color: var(--hwg-ink-3);
    text-decoration: none;
}

/* Spannenpreise ("37,90 € - 39,90 €") nicht umbrechen lassen */
.product-wrapper-product .price span { white-space: nowrap; }

/* OPC-Trenner mit Titel ("Heimwerkglobal Reiniger", "Angebote / Sales" ...):
   statt zentriertem Text zwischen zwei Linien eine linksbuendige Ueberschrift */
.opc-Divider.hr-sect {
    font-family: var(--hwg-font-head);
    font-stretch: 85%;
    font-weight: 800;
    font-size: clamp(26px, 2.8vw, 38px);
    letter-spacing: -.01em;
    color: var(--hwg-ink);
    justify-content: flex-start;
    text-align: left;
    margin: 56px 0 18px;
}

/* Startseite laeuft in voller Breite - Ueberschriften und Slider auf eine
   Lesebreite von max. 1360px einruecken, mindestens 16px Rand */
#content > .opc-Divider.hr-sect,
#content > .slick-slider-other,
#content > div > .slick-slider-other {
    padding-left: max(16px, calc((100% - 1360px) / 2));
    padding-right: max(16px, calc((100% - 1360px) / 2));
}

.opc-Divider.hr-sect::before { display: none; }

.opc-Divider.hr-sect::after {
    border-color: transparent;
    background: none;
}

/* 7. Kategorieseite ======================================================== */

.productlist-header .title h1,
#content .title h1 {
    font-size: clamp(30px, 3.6vw, 48px);
    margin-bottom: .5rem;
}

.productlist-header .desc {
    color: var(--hwg-ink-2);
    font-size: 15.5px;
    max-width: 760px;
}

/* Unterkategorie-Kacheln */
.content-cats-small .sub-categories,
.content-cats-small > div {
    border-radius: var(--hwg-radius);
}

.content-cats-small a {
    color: var(--hwg-ink);
    font-weight: 600;
}

/* Filter-Seitenleiste */
.sidepanel-left .box {
    border-bottom: 0;
}

.sidepanel-left .btn-filter-box,
.sidepanel-left .productlist-filter-headline {
    font-size: 14px;
    font-weight: 600;
    color: var(--hwg-ink);
    text-decoration: none;
}

.sidepanel-left .filter-item {
    color: var(--hwg-ink-2);
    border-radius: 8px;
}

.sidepanel-left .filter-item:hover {
    background: var(--hwg-green-50);
    color: var(--hwg-green-800);
}

.sidepanel-left .filter-item.active {
    color: var(--hwg-green-800);
    font-weight: 600;
}

.sidepanel-left hr { border-color: var(--hwg-line); }

/* Werkzeugleiste ueber der Liste */
.productlist-page-nav .btn-option {
    border-radius: 10px;
    border-color: var(--hwg-line);
    color: var(--hwg-ink-3);
}

.productlist-page-nav .btn-option.active {
    background: var(--hwg-stone);
    color: var(--hwg-ink);
}

.productlist-item-info {
    color: var(--hwg-ink-3);
    font-size: 13px;
}

/* Kategorie-Ratgeber unter der Liste (Teil nach [mehr]) */
.hwg-cat-guide {
    border-top: 1px solid var(--hwg-line);
}

.hwg-cat-guide h2 {
    font-size: clamp(24px, 2.4vw, 30px);
}

.hwg-cat-guide th {
    background: var(--hwg-stone);
    font-weight: 600;
}

.hwg-cat-guide tr:nth-child(even) td { background: #fcfcfa; }

/* 8. Produktseite ========================================================== */

.product-detail .product-title {
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.1;
}

/* Galerie: weisser Grund mit feinem Rahmen. Ein grauer Grund wuerde bei
   Produktfotos mit weissem Hintergrund einen Kasten zeigen - mix-blend-mode
   greift im Slick-Slider wegen dessen Transform-Ebenen nicht zuverlaessig. */
.product-detail .gallery-with-action-main {
    background: #fff;
    border: 1px solid var(--hwg-line);
    border-radius: 22px;
    overflow: hidden;
}

.product-detail .product-actions .btn.badge-circle-1 {
    background: #fff;
    border: 0;
    color: var(--hwg-ink);
    box-shadow: var(--hwg-shadow);
}

.product-detail .info-essential {
    font-size: 13px;
    color: var(--hwg-ink-3);
}

.product-detail .info-essential strong {
    font-weight: 500;
    color: var(--hwg-ink-3);
}

.product-detail .info-essential span,
.product-detail .info-essential a {
    color: var(--hwg-ink-2);
    font-weight: 600;
}

/* Kaufbereich als Karte */
.product-detail .product-offer {
    border: 1px solid var(--hwg-line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--hwg-shadow);
    margin-top: 1.25rem;
}

.product-detail .product-offer .price {
    font-family: var(--hwg-font-head);
    font-stretch: 90%;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hwg-ink);
    line-height: 1;
}

.product-detail .price-note {
    font-size: 13px;
    color: var(--hwg-ink-3);
}

.product-detail .stock-information {
    background: var(--hwg-green-50);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 16px 0;
    border: 0;
}

.product-detail .delivery-status {
    font-size: 14px;
}

.product-detail .delivery-status .status-2,
.product-detail .delivery-status .text-success {
    color: var(--hwg-green-700) !important;
    font-weight: 600;
}

.product-detail .question-on-item .btn-link {
    color: var(--hwg-ink-2);
    font-size: 13.5px;
}

.product-detail #add-to-cart .form-counter {
    border: 1.5px solid var(--hwg-line);
    border-radius: 14px;
    overflow: hidden;
    height: 56px;
}

.product-detail #add-to-cart .form-counter .form-control,
.product-detail #add-to-cart .form-counter .btn {
    border: 0;
    height: 100%;
}

.product-detail #add-to-cart .btn-primary {
    height: 56px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
}

/* Tabs Beschreibung / FAQ / PDF */
#product-tabs.nav-tabs {
    border-bottom: 1px solid var(--hwg-line);
}

#product-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--hwg-ink-2);
    font-weight: 500;
    font-size: 15px;
}

#product-tabs .nav-link.active {
    color: var(--hwg-ink);
    font-weight: 600;
    border-bottom-color: var(--hwg-green-800);
    background: transparent;
}

/* Eigenschaften-Tabelle gestreift */
.product-attributes table,
#tab-description table {
    border-collapse: separate;
    border-spacing: 0;
}

.product-attributes tr:nth-child(odd) td,
#tab-description .table-striped tbody tr:nth-of-type(odd) {
    background: var(--hwg-stone);
}

/* Bild-Hinweis dezenter */
.hwg-image-notice {
    font-size: 12px;
    color: var(--hwg-ink-3);
}

/* 9. Footer ================================================================ */

#footer {
    background: var(--hwg-green-900);
    color: #b9cdc1;
}

/* Zwei IDs, weil heimwerkglobal.css die Footer-Links mit "#footer .nav-link"
   und Box-Regeln faerbt (dunkelgruen fuer hellen Grund). */
#footer #footer-boxes a:not(.btn),
#footer #footer-boxes .nav-link,
#footer .footnote-vat a {
    color: #b9cdc1;
}

#footer #footer-boxes a:not(.btn):hover,
#footer #footer-boxes .nav-link:hover {
    color: #fff;
}

#footer .productlist-filter-headline,
#footer .box-normal-link,
#footer h2, #footer h3, #footer .h2, #footer .h3 {
    color: #fff;
    font-family: var(--hwg-font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

#footer hr { border-color: rgba(255, 255, 255, .12); }

#footer .footnote-vat { color: #8fa99a; }

#footer .withdrawal-link-wrapper .btn {
    background: var(--hwg-amber);
    border-color: var(--hwg-amber);
    color: var(--hwg-ink);
}

/* 10. Mobil ================================================================ */

@media (max-width: 991.98px) {
    /* Mobile Suche wie im Entwurf: Lupe links IM Feld, kein runder Button
       rechts. Der Button bleibt funktional (Absenden per Tippen auf die Lupe
       oder Enter), liegt aber transparent links ueber dem Feld. */
    .search-form-wrapper-fixed .input-group {
        position: relative;
    }

    .search-form-wrapper-fixed .form-control {
        height: 46px;
        padding-left: 46px;
    }

    .search-form-wrapper-fixed .input-group-append {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 4;
    }

    .search-form-wrapper-fixed .input-group-append .btn {
        background: transparent;
        border: 0;
        color: var(--hwg-ink-3);
        margin: 0;
        height: 100%;
        min-width: 46px;
        box-shadow: none;
    }

    .search-form-wrapper-fixed .input-group-append .btn:hover,
    .search-form-wrapper-fixed .input-group-append .btn:focus {
        background: transparent;
        color: var(--hwg-green-800);
    }

    .search-form-wrapper-fixed .form-clear {
        right: 12px;
        left: auto;
    }

    .product-detail .product-offer {
        padding: 18px;
        border-radius: 16px;
    }

    .product-detail .product-offer .price { font-size: 36px; }

    .productbox-column .productbox-inner > .row > .col:last-child {
        padding: 10px 12px 12px;
    }

    .productbox .price,
    .productbox-price { font-size: 19px; }
}

/* Kopfbereich auf dieselbe Breite wie der Inhalt (max. 1320px, zentriert) -
   sonst sassen Logo und "Alle Kategorien" ganz am Bildschirmrand, waehrend
   der Inhalt darunter eingerueckt ist. */
@media (min-width: 992px) {
    #jtl-nav-wrapper > .container-fluid-xl,
    #jtl-nav-wrapper > .topbar-wrapper > .container-fluid-xl {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Unterkategorien oben in Kategorieseiten: ruhige Karten mit Bild, Name und
   Kurztext. Die Liste der Unter-Unterkategorien entfaellt (erreichbar ueber
   die Karte, die Seitenleiste und das Menue). */
.content-cats-small > .col { margin-bottom: 16px; }

.content-cats-small .sub-categories {
    height: 100%;
    padding: 14px 14px 16px;
    background: #fff;
    border: 1px solid var(--hwg-line);
    border-radius: var(--hwg-radius);
    transition: border-color .2s, box-shadow .2s;
}

.content-cats-small .sub-categories:hover {
    border-color: var(--hwg-green-100);
    box-shadow: var(--hwg-shadow);
}

.content-cats-small .subcategories-image {
    height: 130px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
}

.content-cats-small .subcategories-image img {
    max-height: 130px;
    width: auto;
    object-fit: contain;
}

.content-cats-small .caption a {
    font-size: 15px;
    font-weight: 600;
    color: var(--hwg-ink);
    text-decoration: none;
}

.content-cats-small .caption a:hover { color: var(--hwg-green-700); }
.content-cats-small .item_desc { margin: 6px 0 0; line-height: 1.45; }
.content-cats-small .sub-categories hr,
.content-cats-small .sub-categories ul { display: none !important; }

@media (max-width: 767.98px) {
    /* Mobil ohne Bilder: kompakte Liste als Knoepfe */
    .content-cats-small > .col { margin-bottom: 8px; }
    .content-cats-small .sub-categories { padding: 12px 14px; }
}

/* Preisspanne: "EUR" als dezenter Zusatz im Feld statt grauer Kasten */
.price-range-inputs .input-group {
    border: 1px solid var(--hwg-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    flex-wrap: nowrap;
}

.price-range-inputs .form-control {
    border: 0;
    box-shadow: none;
    min-width: 0;
}

.price-range-inputs .input-group-prepend,
.price-range-inputs .input-group-text {
    border: 0;
    background: transparent;
    color: var(--hwg-ink-3);
    font-size: 12px;
    padding-left: 4px;
    padding-right: 10px;
}

/* Filter "Weee-Reg-Nr" (Merkmal 141) ausblenden - eine Registriernummer ist
   kein sinnvolles Filterkriterium. Dauerhafte Loesung: in der Wawi beim
   Merkmal "Weee-Reg-Nr" die Filter-Option abschalten. */
.box-filter-characteristics[id$="-141"] { display: none !important; }
/* Footer aufgeraeumt ========================================================
   Oben 4 Spalten (Informationen | Gesetzliches | Versand | Zahlung),
   darunter eine Leiste mit Partner-Siegeln und "Vertrag widerrufen",
   ganz unten der MwSt.-Hinweis. Alle Inhalte kommen weiter aus den
   Footer-Boxen im Admin - nur die Anordnung ist neu. */
#footer { padding-top: 56px; }

#footer .box-normal-hr { display: none; }

#footer #footer-boxes .nav-link {
    padding: 5px 0;
    font-size: 13.5px;
    line-height: 1.45;
}

/* Versand- und Zahlungslogos: einheitlich kleine weisse Kacheln */
/* Versand- und Zahlungslogos im festen 3er-Raster (3 + 3 statt 4 + 2) */
#footer .box-custom .box-content-wrapper p {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 8px;
    margin: 0 0 8px;
}

/* !important: die Versand-Logos haben feste Groessen direkt im HTML der Box */
#footer .box-custom .box-content-wrapper img {
    height: 38px !important;
    width: auto !important;
    max-width: 76px;
    object-fit: contain;
    margin: 0;
    padding: 0;
    border-radius: 8px;
}

@media (min-width: 992px) {
    #footer #footer-boxes {
        display: grid;
        grid-template-columns: 1.1fr 1.1fr 1fr 1fr;
        column-gap: 40px;
        margin: 0;
    }

    #footer #footer-boxes > .col {
        max-width: none;
        flex: none;
        width: auto;
        padding: 0;
    }

    /* "Unsere Partner" als Leiste unter den vier Spalten */
    #footer #footer-boxes > .col:nth-child(5) {
        grid-column: 1 / -1;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    #footer #footer-boxes > .col:nth-child(5) .box-content-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }

    #footer #footer-boxes > .col:nth-child(5) .box-content-wrapper p { display: flex; margin: 0; align-items: center; gap: 16px; }

    #footer #footer-boxes > .col:nth-child(5) img {
        height: 52px !important;
        max-width: 160px;
        border-radius: 6px;
    }

    #footer #footer-boxes > .col:nth-child(5) .productlist-filter-headline {
        margin-bottom: 12px;
    }

    /* "Vertrag widerrufen" rechts neben den Partnern, auf gleicher Hoehe */
    #footer .withdrawal-link-wrapper {
        justify-content: flex-end;
        margin: -78px 0 0;
    }

    #footer .withdrawal-link-wrapper > .col {
        max-width: 260px;
        flex: 0 0 260px;
    }
}

#footer .withdrawal-link {
    border-radius: 999px;
    font-weight: 700;
}

#footer .footnote-vat {
    margin-top: 32px;
    padding: 18px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px;
}
/* Mini-Warenkorb (Klick auf Warenkorb im Kopf) */
#cart-dropdown-container {
    min-width: 360px;
    margin-top: 10px;
    padding: 6px 4px 4px;
    border: 1px solid var(--hwg-line);
    border-radius: 16px;
    box-shadow: var(--hwg-shadow-lg);
    overflow: hidden;
}

#cart-dropdown-container .dropdown-body { padding: 14px 18px 16px; }
#cart-dropdown-container .dropdown-cart-items td { border-color: var(--hwg-line-2); font-size: 13.5px; }
#cart-dropdown-container .dropdown-cart-items a { color: var(--hwg-ink); }
#cart-dropdown-container .cart-dropdown-buttons .btn { border-radius: 999px; font-size: 14px; padding: 8px 12px; }
#cart-dropdown-container .cart-dropdown-shipping-notice { color: var(--hwg-ink-3); }
#cart-dropdown-container .cart-dropdown-shipping-notice .fa-truck { color: var(--hwg-green-700) !important; }

/* Leerer Warenkorb: eigene kleine Karte statt Kaestchen ueber der Navigation */
#cart-dropdown-container:not(:has(table)) {
    min-width: 300px;
    padding: 18px 20px;
    font-size: 14px;
    color: var(--hwg-ink-2);
}

/* Fenster "Artikel wurde in den Warenkorb gelegt" */
.modal-dialog.modal-xl:has(#pushed-success) { max-width: 760px; }

.modal-content:has(#pushed-success) {
    border: 0;
    border-radius: 20px;
    box-shadow: var(--hwg-shadow-lg);
}

/* Schliessen-Knopf ins Fenster holen (NOVA setzt ihn halb ausserhalb) */
.modal-content:has(#pushed-success) .close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hwg-stone);
    opacity: 1;
}

.modal-content:has(#pushed-success) .modal-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--hwg-line-2);
}

.modal-content:has(#pushed-success) .modal-title {
    font-family: var(--hwg-font-head);
    font-stretch: 85%;
    font-weight: 800;
    font-size: 22px;
    color: var(--hwg-ink);
}

#pushed-success { font-size: 14px; }
#pushed-success img { max-height: 220px; width: auto; object-fit: contain; }
#pushed-success .btn { border-radius: 999px; font-weight: 600; }
/* Konto-Menue (Login-Formular) - gleicher Stil wie der Mini-Warenkorb,
   einheitlich weisser Grund (keine grauen Teilflaechen) */
#shop-nav .account-icon-dropdown > .dropdown-menu {
    min-width: 340px;
    margin-top: 10px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--hwg-line);
    border-radius: 16px;
    box-shadow: var(--hwg-shadow-lg);
    overflow: hidden;
}

#shop-nav .account-icon-dropdown .dropdown-body,
#shop-nav .account-icon-dropdown .dropdown-footer,
#shop-nav .account-icon-dropdown fieldset {
    background: #fff;
    border: 0;
}

#shop-nav .account-icon-dropdown .dropdown-body { padding: 18px 20px 6px; }
#shop-nav .account-icon-dropdown .dropdown-footer { padding: 6px 20px 18px; border-top: 1px solid var(--hwg-line-2); }
#shop-nav .account-icon-dropdown legend { font-size: 15px; font-weight: 600; color: var(--hwg-ink); }
#shop-nav .account-icon-dropdown .btn { border-radius: 999px; }
#shop-nav .account-icon-dropdown .dropdown-item { border-radius: 8px; }

/* Wunschliste-Menue im selben Stil */
#shop-nav #shop-nav-wish > .dropdown-menu {
    margin-top: 10px;
    border: 1px solid var(--hwg-line);
    border-radius: 16px;
    box-shadow: var(--hwg-shadow-lg);
    overflow: hidden;
}
/* Hersteller-Seite: kein Herstellerlogo ueber dem Text (gewuenscht) */
img.productlist-header-description-image[src*="/manufacturer/"] { display: none; }