/* ===== loxdeal Global Theme ===== */

/* Farben & Basis */
:root{
    --lx-green: #1a8d3c;
    --lx-green-600:#157834;
    --lx-green-50:#ecf8f0;
    --lx-text:#222;
    --lx-muted:#6c757d;
    --lx-border:#e6e6e6;
    --lx-bg:#fff;
}

html,body{
    background: var(--lx-bg);
    color: var(--lx-text);
}

/* Links */
a{ color: var(--lx-green); }
a:hover{ color: var(--lx-green-600); }

/* Navbar (du nutzt .navbar-dark.bg-dark – lassen wir so, aber optimieren) */
.navbar .navbar-brand{
    font-weight: 700;
    letter-spacing:.2px;
}
.navbar .nav-link{
    font-weight:500;
}
.navbar .nav-link:hover{
    opacity:.9;
}

/* Hauptcontainer */
.container{
    max-width: 1140px;
}

/* Karten (Produktkacheln) */
.card-product{
    border: 1px solid var(--lx-border);
    border-radius: 14px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card-product:hover{
    transform: translateY(-2px);
    border-color: #dcdcdc;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.card-product .card-img-top{
    object-fit: contain;
    background: #fff;
}

/* Buttons: Primär = loxdeal-Grün */
.btn-primary{
    background: var(--lx-green);
    border-color: var(--lx-green);
}
.btn-primary:hover,.btn-primary:focus{
    background: var(--lx-green-600);
    border-color: var(--lx-green-600);
}
.btn-outline-secondary{
    border-color:#cfcfcf;
    color:#333;
}
.btn-outline-secondary:hover{
    background:#f7f7f7;
    border-color:#c1c1c1;
}

/* Badges/Kategorien */
.badge.bg-light.text-dark{
    border:1px solid var(--lx-border);
    font-weight:500;
}

/* Tabellen (Angebote) */
.table{
    border-color: var(--lx-border);
}
.table thead th{
    border-bottom: 1px solid var(--lx-border);
    color:#333;
    font-weight:600;
}
.table td,.table th{
    vertical-align: middle;
}

/* Alert (CTA oben) */
.alert-success{
    background: var(--lx-green-50);
    border-color: #d8f0e1;
    color:#0f5d2a;
}

/* Formulare */
.form-control, .form-select{
    border-radius: 10px;
    border-color: #d9d9d9;
}
.form-control:focus, .form-select:focus{
    border-color: var(--lx-green);
    box-shadow: 0 0 0 .2rem rgba(26,141,60,.15);
}

/* Preisformatierung/Typografie-Kleinigkeiten */
.fw-bold{ letter-spacing:.1px; }

/* Footer rechtlicher Block */
footer{
    background:#fff;
}
footer .text-muted{
    color:#6f6f6f !important;
}

/* „Made with love“-Footer */
.fkmedia-footer-with-love {
    font-size: 14px;
    font-weight: 400;
    padding: 10px 0;
    background-color: #F8F8F8;
    border-top: 1px solid #EAEAEA;
    color: #222222;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fkmedia-footer-with-love img{
    margin: 0 5px;
    vertical-align: middle;
}

/* Cookie-Banner (aus cookie_consent.php) */
#cookie-banner{
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
}
#cookie-banner .btn-success{
    background: var(--lx-green);
    border-color: var(--lx-green);
}
#cookie-banner .btn-success:hover{
    background: var(--lx-green-600);
    border-color: var(--lx-green-600);
}

/* Kleinere Abstände auf Mobile für Kartenraster */
@media (max-width: 576px){
    .card-product .card-body{ padding: .9rem; }
}

/* horizontale Karten-Variante: Bildhöhe auf Mobile begrenzen */
.product-thumb {
    max-height: 120px;   /* oder 140px, je nach Wunsch */
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: auto; /* falls alles andere fehlschlägt */
}



/* Nur Mobile: Bildspalte zentrieren */
/* Nur Mobile und nur in deiner Bildspalte */
@media (max-width: 767.98px){
    .col-5.thumb-col{
        /* Firefox */
        width: -moz-available;
        /* WebKit/Blink */
        width: -webkit-fill-available;
        /* Zukunft / evtl. später */
        width: stretch;
        /* letzter Fallback */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 120px; /* gibt etwas „Zentrierfläche“ */
    }
    .col-5.thumb-col img{
        max-height: 100px;
        object-fit: contain;
    }
}