/* 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;
}

/* the filters by the characteristics of the inArt products in the left column (includes/functions/inart_filter.php):
   the same markup as the other filters; more values under "Покажи още", a button to clear the choice */
.inart-filter .filterscroll {
    margin-bottom: 6px;
}
.inart-filter-more > summary {
    display: inline-block;
    padding: 4px 0 8px;
    color: #A64273;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
}
.inart-filter-more > summary::-webkit-details-marker {
    display: none;
}
.inart-filter-more[open] > summary {
    display: none;
}
.inart-filter-clear {
    display: inline-block;
    margin: 8px 0 14px;
    padding: 8px 14px;
    border-radius: 16px;
    background: #f3f3f3;
    color: #6b6b6b;
    font-size: 13px;
    text-decoration: none;
}
.inart-filter-clear:hover,
.inart-filter-clear:focus {
    color: #171414;
    text-decoration: none;
}
/* computers: the left column (all its boxes in .left-filters, includes/column_left.php) stays on the screen with
   position: sticky; the row is flex, so the column is as high as the products and stays in the page; a column
   higher than the screen scrolls by itself. The old scrollFun() made the boxes fixed/absolute, so they covered
   each other, and with a short list they covered the footer and went out of sight. */
@media (min-width: 768px) {
    .product-list-wrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .product-list-wrapper:before,
    .product-list-wrapper:after {
        display: none;
    }
    .left-filters {
        position: -webkit-sticky;
        position: sticky;
        top: 10px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* these filters come before the long list of categories (on phones in the ФИЛТРИРАЙ panel) */
.left-filters {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.left-filters > .inart-filter {
    -webkit-order: -1;
    order: -1;
}

/* phones and tablets: the ФИЛТРИРАЙ button (mobile.css shows it) right under the fixed search bar, full width,
   always on the screen and not moving (at the bottom it jumped with the browser bars). gfx/pol/search_suggest.js
   puts it exactly under the search bar and moves the page down by its height; 119px is the place without it. */
@media only screen and (max-width: 1024px) {
    .mob-filter-button {
        top: 119px;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 44px;
        margin: 0;
        padding: 0;
        line-height: 44px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .5px;
        text-decoration: none;
        z-index: 4; /* under .page-overlay (5) and the opened menu #mainmenu */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    .mob-filter-button:hover,
    .mob-filter-button:focus {
        color: #fff;
        text-decoration: none;
    }
    /* a small funnel before the text */
    .mob-filter-button:before {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        margin: 0 10px 0 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 10px solid #fff;
        vertical-align: -1px;
    }
}

/* 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;
    }
}