/*
 * Olial Produktkarten – olial-products.css
 * Vollständige Bildkontrolle, kein Blocksy-Eingriff.
 *
 * ANPASSUNG DER BILDGRÖSSE:
 *   Suche nach "--olial-img-height" (Desktop) und
 *   "--olial-img-height-mobile" (Mobil) und ändere den Wert.
 *   Empfehlung für Weinflaschen: 160px–200px
 *   Empfehlung für gemischtes Sortiment: 140px–180px
 */

/* ── Variablen ───────────────────────────────────────────── */
.olial-products-block {
    --olial-img-height:        160px;   /* ← HIER Bildhöhe anpassen */
    --olial-img-height-mobile: 120px;
    --olial-card-bg:           #ffffff;
    --olial-card-radius:       8px;
    --olial-card-shadow:       0 2px 8px rgba(0,0,0,.08);
    --olial-card-shadow-hover: 0 4px 16px rgba(0,0,0,.14);
    --olial-title-color:       #1a1a1a;
    --olial-price-color:       #f58220;
    --olial-btn-bg:            #f58220;
    --olial-btn-color:         #ffffff;
    --olial-btn-bg-hover:      #d4700f;
    --olial-badge-sale-bg:     #e53935;
    --olial-badge-new-bg:      #1565c0;
    --olial-font:              inherit;
    --olial-gap:               16px;

    font-family: var(--olial-font);
    margin: 2rem 0;
}

/* ── Überschrift ─────────────────────────────────────────── */
.olial-products-block .olial-products-title {
    margin: 0 0 1.25rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--olial-title-color);
}

/* ── Grid ────────────────────────────────────────────────── */
.olial-products-block .olial-products-grid {
    display: grid;
    gap: var(--olial-gap);
}

/* Spalten je nach columns-Attribut */
.olial-products-block.olial-cols-1 .olial-products-grid { grid-template-columns: repeat(1, 1fr); }
.olial-products-block.olial-cols-2 .olial-products-grid { grid-template-columns: repeat(2, 1fr); }
.olial-products-block.olial-cols-3 .olial-products-grid { grid-template-columns: repeat(3, 1fr); }
.olial-products-block.olial-cols-4 .olial-products-grid { grid-template-columns: repeat(4, 1fr); }
.olial-products-block.olial-cols-5 .olial-products-grid { grid-template-columns: repeat(5, 1fr); }
.olial-products-block.olial-cols-6 .olial-products-grid { grid-template-columns: repeat(6, 1fr); }

/* ── Karte ───────────────────────────────────────────────── */
.olial-products-block .olial-product-card {
    background:    var(--olial-card-bg);
    border-radius: var(--olial-card-radius);
    box-shadow:    var(--olial-card-shadow);
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    transition:    box-shadow .2s ease, transform .2s ease;
}

.olial-products-block .olial-product-card:hover {
    box-shadow: var(--olial-card-shadow-hover);
    transform:  translateY(-2px);
}

/* ── Bildbereich – KERN DER LÖSUNG ──────────────────────── */
.olial-products-block .olial-card-image-link {
    display: block;
    text-decoration: none;
}

.olial-products-block .olial-card-image-wrap {
    position:        relative;
    width:           100%;
    height:          var(--olial-img-height);   /* feste Höhe – KEIN aspect-ratio */
    overflow:        hidden;
    background:      #f8f8f8;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/*
 * Das Bild wird NICHT verzerrt.
 * object-fit: contain → komplettes Bild sichtbar, keine Abschneidung.
 * Flasche nimmt so viel Platz wie möglich, ohne abgeschnitten zu werden.
 */
.olial-products-block .olial-card-img {
    display:       block;
    width:         100%;
    height:        100%;
    object-fit:    contain;
    object-position: center center;
    padding:       8px;           /* kleiner Abstand zum Rand */

    /* WICHTIG: Blocksy-Inline-Stile überschreiben */
    aspect-ratio:  unset !important;
    max-width:     100% !important;
    max-height:    100% !important;
}

/* ── Badges ──────────────────────────────────────────────── */
.olial-products-block .olial-badge {
    position:      absolute;
    top:           8px;
    left:          8px;
    padding:       2px 7px;
    border-radius: 4px;
    font-size:     .7rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:         #fff;
    z-index:       1;
}

.olial-products-block .olial-badge-sale { background: var(--olial-badge-sale-bg); }
.olial-products-block .olial-badge-new  { background: var(--olial-badge-new-bg);  }

/* ── Karten-Text ─────────────────────────────────────────── */
.olial-products-block .olial-card-body {
    padding:        10px 12px 14px;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1;
}

.olial-products-block .olial-card-title-link {
    text-decoration: none;
    color:           inherit;
}

.olial-products-block .olial-card-title {
    margin:      0;
    font-size:   .82rem;
    font-weight: 600;
    line-height: 1.35;
    color:       var(--olial-title-color);
    /* Maximal 2 Zeilen, dann … */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.olial-products-block .olial-card-price {
    font-size:   .9rem;
    font-weight: 700;
    color:       var(--olial-price-color);
    margin-top:  auto;    /* drückt Preis und Button nach unten */
}

/* WooCommerce Preisformatierung */
.olial-products-block .olial-card-price del {
    color:      #999;
    font-weight: 400;
    font-size:   .78rem;
    margin-right: 4px;
}

.olial-products-block .olial-card-price ins {
    text-decoration: none;
}

/* ── Warenkorb-Button ────────────────────────────────────── */
.olial-products-block .olial-card-btn {
    display:         block;
    text-align:      center;
    text-decoration: none;
    background:      var(--olial-btn-bg);
    color:           var(--olial-btn-color) !important;
    border-radius:   5px;
    padding:         7px 10px;
    font-size:       .78rem;
    font-weight:     600;
    transition:      background .18s ease;
    margin-top:      6px;
    border:          none;
    cursor:          pointer;
    line-height:     1.2;
}

.olial-products-block .olial-card-btn:hover {
    background: var(--olial-btn-bg-hover);
    color:      var(--olial-btn-color) !important;
}

/* ── Kein-Produkt-Meldung ────────────────────────────────── */
.olial-no-products {
    color: #888;
    font-style: italic;
    padding: 1rem 0;
}

/* ── Responsive ─────────────────────────────────────────── */

/* Tablet: max. 3 Spalten */
@media (max-width: 900px) {
    .olial-products-block.olial-cols-4 .olial-products-grid,
    .olial-products-block.olial-cols-5 .olial-products-grid,
    .olial-products-block.olial-cols-6 .olial-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .olial-products-block {
        --olial-img-height: var(--olial-img-height-mobile);
    }
}

/* Mobil: 2 Spalten */
@media (max-width: 600px) {
    .olial-products-block .olial-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .olial-products-block {
        --olial-img-height: 110px;
    }

    .olial-products-block .olial-card-title {
        font-size: .76rem;
    }
}

/* Sehr klein: 1 Spalte */
@media (max-width: 380px) {
    .olial-products-block .olial-products-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ── Kategorie-Pills ─────────────────────────────────── */
.olial-subcategory-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    margin:    0 0 28px;
}

.olial-subcat-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         7px 15px 7px 11px;
    border-radius:   22px;
    background:      #f5f5f5;
    border:          1px solid #e0e0e0;
    color:           #333;
    font-size:       13px;
    font-weight:     500;
    line-height:     1.2;
    text-decoration: none;
    transition:      background .15s ease, color .15s ease, border-color .15s ease;
    white-space:     nowrap;
}

.olial-subcat-pill:hover,
.olial-subcat-pill.olial-subcat-pill--active {
    background:   #f58220;
    color:        #ffffff;
    border-color: #f58220;
}

.olial-subcat-pill .olial-pill-icon {
    width:       18px;
    height:      18px;
    display:     block;
    flex-shrink: 0;
    object-fit:  contain;
    font-size:   18px;
    line-height: 1;
    transition:  filter .15s ease;
}

.olial-subcat-pill img.olial-pill-icon {
    filter: none;
}

.olial-subcat-pill:hover     img.olial-pill-icon,
.olial-subcat-pill--active   img.olial-pill-icon {
    filter: brightness(0) invert(1);
}