/* Widget "product_categories" */
.karnak-pcat-grid {
    display: grid;
}
.karnak-pcat-item {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-radius: var(--pcat-radius, 0);
    text-align: var(--pcat-align, center);
}
.karnak-pcat-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: var(--pcat-img-ratio, 1/1);
    overflow: hidden;
    border-radius: var(--pcat-radius, 0);
    background: #f0f0f0;
}
.karnak-pcat-img-wrap--circle {
    border-radius: 50%;
    overflow: hidden;
}
.karnak-pcat-img-wrap--circle .karnak-pcat-img { border-radius: 50%; }
.karnak-pcat-img-wrap--circle .karnak-pcat-overlay { border-radius: 50%; }
.karnak-pcat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.karnak-pcat-item:hover .karnak-pcat-img { transform: scale(1.04); }
.karnak-pcat-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: #e8e8e8;
}
.karnak-pcat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--pcat-body-padding, 10px 4px 4px);
    background: var(--pcat-body-bg, transparent);
}
.karnak-pcat-item--2 .karnak-pcat-img-wrap:not(.karnak-pcat-img-wrap--circle) { border-radius: var(--pcat-radius, 0); }
.karnak-pcat-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 12px;
    background: var(--pcat-overlay-bg, linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 60%));
    color: #fff;
    text-align: var(--pcat-align, center);
}
.karnak-pcat-item--2 .karnak-pcat-name { color: var(--pcat-name-color, #fff); }
.karnak-pcat-item--2 .karnak-pcat-count { color: var(--pcat-count-color, rgba(255,255,255,.8)); }
.karnak-pcat-name {
    font-size: var(--pcat-name-size, 0.95rem);
    font-weight: var(--pcat-name-weight, 600);
    font-family: var(--pcat-name-font, inherit);
    color: var(--pcat-name-color, currentColor);
    line-height: 1.2;
}
.karnak-pcat-count {
    font-size: var(--pcat-count-size, 0.8rem);
    color: var(--pcat-count-color, #888);
}
.karnak-pcat-count:empty { display: none; }