/*
 Theme Name:   Ignavo Child
 Theme URI:    http://klbtheme.com/ignavo/
 Description:  Ignavo Child Theme
 Author:       KlbTheme
 Author URI:   http://themeforest.net/user/KlbTheme
 Template:     ignavo
 Version:      1.2.5
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  ignavo-child
*/

/* ==========================================================================
   PERFEKTES FULL-WIDTH REIFENSUCHE-MODAL (1:1 HOMEPAGE STYLE)
   ========================================================================== */

/* 1. Modal-Backdrop: Absolut zentriert auf dem gesamten Viewport */
.site-popup.garage-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.site-popup.garage-popup.active {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Verhindert, dass Hintergrund-Slider-Pfeile durch Popups/Drawers stechen */
body.action-enable .swiper-button-prev,
body.action-enable .swiper-button-next,
body.action-enable .slick-prev,
body.action-enable .slick-next,
body.action-enable .owl-prev,
body.action-enable .owl-next,
body.action-enable .site-slider-button,
body.action-enable div[class*="swiper-button"],
body.action-enable button[class*="swiper-button"],
body.action-enable a[class*="swiper-button"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. Weicher Blur-Hintergrund (Overlay) */
.site-popup.garage-popup .site-popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.site-popup.garage-popup.active .site-popup-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Modal-Fenster: 980px Breite, 100% zentriert, elegante Schatten */
.site-popup.garage-popup .popup-inner {
    position: relative !important;
    z-index: 2 !important;
    margin: auto !important;
    width: 100% !important;
    max-width: 980px !important;
    max-height: 90vh !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 1px 1px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-sizing: border-box !important;
}

.site-popup.garage-popup.active .popup-inner {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* 4. Schließen-Button oben rechts im Header verankert */
.site-popup.garage-popup .popup-inner .site-close,
.site-popup.garage-popup .site-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    inset-inline-end: 18px !important;
    inset-inline-start: auto !important;
    z-index: 9999 !important;
    margin: 0 !important;
}

.site-popup.garage-popup .site-close-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.site-popup.garage-popup .site-close-button:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: rotate(90deg) !important;
}

/* 5. Volle Breite für das Formular (überschreibt die 440px Begrenzung des Themes!) */
.site-popup.garage-popup .site-garage-form,
.site-popup.garage-popup .garage-form,
.site-popup.garage-popup .ignavo-tire-search-modal,
.site-popup.garage-popup .popup-inner > *.site-garage-form,
.site-popup.garage-popup .popup-inner > * {
    --garage-form-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    align-items: stretch !important;
    text-align: left !important;
}

/* 6. Modal Header: Kompakt & Zentriert */
.site-popup.garage-popup .garage-form-header {
    padding: 24px 32px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.site-popup.garage-popup .garage-header-icon-centered {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    margin-bottom: 8px !important;
}

.site-popup.garage-popup .garage-header-icon-centered img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

.site-popup.garage-popup .garage-form-header .entry-title {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
}

.site-popup.garage-popup .garage-form-header p {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin: 0 auto !important;
    max-width: 620px !important;
    line-height: 1.4 !important;
}

/* 7. Scrollbarer Body */
.site-popup.garage-popup .garage-modal-scrollable {
    padding: 18px 24px 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-grow: 1 !important;
    max-height: calc(90vh - 120px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.site-popup.garage-popup .garage-modal-scrollable::-webkit-scrollbar {
    width: 6px;
}
.site-popup.garage-popup .garage-modal-scrollable::-webkit-scrollbar-track {
    background: #f8fafc;
}
.site-popup.garage-popup .garage-modal-scrollable::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* 8. OBERE KARTE: 1:1 HOMEPAGE STYLE */
.site-popup.garage-popup .garage-card-homepage {
    width: 100% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* 8. OBERE KARTE & HOMEPAGE: 1:1 HOMEPAGE STYLE HORIZONTAL */
.garage-form.horizontal,
.site-popup.garage-popup .garage-form.horizontal {
    --garage-form-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.garage-form.horizontal .form-garage {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 12px 10px !important;
    box-sizing: border-box !important;
}

/* Auf Desktop (> 768px):
   Zeile 1: Die 3 Reifendimensionen (Breite, Querschnitt, Durchmesser) teilen sich genau 100%
   Zeile 2: Reifenmarke + Suchen-Button zusammen in einer gemeinsamen Zeile! */
@media screen and (min-width: 768.02px) {
    /* 1. Zeile: Breite, Querschnitt, Durchmesser */
    .garage-form.horizontal .form-garage > .form-group:nth-of-type(1),
    .garage-form.horizontal .form-garage > .form-group:nth-of-type(2),
    .garage-form.horizontal .form-garage > .form-group:nth-of-type(3),
    .garage-form.horizontal .form-garage > .form-group.form-group-tire_width,
    .garage-form.horizontal .form-garage > .form-group.form-group-tire_ratio,
    .garage-form.horizontal .form-garage > .form-group.form-group-tire_diameter,
    .garage-form.horizontal .form-garage > .form-group:has([data-taxonomy*="width"]),
    .garage-form.horizontal .form-garage > .form-group:has([data-taxonomy*="ratio"]),
    .garage-form.horizontal .form-garage > .form-group:has([data-taxonomy*="diameter"]) {
        flex: 1 1 calc((100% - 20px) / 3) !important;
        width: calc((100% - 20px) / 3) !important;
        max-width: calc((100% - 20px) / 3) !important;
        min-width: 140px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* 2. Zeile: Reifenmarke (Dropdown) */
    .garage-form.horizontal .form-garage > .form-group:nth-of-type(4),
    .garage-form.horizontal .form-garage > .form-group.form-group-tire_brand,
    .garage-form.horizontal .form-garage > .form-group:has([data-taxonomy*="brand"]) {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 200px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* 2. Zeile: "Suche speichern" Button (Kurzwahl) */
    .garage-form.horizontal .form-garage .btn-save-tire-size {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 140px !important;
        height: 46px !important;
        padding-inline: 1.15rem !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #1e293b !important;
        border: 1.5px solid #cbd5e1 !important;
        cursor: pointer !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    .garage-form.horizontal .form-garage .btn-save-tire-size:hover {
        background: #f1f5f9 !important;
        border-color: #0284c7 !important;
        color: #0284c7 !important;
        transform: translateY(-1px) !important;
    }

    /* 2. Zeile: Suchen-Button in derselben Zeile wie Reifenmarke! */
    .garage-form.horizontal .form-garage button[type="submit"] {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 150px !important;
        height: 46px !important;
        padding-inline: 1.75rem !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
        background: #0284c7 !important;
        color: #ffffff !important;
        border: none !important;
        cursor: pointer !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    .garage-form.horizontal .form-garage button[type="submit"]:hover {
        background: #0369a1 !important;
    }
}

/* Auf mobilen Geräten (<= 768px): Alle Formular-Felder sauber untereinander */
@media screen and (max-width: 768px) {
    .garage-form.horizontal .form-garage {
        gap: 10px !important;
    }
    .garage-form.horizontal .form-garage > .form-group,
    .garage-form.horizontal .form-garage button,
    .garage-form.horizontal .form-garage button[type="submit"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   MODERNE LADE-ANIMATION FÜR REIFENSUCHE (HOMESCREEN & MY GARAGE MODAL)
   Ersetzt das standardmäßige rote Einfärben durch einen flüssigen Spinner
   ========================================================================== */

@keyframes ignavo-filter-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes ignavo-pulse-scale {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* Sicherstellen, dass das Formular als relativer Container dient */
.form-garage,
.garage-form .form-garage,
.site-popup.garage-popup .form-garage,
form#klb-attribute-filter {
    position: relative !important;
}

/* Der Loader-Overlay-Container */
.attribute-filter-loader,
.garage-form.horizontal .form-garage > .attribute-filter-loader,
.site-popup.garage-popup .form-garage > .attribute-filter-loader,
.service-search-modal .attribute-filter-loader {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 50px !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    border-radius: 10px !important;
    z-index: 100 !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    cursor: wait !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: opacity 0.2s ease !important;
}

/* Weißer runder Hintergrund-Pill im Zentrum */
.attribute-filter-loader::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    border: 1.5px solid #e2e8f0 !important;
    z-index: 101 !important;
    animation: ignavo-pulse-scale 2s ease-in-out infinite !important;
}

/* Flüssig rotierender blauer Spinner */
.attribute-filter-loader::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 2.5px solid #e2e8f0 !important;
    border-top-color: #0284c7 !important;
    border-right-color: #0284c7 !important;
    animation: ignavo-filter-spin 0.75s linear infinite !important;
    z-index: 102 !important;
    box-sizing: border-box !important;
}

/* Select2 Container & Dropdown Styling (Garantiert auf oberster Ebene!) */
.select2-container--open {
    z-index: 999999999 !important;
}

.select2-dropdown {
    z-index: 999999999 !important;
    border: 1.5px solid #0284c7 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

.select2-container .select2-results__option {
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

.select2-container .select2-results__option[aria-selected="true"] {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    font-weight: 700 !important;
}

/* 9. UNTERE KARTE: GÄNGIGE REIFENGRÖSSEN IM 5-SPALTEN GRID */
.site-popup.garage-popup .garage-card-full {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.site-popup.garage-popup .ignavo-quick-tire-sizes-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}

.site-popup.garage-popup .ignavo-quick-sizes-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    margin: 0 0 10px 0 !important;
}

.site-popup.garage-popup .ignavo-quick-sizes-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .site-popup.garage-popup .ignavo-quick-sizes-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 550px) {
    .site-popup.garage-popup .ignavo-quick-sizes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.site-popup.garage-popup .ignavo-quick-size-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.site-popup.garage-popup .ignavo-quick-size-badge:hover {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(2, 132, 199, 0.25) !important;
}

.site-popup.garage-popup .ignavo-quick-size-badge:hover .size-tag {
    background: #ffffff !important;
    color: #0284c7 !important;
}

.site-popup.garage-popup .ignavo-quick-size-badge .size-label {
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
}

.site-popup.garage-popup .ignavo-quick-size-badge .size-tag {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

/* 10. GESPEICHERTE REIFENGRÖSSEN ALS HORIZONTALE CHIPS */
.site-popup.garage-popup .garage-saved-sizes-block {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #cbd5e1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.site-popup.garage-popup .garage-saved-title-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    margin-right: 4px !important;
}

.site-popup.garage-popup .klbgr-list {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    width: auto !important;
}

.site-popup.garage-popup .klbgr-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 34px 6px 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-left: 3px solid #0284c7 !important;
    border-radius: 6px !important;
    position: relative !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    transition: background 0.15s ease !important;
}

.site-popup.garage-popup .klbgr-item:hover {
    background: #f1f5f9 !important;
}

.site-popup.garage-popup .klbgr-item .vehicle-title {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding-right: 4px !important;
}

.site-popup.garage-popup .klbgr-item--remove {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    transition: color 0.15s ease !important;
}

.site-popup.garage-popup .klbgr-item--remove:hover {
    color: #ef4444 !important;
}

/* Toast-Benachrichtigung für Kurzwahl */
.klbgr-save-toast {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 8px 0 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.klbgr-save-toast.success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1.5px solid #a7f3d0 !important;
}

.klbgr-save-toast.warning,
.klbgr-save-toast.error {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border: 1.5px solid #fecdd3 !important;
}

.site-popup.garage-popup .klbgr-item .icon img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
}

.site-popup.garage-popup .garage-all-saved-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0284c7 !important;
    text-decoration: underline !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}

.site-popup.garage-popup .garage-all-saved-link:hover {
    color: #0369a1 !important;
}

/* 11. SIDEBAR & MENU DRAWERS (Mobile-Menü & Sidebar-Navigation) */
.site-drawer.drawer {
    z-index: 99999999 !important;
}

.site-drawer.drawer .site-drawer-inner {
    z-index: 2 !important;
}

.site-drawer.drawer .site-drawer-overlay {
    z-index: 1 !important;
}

.site-drawer.drawer.active .site-drawer-inner {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.site-drawer.drawer.active .site-drawer-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.drawer-primary-menu .sidebar-nav-menu {
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

/* 12. BASIERENDE FOOTER-FARBEN (Verhindert Weiß-Darstellung außerhalb des Customizers) */
.site-footer .site-footer-row.footer-widgets,
.site-footer .site-footer-row.footer-info,
.site-footer .site-footer-row.footer-copyright {
    background-color: var(--footer-row-background, #0f172a);
}

.site-footer .footer-widgets .widget .widget-title,
.site-footer .footer-widgets .site-contact a,
.site-footer .footer-copyright .site-copyright {
    color: var(--footer-row-foreground, #ffffff);
}

/* ==========================================================================
   13. SYMMETRISCHES PRODUKT-GRID FÜR /SHOP & PRODUKT-BOXEN
   Garantiert exakt gleiche Höhen für Bilder, Titel, Preise & Buttons
   ========================================================================== */

/* 1. Grid- und Spaltenausrichtung (Natives Theme-Grid beibehalten! Ausgeschlossen: Mini-Cart) */
.products.grid:not(.mini-cart-products) {
    align-items: stretch !important;
}

ul.products:not(.grid):not(.mini-cart-products) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 30px 20px !important;
    align-items: stretch !important;
}

.site-main .products .product, .shop-content .products .product,
ul.products:not(.mini-cart-products) .product,
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Produkt-Karte füllt immer 100% der Spaltenhöhe */
.site-main .products .product .product-inner,
.product .product-inner.product-default,
.product-inner.product-type-1 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* 3. BILD-CONTAINER: Einziger 1:1 Quadrat-Rahmen auf .product-thumbnail (klb-product-thumbnail Rahmen deaktiviert!) */
.site-main .products .product .product-thumbnail,
.product-inner .product-thumbnail {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Exakt quadratisch für alle Karten */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important; /* Dezenter heller Untergrund für Reifen-PNGs & Placeholder */
    border: 1px solid #e2e8f0 !important; /* Der EINZIGE sichtbare Rahmen */
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Inneren Rahmen auf .product-media / .klb-product-thumbnail & <a> komplett deaktivieren! */
.site-main .products .product .product-thumbnail .product-media,
.products .product .product-thumbnail .product-media a,
.product-inner .product-thumbnail .product-media,
.product-inner .product-thumbnail .product-media a,
.product-inner .product-thumbnail .klb-product-thumbnail,
.product-thumbnail .klb-product-thumbnail {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Bilder & Placeholder gleichmäßig einpassen (object-fit: contain) */
.site-main .products .product .product-thumbnail .product-media img,
.products .product .product-thumbnail .product-media a img,
.products .product .product-thumbnail img,
.product-inner .product-thumbnail img,
.woocommerce-placeholder {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Verhindert Verzerrung, zentriert jeden Reifen perfekt */
    padding: 12px !important;
    box-sizing: border-box !important;
    display: block !important;
    border: none !important;
}

/* 4. PRODUKT-BODY: Flex-Spalte mit vertikaler Verteilung */
.site-main .products .product .product-body,
.product-inner .product-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 5. PRODUKT-TITEL: Feste 2-Zeilen-Höhe & einheitliche Typografie */
.site-main .products .product .product-header,
.product-inner .product-header {
    margin-bottom: 8px !important;
}

.site-main .products .product .product-title,
.product-inner .product-title {
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    min-height: calc(14.5px * 1.4 * 2) !important; /* Genau 40.6px für exakt 2 Zeilen */
    max-height: calc(14.5px * 1.4 * 2) !important;
    margin: 0 0 8px 0 !important;
    overflow: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
}

.site-main .products .product .product-title a,
.product-inner .product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    max-height: calc(14.5px * 1.4 * 2) !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.products .product .product-title a:hover,
.product-inner .product-title a:hover {
    color: #0284c7 !important;
}

/* 6. PREIS-BEREICH: Feste Baseline */
.site-main .products .product .product-cart,
.product-inner .product-cart {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.site-main .products .product .product-price-wrapper,
.product-inner .product-price-wrapper {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.site-main .products .product .price,
.product-inner .price {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #0f172a !important;
}

/* 7. ATTRIBUTE (MARKE, GEWICHT etc.): Einheitlicher Abstand */
.site-main .products .product .klb-product-brands,
.products .product .klb-product-attributes,
.product-inner .klb-product-brands,
.product-inner .klb-product-attributes {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.site-main .products .product .klb-product-brands,
.product-inner .klb-product-brands {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
}

.products .product .klb-product-brands a,
.product-inner .klb-product-brands a {
    font-weight: 500 !important;
    color: #64748b !important;
    text-transform: none !important;
}

/* 8. WARENKORB-BUTTON: Fest am unteren Kartenrand verankert! */
.site-main .products .product .product-cart-button,
.product-inner .product-cart-button {
    margin-top: auto !important;
    padding-top: 14px !important;
    width: 100% !important;
}

.site-main .products .product .product-cart-button .button,
.products .product .product-cart-button a.button,
.product-inner .product-cart-button .button,
.product-inner .product-cart-button a.button {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-align: center !important;
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.products .product .product-cart-button .button:hover,
.products .product .product-cart-button a.button:hover,
.product-inner .product-cart-button .button:hover,
.product-inner .product-cart-button a.button:hover {
    background-color: #0369a1 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   14. SHOP LAYOUT & SIDEBAR FIX (CUSTOMIZER: LINKE / RECHTE SIDEBAR / FULL-WIDTH)
   ========================================================================== */

/* 1. Flex-Layout auf dem Haupt-Content-Wrapper (.site-content-wrapper) */
.woocommerce-shop .site-content-wrapper,
.woocommerce.archive .site-content-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Standard Desktop-Aufteilung (Spaltenbreiten) */
@media screen and (min-width: 1024.02px) {
    /* Linke oder rechte Sidebar aktiv */
    .woocommerce-shop .site-content-wrapper:not(.full-width) > #primary.primary-column,
    .woocommerce.archive .site-content-wrapper:not(.full-width) > #primary.primary-column {
        flex: 1 1 0% !important;
        max-width: calc(100% - 330px) !important;
        width: calc(100% - 330px) !important;
        box-sizing: border-box !important;
    }

    .woocommerce-shop .site-content-wrapper:not(.full-width) > #secondary.secondary-column,
    .woocommerce.archive .site-content-wrapper:not(.full-width) > #secondary.secondary-column {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* LINKE SEITENLEISTE (left-sidebar / reverse sidebar-left):
       Das Markup rendert #primary zuerst, dann #secondary.
       Bei left-sidebar muss #secondary links stehen (order: 1) und #primary rechts (order: 2). */
    .woocommerce-shop .site-content-wrapper.sidebar-left,
    .woocommerce.archive .site-content-wrapper.sidebar-left,
    .woocommerce-shop .site-content-wrapper.reverse.sidebar-left,
    .woocommerce.archive .site-content-wrapper.reverse.sidebar-left {
        flex-direction: row !important;
    }

    .woocommerce-shop .site-content-wrapper.sidebar-left > #secondary,
    .woocommerce.archive .site-content-wrapper.sidebar-left > #secondary,
    .woocommerce-shop .site-content-wrapper.reverse.sidebar-left > #secondary,
    .woocommerce.archive .site-content-wrapper.reverse.sidebar-left > #secondary {
        order: 1 !important;
    }

    .woocommerce-shop .site-content-wrapper.sidebar-left > #primary,
    .woocommerce.archive .site-content-wrapper.sidebar-left > #primary,
    .woocommerce-shop .site-content-wrapper.reverse.sidebar-left > #primary,
    .woocommerce.archive .site-content-wrapper.reverse.sidebar-left > #primary {
        order: 2 !important;
        padding-left: 0 !important;
    }

    /* RECHTE SEITENLEISTE (sidebar-right):
       #primary links (order: 1), #secondary rechts (order: 2) */
    .woocommerce-shop .site-content-wrapper.sidebar-right,
    .woocommerce.archive .site-content-wrapper.sidebar-right,
    .woocommerce-shop .site-content-wrapper.reverse.sidebar-right,
    .woocommerce.archive .site-content-wrapper.reverse.sidebar-right {
        flex-direction: row !important;
    }

    .woocommerce-shop .site-content-wrapper.sidebar-right > #primary,
    .woocommerce.archive .site-content-wrapper.sidebar-right > #primary,
    .woocommerce-shop .site-content-wrapper.reverse.sidebar-right > #primary,
    .woocommerce.archive .site-content-wrapper.reverse.sidebar-right > #primary {
        order: 1 !important;
        padding-right: 0 !important;
    }

    .woocommerce-shop .site-content-wrapper.sidebar-right > #secondary,
    .woocommerce.archive .site-content-wrapper.sidebar-right > #secondary,
    .woocommerce-shop .site-content-wrapper.reverse.sidebar-right > #secondary,
    .woocommerce.archive .site-content-wrapper.reverse.sidebar-right > #secondary {
        order: 2 !important;
    }

    /* VOLLE BREITE (full-width):
       #primary nimmt 100% ein, Sidebar wird ausgeblendet */
    .woocommerce-shop .site-content-wrapper.full-width > #primary,
    .woocommerce.archive .site-content-wrapper.full-width > #primary {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        order: 1 !important;
        padding: 0 !important;
    }

    .woocommerce-shop .site-content-wrapper.full-width > #secondary,
    .woocommerce.archive .site-content-wrapper.full-width > #secondary {
        display: none !important;
    }
}

/* 3. Sticky Verhalten der Sidebar */
.woocommerce-shop .site-content-wrapper .secondary-column.sticky,
.woocommerce.archive .site-content-wrapper .secondary-column.sticky {
    position: sticky !important;
    top: 24px !important;
    align-self: flex-start !important;
    height: auto !important;
}

/* 4. Sicherstellen, dass das Produkt-Grid innerhalb von #primary 100% der Spalte füllt */
.woocommerce-shop #primary.primary-column .shop-products-wrapper,
.woocommerce.archive #primary.primary-column .shop-products-wrapper {
    width: 100% !important;
}

.site-action-button.action-cart.active .site-action-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin: 0 !important;
}

/* Dropdown Container */
.site-dropdown {
    --dropdown-width: 340px !important;
    --dropdown-radius: 16px !important;
}
.site-dropdown .site-dropdown-inner {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    padding: 20px 22px !important;
    border: 1px solid #e2e8f0 !important;
}

/* 2. Mini-Cart Produktliste */
.site-mini-cart .mini-cart-products {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.site-mini-cart .mini-cart-products .product,
.site-mini-cart .mini-cart-products .mini_cart_item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
}

/* Inner Layout: 2-Spalten (Thumbnail links, Content rechts) */
.site-mini-cart .product .product-inner,
.site-mini-cart .product-mini-cart-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Thumbnail Box: 72x72px, dezenter abgerundeter Rahmen, weißer Hintergrund */
.site-mini-cart .product-thumbnail {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    padding: 4px !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.site-mini-cart .product-thumbnail .product-media,
.site-mini-cart .product-thumbnail .product-gallery,
.site-mini-cart .product-thumbnail a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-mini-cart .product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px !important;
}

/* Content rechts: Body */
.site-mini-cart .product-body,
.site-action-dropdown .site-mini-cart .product .product-body,
.site-action-dropdown .site-mini-cart .product-inner .product-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Header & Titel */
.site-mini-cart .product-header,
.site-action-dropdown .site-mini-cart .product .product-header,
.site-action-dropdown .site-mini-cart .product-inner .product-header {
    margin: 0 0 2px 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    border: none !important;
}

.site-mini-cart .product-title,
.site-action-dropdown .site-mini-cart .product .product-title,
.site-action-dropdown .site-mini-cart .product-inner .product-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 0 2px 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
}

.site-mini-cart .product-title a,
.site-action-dropdown .site-mini-cart .product .product-title a,
.site-action-dropdown .site-mini-cart .product-inner .product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #1e293b !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-mini-cart .product-title a:hover {
    color: #0067b2 !important;
}

/* Cart & Preiszeile */
.site-mini-cart .product-cart,
.site-action-dropdown .site-mini-cart .product .product-cart,
.site-action-dropdown .site-mini-cart .product-inner .product-cart {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.site-mini-cart .product-price-wrapper,
.site-action-dropdown .site-mini-cart .product .product-price-wrapper,
.site-action-dropdown .site-mini-cart .product-inner .product-price-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.site-mini-cart .product-price-wrapper .price {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
}

.site-mini-cart .product-price-wrapper .quantitysa {
    font-size: 14px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.site-mini-cart .product-price-wrapper .woocommerce-Price-amount {
    font-weight: 800 !important;
    font-size: 15px !important;
    color: #0f172a !important;
    margin-left: 2px !important;
}

/* Remove Link */
.site-mini-cart .product-price-wrapper .product-remove {
    margin-left: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.site-mini-cart .product-price-wrapper .product-remove a.remove {
    color: #f43f5e !important; /* Rose-500 Klb-Theme Style */
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: opacity 0.2s ease !important;
}

.site-mini-cart .product-price-wrapper .product-remove a.remove:hover {
    opacity: 0.8 !important;
}

.site-mini-cart .product-price-wrapper .product-remove a.remove svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
}

/* 3. Subtotal / Zwischensumme */
.site-mini-cart .woocommerce-mini-cart__total.total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: none !important;
    font-size: 14.5px !important;
    color: #0f172a !important;
}

.site-mini-cart .woocommerce-mini-cart__total.total strong {
    font-weight: 700 !important;
    color: #0f172a !important;
}

.site-mini-cart .woocommerce-mini-cart__total.total .woocommerce-Price-amount {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #0f172a !important;
}

/* 4. Action Buttons (View cart & Checkout) */
.site-mini-cart p.woocommerce-mini-cart__buttons.buttons {
    display: flex !important;
    gap: 10px !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
}

.site-mini-cart p.woocommerce-mini-cart__buttons.buttons a.button {
    flex: 1 1 0 !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

/* View cart: Blauer Primär-Button */
.site-mini-cart p.woocommerce-mini-cart__buttons.buttons a.button.wc-forward:not(.checkout) {
    background-color: #0067b2 !important;
    color: #ffffff !important;
    border: none !important;
}

.site-mini-cart p.woocommerce-mini-cart__buttons.buttons a.button.wc-forward:not(.checkout):hover {
    background-color: #005a9c !important;
}

/* Checkout: Hellgrauer Sekundär-Button */
.site-mini-cart p.woocommerce-mini-cart__buttons.buttons a.button.checkout {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    border: none !important;
}

.site-mini-cart p.woocommerce-mini-cart__buttons.buttons a.button.checkout:hover {
    background-color: #cbd5e1 !important;
}

/* 5. Free Shipping Progress Notification */
.site-mini-cart .cart-notification {
    margin-top: 18px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.site-mini-cart .cart-notification p {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #1e293b !important;
    text-align: center !important;
    margin-bottom: 8px !important;
}

.site-mini-cart .cart-notification p strong,
.site-mini-cart .cart-notification p .woocommerce-Price-amount {
    font-weight: 700 !important;
    color: #0f172a !important;
}

.site-mini-cart .cart-notification .site-progress {
    height: 4px !important;
    border-radius: 9999px !important;
    background-color: #e2e8f0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.site-mini-cart .cart-notification .site-progress span {
    display: block !important;
    height: 100% !important;
    border-radius: 9999px !important;
    background-color: #0067b2 !important;
}