/* Kafelki Produktowe Elementor */

.kpe-category-tiles {
    display: grid !important;
    grid-template-columns: repeat(var(--kpe-columns, 4), minmax(0, 1fr)) !important;
    gap: var(--kpe-gap, 14px) !important;
    width: 100% !important;
    max-width: var(--kpe-max-width, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.kpe-category-tile {
    display: flex !important;
    align-items: center !important;
    gap: var(--kpe-image-gap, 18px) !important;
    min-height: var(--kpe-tile-min-height, 105px) !important;
    padding: var(--kpe-tile-padding-y, 14px) var(--kpe-tile-padding-x, 18px) !important;
    background: var(--kpe-tile-bg-color, #ffffff) !important;
    border: var(--kpe-tile-border-width, 1px) solid var(--kpe-tile-border-color, #e8e8e8) !important;
    border-radius: var(--kpe-tile-radius, 10px) !important;
    color: var(--kpe-title-color, #111111) !important;
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
    overflow: hidden !important;
}

.kpe-category-tiles.kpe-has-hover-shadow .kpe-category-tile:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08) !important;
}

.kpe-category-tile:hover {
    color: var(--kpe-title-color, #111111) !important;
}

.kpe-category-tile img,
.kpe-image-placeholder {
    width: var(--kpe-image-width, 95px) !important;
    height: var(--kpe-image-height, 80px) !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    display: block !important;
}

.kpe-image-placeholder {
    border-radius: 8px !important;
    background: linear-gradient(135deg, #f4f4f4, #ffffff) !important;
    border: 1px dashed #dddddd !important;
}

.kpe-category-content {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.kpe-title {
    display: block !important;
    margin: 0 0 var(--kpe-title-margin-bottom, 6px) !important;
    font-size: var(--kpe-title-size, 15px) !important;
    font-weight: var(--kpe-title-weight, 700) !important;
    line-height: 1.2 !important;
    color: var(--kpe-title-color, #111111) !important;
}

.kpe-description {
    display: block !important;
    margin: 0 !important;
    font-size: var(--kpe-desc-size, 12px) !important;
    line-height: var(--kpe-desc-line-height, 1.3) !important;
    color: var(--kpe-desc-color, #555555) !important;
}

.kpe-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: var(--kpe-arrow-margin-top, 8px) !important;
    width: var(--kpe-arrow-width, 28px) !important;
    height: var(--kpe-arrow-height, 20px) !important;
    border: 1px solid var(--kpe-arrow-border-color, #b7d733) !important;
    border-radius: var(--kpe-arrow-radius, 4px) !important;
    color: var(--kpe-arrow-color, #9ab900) !important;
    font-size: var(--kpe-arrow-size, 18px) !important;
    line-height: 1 !important;
    font-weight: 400 !important;
}

@media (max-width: 1024px) {
    .kpe-category-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .kpe-category-tiles {
        grid-template-columns: 1fr !important;
    }
}