/* ==========================================================================
   Product category cards (native subcategory listing + [applari_product_categories]).
   The card visuals come from existing classes (image-link-lift, square-img,
   moody-image, pan-image, image-link-lift-title). This file only adds the small
   "glue" needed to make those work on category markup + the shortcode grid.
   ========================================================================== */

@media only screen and (min-width: 320px) {
    /* Card link must be a block so square-img's aspect-ratio gives it height
       and the absolutely-positioned (image-link-lift) image can fill it. */
    .product-category > a.image-link-lift {
        display: block;
        height: 100%;
    }
    /* Reset default <figure> margins; let the pan wrapper fill the square card. */
    .product-category .applari-category-card__figure {
        margin: 0;
        height: 100%;
        width: 100%;
    }
    /* Native WooCommerce centres category items + titles; keep them left-aligned
       (the overlay title is centred on its own via image-link-lift-title). */
    .woocommerce ul.products li.product-category,
    .applari-category-grid li.product-category {
        text-align: left;
        margin: 0;
        float: none;
    }

    /* Subtle product count inside the overlay title. */
    .applari-category-card__count {
        font-weight: 400;
        font-size: 0.75em;
        opacity: 0.7;
    }

    /* ---- Shortcode grid (own container, independent of product loop) ---- */
    .applari-category-grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .applari-category-grid li.product-category {
        width: auto;
    }
}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width: 990px) {
    .applari-category-grid {
        grid-template-columns: repeat(var(--cols, 4), 1fr);
    }
}

@media only screen and (min-width: 1280px) {

}