/* ZieloneDrzewko.pl - kompaktowe i jednolite karty produktowe
 * Patch 2026-10-05
 * Cel: mniejsze obrazy/ikony, niższe karty, spójne proporcje na całym sklepie.
 */

:root {
    --zd-product-media-height: clamp(150px, 12vw, 205px);
    --zd-product-media-mobile: 165px;
    --zd-product-logo-scale: 56%;
}

/* PREMIUM - strona główna, katalog, kategorie */
.premium-product-grid,
.catalog-product-grid-v240 {
    gap: 12px !important;
}

.premium-product-card {
    border-radius: 8px !important;
    box-shadow: 0 5px 16px rgba(17, 32, 24, .04) !important;
}

.premium-product-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(17, 32, 24, .065) !important;
}

.premium-product-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: var(--zd-product-media-height) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #f7f7f3 !important;
}

.premium-product-image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Logo jest tylko fallbackiem - nie powinno zajmować całego pola zdjęcia. */
.premium-product-image > img[src$="/logo.png"],
.premium-product-image > img[src$="/logo_2.png"],
.premium-product-image > img[src*="logo.png?"],
.premium-product-image > img[src*="logo_2.png?"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--zd-product-logo-scale) !important;
    height: var(--zd-product-logo-scale) !important;
    max-width: 170px !important;
    max-height: 130px !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    transform: translate(-50%, -50%) !important;
}

.product-badge {
    top: 8px !important;
    left: 8px !important;
    padding: 5px 7px !important;
    border-radius: 3px !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

.premium-product-body {
    padding: 10px 11px 11px !important;
}

.premium-product-body h3 {
    margin: 0 0 7px !important;
    min-height: 2.35em !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
}

.premium-price-row,
.zd-card-price-row {
    gap: 5px !important;
    margin: 0 0 9px !important;
}

.premium-price-row strong,
.zd-card-price-row strong {
    font-size: 15.5px !important;
    line-height: 1.05 !important;
}

.premium-price-tax {
    font-size: 9px !important;
}

.premium-cart-btn {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

/* Placeholder "Nowy produkt" ma te same proporcje co zwykłe karty. */
.premium-product-image--placeholder {
    height: var(--zd-product-media-height) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

.placeholder-leaf {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
}

.placeholder-kicker {
    margin-bottom: 4px !important;
    font-size: 8px !important;
}

.placeholder-copy {
    margin: 0 0 9px !important;
    min-height: 2.8em !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

/* Starsza karta produktowa - kolekcje i widoki kompatybilności. */
.product-card .product-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: var(--zd-product-media-height) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
}

.product-card .product-image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.product-card .product-image > img[src$="/logo.png"],
.product-card .product-image > img[src$="/logo_2.png"],
.product-card .product-image > img[src*="logo.png?"],
.product-card .product-image > img[src*="logo_2.png?"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--zd-product-logo-scale) !important;
    height: var(--zd-product-logo-scale) !important;
    max-width: 170px !important;
    max-height: 130px !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
}

.product-card .product-body {
    padding: 9px 10px 10px !important;
}

.product-card h3,
.product-card h4,
.product-card .title,
.product-card__title {
    margin-bottom: 6px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.product-card .price,
.product-card__price {
    font-size: 15px !important;
    line-height: 1.1 !important;
}

.product-card .btn,
.product-card button,
.product-card__button {
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
}

/* Moduł commerce 2.49 - jeśli zostanie włączony, zachowuje te same proporcje. */
.product-card-249__image {
    display: block !important;
    height: var(--zd-product-media-height) !important;
    overflow: hidden !important;
    background: #f7f7f3 !important;
}

.product-card-249__image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.product-card-249__body {
    padding: 10px 11px 11px !important;
}

.product-card-249__body h3 {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.product-card-249__price strong {
    font-size: 15.5px !important;
}

@media (max-width: 680px) {
    :root {
        --zd-product-media-height: var(--zd-product-media-mobile);
        --zd-product-logo-scale: 52%;
    }

    .premium-product-grid,
    .catalog-product-grid-v240 {
        gap: 9px !important;
    }

    .premium-product-body {
        padding: 9px !important;
    }

    .premium-product-body h3 {
        min-height: 2.3em !important;
        font-size: 12.5px !important;
    }

    .premium-price-row strong,
    .zd-card-price-row strong {
        font-size: 14.5px !important;
    }

    .premium-cart-btn {
        min-height: 36px !important;
        font-size: 11.5px !important;
    }
}

@media (max-width: 390px) {
    :root {
        --zd-product-media-height: 175px;
    }
}