/* ==========================================================================
   CRERP - Product Category Cards / Shop By Category Styles
   ========================================================================== */

.product-category-section,
section[data-section-template="Product Category Cards"] {
    width: 100%;
}

.product-category-section .section-title,
section[data-section-template="Product Category Cards"] .section-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: var(--coderiven-dark, #0f172a) !important;
}

.product-category-section .mt-6,
section[data-section-template="Product Category Cards"] .mt-6 {
    margin-top: 14px !important;
}

.product-category-section .card-grid,
section[data-section-template="Product Category Cards"] .card-grid {
    display: grid !important;
    gap: 8px !important;
}

.product-category-section .card,
section[data-section-template="Product Category Cards"] .card {
    border-radius: var(--border-radius-sm, 8px) !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    overflow: hidden;
}

.product-category-section .card:hover,
section[data-section-template="Product Category Cards"] .card:hover {
    border-color: #e2e8f0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.product-category-section .card .card-body,
section[data-section-template="Product Category Cards"] .card .card-body {
    padding: 8px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* ==========================================================================
   Mobile Responsive: 4 in a row
   ========================================================================== */
@media (max-width: 768px) {
    .product-category-section .mt-6,
    section[data-section-template="Product Category Cards"] .mt-6 {
        margin-top: 10px !important;
    }

    .product-category-section .card-grid,
    section[data-section-template="Product Category Cards"] .card-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .product-category-section .card,
    section[data-section-template="Product Category Cards"] .card {
        border-radius: var(--border-radius-sm, 6px) !important;
    }

    .product-category-section .card .card-img-top,
    section[data-section-template="Product Category Cards"] .card .card-img-top {
        max-height: 70px !important;
        height: 60px !important;
        object-fit: contain !important;
        padding: 4px !important;
    }

    .product-category-section .card .card-body,
    section[data-section-template="Product Category Cards"] .card .card-body {
        padding: 4px 2px 6px 2px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}