/* Product lists in the categories and in the search results (includes/modules/product_listing_col.php,
   .productlistContainer > .product-box), loaded after style.css and mobile.css.
   The product pictures are square (450x450). Before, the picture box had a fixed width and height
   (342x290, 100%x250, 170px), so the pictures were stretched or squashed. Now the box is always square and the
   picture keeps its proportions (object-fit: contain), on every screen. The cards line up in rows with flex
   instead of fixed heights. On phones there are 2 cards in a row. */

.productlistContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.productlistContainer > .product-box {
    float: none;
    min-height: 0;
    margin-bottom: 24px;
}

/* square picture box: padding-bottom 100% works in every browser, also without aspect-ratio */
.productlistContainer > .product-box .imgholder {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background: #fff;
}
.productlistContainer > .product-box .imgholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
}
@media (hover: hover) and (pointer: fine) {
    .productlistContainer > .product-box:hover .imgholder img {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
    }
}

/* sale badge: smaller, so it does not cover the picture; the same for every badge picture */
.productlistContainer > .product-box .sale-product-icon {
    top: 6px;
    right: 11px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    pointer-events: none;
}

.productlistContainer > .product-box .product-name,
.productlistContainer > .product-box .product-price-content {
    margin-top: 8px;
}
/* long names: at most 3 lines (2 on phones), the whole name is in the title of the link */
.productlistContainer > .product-box .product-name a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* products without a discount have an empty old price element, it only moved the price */
.productlistContainer > .product-box .product-old-price:empty {
    display: none;
}

/* search results have no filter column: 4 cards in a row on big screens */
@media (min-width: 1200px) {
    .container > .productlistContainer > .product-box {
        width: 25%;
    }
}

/* phones: 2 cards in a row, name above the price */
@media (max-width: 767px) {
    .productlistContainer {
        margin: 0 -5px;
    }
    .productlistContainer > .product-box {
        width: 50%;
        padding: 0 5px;
        margin-bottom: 18px;
    }
    .productlistContainer > .product-box .sale-product-icon {
        top: 4px;
        right: 9px;
        -webkit-transform: scale(.45);
        transform: scale(.45);
    }
    .productlistContainer > .product-box .product-name {
        float: none;
        width: auto;
        margin: 8px 0 2px;
        padding: 0;
        font-size: 14px;
        line-height: 1.3;
        text-align: left;
    }
    .productlistContainer > .product-box .product-name a {
        -webkit-line-clamp: 2;
        font-size: 14px;
    }
    .productlistContainer > .product-box .product-price-content {
        display: block;
        float: none;
        width: auto;
        margin-top: 0;
        font-size: 15px;
        line-height: 1.3;
        text-align: left;
    }
    .productlistContainer > .product-box .product-old-price {
        font-size: 13px;
        margin-right: 4px;
    }
    .productlistContainer > .product-box .product-price {
        padding: 0;
        font-size: 16px;
        font-weight: bold;
    }
}

/* Product sliders (owl): "Клиентите купуват също" on the product page and the sliders with the same boxes
   (.recently-container / .related-container, inv-product-box). The same fixed picture box (342x290, 100%x250)
   stretched the square pictures; now the box is square and the picture keeps its proportions. */
.recently-container .inv-product-box-image .imgholder,
.related-container .inv-product-box-image .imgholder {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background: #fff;
}
.recently-container .inv-product-box-image .imgholder img,
.related-container .inv-product-box-image .imgholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
/* the name under the picture: at most 2 lines */
.recently-container .inv-product-box-title,
.related-container .inv-product-box-title {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.3;
}
.recently-container .inv-product-box-title a,
.related-container .inv-product-box-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 767px) {
    .recently-container .owl-item,
    .related-container .owl-item {
        padding: 0 5px;
    }
    .recently-container .inv-product-box-title,
    .related-container .inv-product-box-title {
        font-size: 13px;
    }
}

/* Filter groups (left column, and the panel of the ФИЛТРИРАЙ button on phones): every group was cut at 167px by
   mCustomScrollbar, which measured the groups while the panel was hidden and showed no scrollbar, so the last
   options (e.g. "Бебешко" on phones) could not be seen or reached. All options are shown now; on phones the
   panel itself scrolls. */
.category-filter .filterscroll,
.category-filter .mCustomScrollBox {
    max-height: none !important;
    height: auto !important;
}

/* Category tiles on the home page and the subcategory tiles (includes/index.php, .category-tiles).
   The same fixed picture box as in the lists (342x290, 100%x250) stretched the square pictures. Now the box is
   square and the picture keeps its proportions. 2 tiles in a row on phones, 3 on tablets, 4 on big screens. */
.category-tiles {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.category-tiles:before,
.category-tiles:after {
    display: none;
}
.category-tiles > .product-box {
    float: none;
    min-height: 0;
    margin-bottom: 24px;
    padding: 0 8px;
    /* the number of products after the name of a subcategory, e.g. "(33)" */
    color: #777;
    font-size: 12px;
}
.category-tiles > .product-box .imgholder {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background: #fff;
}
.category-tiles > .product-box .imgholder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
}
/* the category name under the picture (the link has its colour inline) */
.category-tiles > .product-box > a {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .3px;
}
@media (hover: hover) and (pointer: fine) {
    .category-tiles > .product-box:hover .imgholder img {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
    }
    .category-tiles > .product-box:hover > a {
        text-decoration: underline;
    }
}
@media (min-width: 768px) {
    .category-tiles > .product-box {
        width: 33.3333%;
    }
}
@media (min-width: 1200px) {
    .category-tiles > .product-box {
        width: 25%;
    }
}
@media (max-width: 767px) {
    .category-tiles {
        margin: 0 -5px;
    }
    .category-tiles > .product-box {
        width: 50%;
        padding: 0 5px;
        margin-bottom: 18px;
    }
    .category-tiles > .product-box > a {
        font-size: 13px;
    }
}