/**
 * PROgraf Plus — Shop/Category Loop Styling (1.43.9)
 *
 * Cilj:
 *   1. Vse product slike imajo enako višino (kvadrat 1:1)
 *   2. Slika je centrirana horizontalno IN vertikalno znotraj kvadrata
 *   3. Cela slika je vidna (object-fit: contain), ne reže
 *
 * Strategija:
 *   - Wrapper (.box-image / .product-image): aspect-ratio 1/1 + flex centering
 *   - Img: object-fit contain + width/height 100% — fills wrapper without cropping
 *   - Vsi !important da prebijemo Flatsome theme
 */

/* ====================================================================
 * 1) WRAPPER — kvadratna škatla z border-jem in vertikalno centriranjem
 * ==================================================================== */
.product-small .box-image,
.products .product .box-image,
.products li.product .product-image,
.products li.product .woocommerce-loop-product__image,
.products .col-inner .image-cover,
.products .col-inner .image-contain,
.shop-container .product-small .box-image,
.shop-container .product-image-wrapper,
.related .product-small .box-image,
.up-sells .product-small .box-image {
    /* Stil */
    border: 1px solid var(--prograf-border, #e5e7eb) !important;
    border-radius: var(--prograf-radius, 8px) !important;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;

    /* 1:1 aspect ratio + flex centering za vse slike enako */
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    position: relative !important;

    /* Flex centering — slika v centru horizontalno + vertikalno */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ====================================================================
 * 2) IMG — proporcionalna slika znotraj kvadrata, centrirana
 * ==================================================================== */
.product-small .box-image img,
.products .product .box-image img,
.products li.product .product-image img,
.products li.product .woocommerce-loop-product__image img,
.products li.product a img.attachment-woocommerce_thumbnail,
.shop-container li.product img,
.products .image-cover img,
.products .image-contain img,
.products .image-zoom img,
ul.products li.product a img {
    /* Sproščamo Flatsome absolute pozicioniranje */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    /* Proporcionalna slika, ne reže, fits wrapper */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;

    /* Stil */
    border-radius: 6px;
    background: #fff;
    margin: 0 !important;
    display: block;
}

/* ====================================================================
 * 3) Hover-zoom efekt onemogočen (slika naj ne raste izven okvirja)
 * ==================================================================== */
.product-small .box-image img,
.products .product .box-image img,
.product-small:hover .box-image img,
.products .product:hover .box-image img {
    transform: none !important;
    transition: opacity 0.2s !important;
}

/* Flatsome image-zoom drugotni element (zoom-up) — odstrani */
.product-small .box-image .image-zoom-up,
.products .product .box-image .image-zoom-up {
    display: none !important;
}

/* ====================================================================
 * 4) Cenovne label-e
 * ==================================================================== */
.prograf-loop-price-from {
    font-weight: 400;
    color: #6b7280;
    font-size: 0.85em;
    margin-right: 2px;
}

.prograf-loop-price-vat {
    font-weight: 400;
    color: #6b7280;
    font-size: 0.8em;
    margin-left: 4px;
    white-space: nowrap;
}