/*!
 * SGS 4x4 – Artikellisten (Kategorien, Suche, Hersteller) · Paket Artikelliste 1.0.0 · 08.10.2026 · Child-Template SGS2026
 * Gestaltung nach Prototyp 73: Filterspalte als graue Karten, Werkzeugleiste (Anzahl + Sortierung), Artikelkacheln mit
 * grauem Bildfeld, Merkzettel-Herz oben rechts, Name, Preis, gelber Warenkorb-Button.
 * Nur Optik – Filter, Sortierung, Warenkorb, Merkzettel und Plugins bleiben JTL/NOVA.
 * Alle Regeln sind auf #content-wrapper.is-item-list begrenzt (Artikellisten). Geladen in layout/header.tpl.
 * !important nur dort, wo das Theme (custom.css) selbst !important setzt (Buttons: Radius, Farben).
 */
#content-wrapper.is-item-list {
    --sgl-ink: #161718;
    --sgl-ink2: #3c3f42;
    --sgl-grey: #62666a;
    --sgl-g4: #eff0ee;
    --sgl-line: rgba(0, 0, 0, .06);
    --sgl-yel: #efc03d;
    --sgl-yel2: #e0ad22;
    --sgl-r: var(--sgs-r, 10px);
    --sgl-r-md: var(--sgs-r-md, 8px);
    --sgl-r-sm: var(--sgs-r-sm, 6px);
    --sgl-fh: Poppins, "Helvetica Neue", Arial, sans-serif;
    --sgl-ft: Raleway, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ Überschrift „Artikel: …“ (sgs_site/cat_top.tpl) */
.sgs-pl-head { margin: clamp(28px, 4vw, 48px) 0 clamp(16px, 2vw, 24px); padding: 0; }   /* bündig mit Filterspalte und Liste */
.sgs-pl-head h2 { margin: 0; font: 600 clamp(24px, 2.6vw, 36px)/1.1 var(--sgs-f-head, Poppins, Arial, sans-serif); letter-spacing: -.02em; color: #161718; }

/* ------------------------------------------------------------------ Filterspalte */
#content-wrapper.is-item-list #sidepanel_left .box:not(.box-wishlist):not(.box-compare) {
    margin: 0 0 8px; padding: 14px 16px; border: 0; border-radius: var(--sgl-r-md); background: var(--sgl-g4); box-shadow: none;
}
#content-wrapper.is-item-list #sidepanel_left .productlist-filter-headline,
#content-wrapper.is-item-list #sidepanel_left .btn-filter-box {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    margin: 0 0 8px; padding: 0; border: 0; background: none; box-shadow: none;
    font: 600 14px/1.3 var(--sgl-fh); letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--sgl-ink);
}
#content-wrapper.is-item-list #sidepanel_left .btn-filter-box:hover { color: var(--sgl-ink); text-decoration: none; }
#content-wrapper.is-item-list #sidepanel_left .btn-filter-box::after { opacity: .5; }
#content-wrapper.is-item-list #sidepanel_left .productlist-filter-headline { padding-bottom: 6px; border-bottom: 0; }

/* Filterwerte und Kategorien: ruhige Liste, Anzahl rechts, aktiver Eintrag dunkel */
#content-wrapper.is-item-list #sidepanel_left .filter-item,
#content-wrapper.is-item-list #sidepanel_left .box-categories .nav-link {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: var(--sgl-r-xs, 4px);
    font: 500 13.5px/1.35 var(--sgl-ft); color: var(--sgl-ink); text-decoration: none; transition: background-color .15s ease;
}
#content-wrapper.is-item-list #sidepanel_left .filter-item:hover,
#content-wrapper.is-item-list #sidepanel_left .box-categories .nav-link:hover { background: #fff; color: var(--sgl-ink); text-decoration: none; }
#content-wrapper.is-item-list #sidepanel_left .filter-item .box-link-wrapper { display: flex; align-items: center; gap: 10px; width: 100%; }
#content-wrapper.is-item-list #sidepanel_left .filter-item .badge,
#content-wrapper.is-item-list #sidepanel_left .filter-item .filter-item-count { margin-left: auto; padding: 0; background: none; font: 500 11.5px var(--sgl-ft); color: var(--sgl-grey); }
#content-wrapper.is-item-list #sidepanel_left .filter-item .snippets-filter-item-icon-right { font-size: 14px; color: #9a9ea2; }
#content-wrapper.is-item-list #sidepanel_left .filter-item.active,
#content-wrapper.is-item-list #sidepanel_left .box-categories .nav-item.active > .nav-link,
#content-wrapper.is-item-list #sidepanel_left .box-categories .nav-link.active { background: var(--sgl-ink); color: #fff; }
#content-wrapper.is-item-list #sidepanel_left .filter-item.active .snippets-filter-item-icon-right,
#content-wrapper.is-item-list #sidepanel_left .filter-item.active .badge { color: #c9cbcd; }
#content-wrapper.is-item-list #sidepanel_left .box-categories .nav-link a { color: inherit; text-decoration: none; }
#content-wrapper.is-item-list #sidepanel_left .filter-search-wrapper { display: grid; gap: 2px; }

/* Preis: Eingabefelder wie im Prototyp */
#content-wrapper.is-item-list #sidepanel_left .price-range-inputs .input-group-text { border: 0; background: none; font: 500 12px var(--sgl-ft); color: var(--sgl-grey); }
#content-wrapper.is-item-list #sidepanel_left .price-range-inputs .form-control,
#content-wrapper.is-item-list #sidepanel_left .filter-search-wrapper input[type="text"],
#content-wrapper.is-item-list #sidepanel_left .filter-search-wrapper input[type="search"] {
    min-height: 38px; border: 0; border-radius: var(--sgl-r-sm) !important; background: #fff; font: 500 13.5px var(--sgl-ft); color: var(--sgl-ink); box-shadow: none;
}

/* ------------------------------------------------------------------ Werkzeugleiste über der Liste */
#content-wrapper.is-item-list #result-wrapper > hr.productlist-page-nav-top,
#content-wrapper.is-item-list #result-wrapper > hr.productlist-page-nav-bottom { display: none; }
#content-wrapper.is-item-list .productlist-page-nav { align-items: center; margin-bottom: 16px; font: 500 14px var(--sgl-ft); color: var(--sgl-ink); }
#content-wrapper.is-item-list .productlist-page-nav .displayoptions { border: 0; }
#content-wrapper.is-item-list .productlist-page-nav .productlist-item-border { border: 0; }
/* Oben wie im Prototyp: links „Artikel 1–60 von 1.943“, rechts Sortierung; Seitenzahlen nur unter der Liste */
@media (min-width: 992px) {
    #content-wrapper.is-item-list .productlist-page-nav-header-m { display: flex; flex-wrap: nowrap; justify-content: space-between; }
    #content-wrapper.is-item-list .productlist-page-nav-header-m > .productlist-item-info { order: 1; flex: 1 1 auto; max-width: none; padding-left: 0; }
    #content-wrapper.is-item-list .productlist-page-nav-header-m > .displayoptions { order: 2; flex: 0 0 auto; width: auto; max-width: none; display: flex; justify-content: flex-end; gap: 8px; padding-right: 0; }
    #content-wrapper.is-item-list .productlist-page-nav-header-m > .productlist-pagination { display: none; }
    #content-wrapper.is-item-list .productlist-page-nav-header-m .filter-type-FilterItemLimits,
    #content-wrapper.is-item-list .productlist-page-nav-header-m .displayoptions > .btn-group:not(.dropdown) { display: none; }   /* „Artikel pro Seite“ und Ansichtswahl wie im Prototyp ausgeblendet */
}
#content-wrapper.is-item-list .productlist-page-nav .btn-outline-secondary {
    border: 0; border-radius: var(--sgl-r-md) !important; background: var(--sgl-g4); color: var(--sgl-ink) !important;
    padding: 9px 16px; font: 500 13px var(--sgl-ft); box-shadow: none; clip-path: none !important;
}
#content-wrapper.is-item-list .productlist-page-nav .btn-outline-secondary:hover,
#content-wrapper.is-item-list .productlist-page-nav .show > .btn-outline-secondary { background: #e3e5e2; color: var(--sgl-ink) !important; }
#content-wrapper.is-item-list .productlist-page-nav .dropdown-menu { border: 0; border-radius: var(--sgl-r); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05); padding: 6px; }
#content-wrapper.is-item-list .productlist-page-nav .dropdown-item { border-radius: var(--sgl-r-sm); font: 500 13.5px var(--sgl-ft); padding: 8px 12px; }
#content-wrapper.is-item-list .productlist-page-nav .dropdown-item.active { background: var(--sgl-ink); color: #fff; }
#content-wrapper.is-item-list .productlist-page-nav .pagination .page-link { border: 0; border-radius: var(--sgl-r-sm) !important; color: var(--sgl-ink); font: 600 13px var(--sgl-fh); }
#content-wrapper.is-item-list .productlist-page-nav .pagination .active .page-link { background: var(--sgl-ink); color: #fff; }

/* ------------------------------------------------------------------ Artikelkacheln */
#content-wrapper.is-item-list #product-list { row-gap: 26px; }
#content-wrapper.is-item-list .product-wrapper .productbox {
    position: relative; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
#content-wrapper.is-item-list .product-wrapper .productbox:hover,
#content-wrapper.is-item-list .product-wrapper .productbox.productbox-hover:hover { box-shadow: none; transform: none; }
#content-wrapper.is-item-list .product-wrapper .productbox-inner { height: 100%; padding: 0; border: 0; background: transparent; }
#content-wrapper.is-item-list .product-wrapper .productbox-inner > .row { height: 100%; align-content: flex-start; }
/* Bildfeld: grau, rund, Bild „auf dem Grund“ */
/* Grau nur auf dem äußeren Bildrahmen – nicht auf den beiden Bild-Ebenen (2. Ebene = Hover-Bild, liegt darüber) */
#content-wrapper.is-item-list .product-wrapper .productbox-images { border-radius: var(--sgl-r-sm); background: var(--sgl-g4); overflow: hidden; }
#content-wrapper.is-item-list .product-wrapper .productbox-image.square { background: transparent; }
#content-wrapper.is-item-list .product-wrapper .productbox-image.square .inner { padding: 14px; }
#content-wrapper.is-item-list .product-wrapper .productbox-image img {
    position: static; left: auto; top: auto; transform: none;   /* Theme zentriert per translate – hier zentriert .inner */
    width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
#content-wrapper.is-item-list .product-wrapper .productbox-image .inner { display: flex; align-items: center; justify-content: center; }
#content-wrapper.is-item-list .product-wrapper .productbox:hover .productbox-image .first-wrapper img { transform: scale(1.03); }
/* Merkzettel-Herz: immer sichtbar, weißer Kreis oben rechts */
#content-wrapper.is-item-list .product-wrapper .productbox-quick-actions {
    position: absolute; top: 10px; right: 10px; z-index: 3; display: flex !important; opacity: 1; visibility: visible; transform: none;
}
#content-wrapper.is-item-list .product-wrapper .productbox-quick-actions .btn.wishlist {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50% !important;
    background: #fff !important; color: var(--sgl-ink) !important; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); clip-path: none !important;
}
#content-wrapper.is-item-list .product-wrapper .productbox-quick-actions .btn.wishlist:hover,
#content-wrapper.is-item-list .product-wrapper .productbox-quick-actions .btn.wishlist.on { background: var(--sgl-yel) !important; }
#content-wrapper.is-item-list .product-wrapper .productbox-quick-actions .btn.wishlist .fa-heart { font-size: 14px; }
/* Name, Preis */
#content-wrapper.is-item-list .product-wrapper .productbox-title { margin: 12px 2px 6px; min-height: 2.8em; }
#content-wrapper.is-item-list .product-wrapper .productbox-title a {
    font: 500 14px/1.4 var(--sgl-ft); color: var(--sgl-ink); text-decoration: none;
}
#content-wrapper.is-item-list .product-wrapper .productbox-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
#content-wrapper.is-item-list .product-wrapper .price_wrapper { margin: 0 2px 10px; }
#content-wrapper.is-item-list .product-wrapper .productbox-price { font: 600 17px/1.2 var(--sgl-fh); color: var(--sgl-ink); }
#content-wrapper.is-item-list .product-wrapper .price-note { font: 500 11px/1.4 var(--sgl-ft); color: var(--sgl-grey); }
#content-wrapper.is-item-list .product-wrapper .ga--artikelnr-plisting { display: none; }   /* Prototyp: ohne Artikelnummer */
/* Warenkorb-Button */
#content-wrapper.is-item-list .product-wrapper .basket-details-add-to-cart,
#content-wrapper.is-item-list .product-wrapper .productbox .btn-primary {
    min-height: 46px; padding: 10px 18px; border: 0; border-radius: var(--sgl-r-md) !important; clip-path: none !important;
    background: var(--sgl-yel) !important; color: var(--sgl-ink) !important; font: 700 14px/1.2 var(--sgl-ft); text-transform: none; letter-spacing: 0;
    box-shadow: none; transition: background-color .2s ease;
}
#content-wrapper.is-item-list .product-wrapper .basket-details-add-to-cart:hover,
#content-wrapper.is-item-list .product-wrapper .productbox .btn-primary:hover { background: var(--sgl-yel2) !important; }
#content-wrapper.is-item-list .product-wrapper .productbox br { display: none; }

@media (max-width: 575.98px) {
    #content-wrapper.is-item-list #product-list { row-gap: 22px; }
    #content-wrapper.is-item-list .product-wrapper .productbox-title a { font-size: 13.5px; }
    #content-wrapper.is-item-list .product-wrapper .basket-details-add-to-cart { min-height: 42px; font-size: 13px; padding-inline: 10px; }
}