/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 25 2026 | 14:21:59 */
/* ===== Josya | Themify Product Archive Category Filter ===== */

.module-archive-products .post-filter {
    display: flex !important;
    justify-content: center;
    gap: 36px;
    padding: 16px 0 24px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.module-archive-products .post-filter li a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    text-align: center;
    max-width: 130px;
    gap: 10px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a1f1f;
}

/* Category image */
.module-archive-products .tf-cat-filter-img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    transition: transform .35s ease;
}

/* Prevent duplicate images */
.module-archive-products .post-filter a .tf-cat-filter-img:not(:first-of-type) {
    display: none !important;
}

/* Hover */
.module-archive-products .post-filter li a:hover .tf-cat-filter-img {
    transform: scale(1.05);
}

/* Active category */
.module-archive-products .post-filter li.active a .tf-cat-filter-img {
    outline: 2px solid #7a1f1f;
    outline-offset: 4px;
}

/* ==================================================
   MOBILE GRID FIX (CENTERED PERFECTLY)
   ================================================== */

@media (max-width: 768px){

    .module-archive-products .post-filter{

        display: grid !important;
        grid-template-columns: repeat(3, 1fr);

        justify-content: unset !important; /* kills flex centering */

        gap: 18px;

        padding: 20px 14px 12px !important;
        margin: 0 !important;

        width: 100%;
        box-sizing: border-box;
    }

    /* Remove desktop width restriction */
    .module-archive-products .post-filter li a{
        max-width: 100% !important;
    }

}