/*
Theme Name: 123Sofa Custom Landingpage
Theme URI: https://123sofa.de
Description: Ein hochperformantes, konversionsstarkes Theme für Conversational Commerce via WhatsApp.
Version: 4.0 (Otto.de Style - Flat Marketplace Layout)
Author: 123Sofa Team
Text Domain: 123sofa
*/

/* ==========================================================================
   1. GLOBALE VARIABLEN & EINSTELLUNGEN
   ========================================================================== */
:root {
    --brand-dark: #121212; 
    --brand-light: #ffffff; /* Sauberes Weiß für den Marktplatz Look */
    --wa-green: #25D366;
    --wa-green-hover: #1ebe58;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    color: #2b2b2b;
    background-color: var(--brand-light);
    -webkit-font-smoothing: antialiased;
}

/* Strikte 1200px Begrenzung für den sauberen Desktop-Fokus */
.container {
    max-width: 1200px !important;
    margin: 0 auto;
}

.hover-underline:hover {
    text-decoration: underline;
}

/* ==========================================================================
   2. E-COMMERCE HERO & PROMO BANNERS
   ========================================================================== */
.promo-banner {
    transition: border-color 0.2s ease;
}

.promo-banner.main-banner {
    min-height: 420px; 
}

.promo-banner.side-banner {
    min-height: 202px; 
}

.promo-banner:hover {
    border-color: #cbd5e1 !important;
}

/* ==========================================================================
   3. KATEGORIEN (Eckig, Flach, Klickbar)
   ========================================================================== */
.cat-card {
    transition: opacity 0.2s ease;
}
.cat-card:hover {
    opacity: 0.8;
}

/* ==========================================================================
   4. OTTO-STYLE PRODUKT-KARTEN
   ========================================================================== */
.otto-card {
    border: none;
    transition: transform 0.2s ease;
}

.otto-card:hover {
    transform: translateY(-2px); /* Minimales visuelles Feedback */
}

/* Bild-Wrapper mit Studio-Hintergrund (Hellgrau) */
.otto-img-wrap {
    background-color: #f4f4f4; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lässt weiße Bildhintergründe optisch mit dem grauen Studio-Hintergrund verschmelzen */
.otto-img-wrap img {
    mix-blend-mode: multiply; 
}

.otto-badge {
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}

/* Typografie für Produktkarten */
.otto-meta h5 {
    font-family: Arial, Helvetica, sans-serif;
}

/* Text auf 2 Zeilen beschränken */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   5. AFFILIATE- & ZUBEHÖR-KARTEN
   ========================================================================== */
.affiliate-card {
    transition: border-color 0.2s ease;
}

.affiliate-card:hover {
    border-color: #cbd5e1 !important;
}

/* ==========================================================================
   6. WHATSAPP & CONVERSION BUTTONS
   ========================================================================== */
.btn-wa-brand {
    background-color: var(--wa-green) !important;
    color: white !important;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-wa-brand:hover {
    background-color: var(--wa-green-hover) !important;
}

/* ==========================================================================
   7. RESPONSIVE ANPASSUNGEN (Mobile)
   ========================================================================== */
@media (max-width: 991px) {
    .promo-banner.main-banner {
        min-height: 450px;
    }
    .promo-banner.side-banner {
        min-height: auto;
    }
}