﻿.product-item{
    position:relative;
    display:inline-block;
    width:220px;
    box-shadow:0px 0px 8px rgba(0,0,0,0.2);
    height:300px;
    padding:6px;
    margin-right:7px;
    margin-bottom:7px;
    overflow:hidden;
    transition: all 0.2s ease-in;
}

.product-item:hover{
    transform:scale(1.08,1.08);
}
.product-item h2 a{
    display:block;
    margin-top:4px;
    margin-bottom:6px;
    text-align:center;
    color:#B8263B!important;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
    font-size:16px;
}
.product-item h2 a:hover{
    text-decoration:underline;
}

.random-item{
    position:relative;
    display:inline-block;
    width:220px;
    box-shadow:0px 0px 8px rgba(0,0,0,0.2);
    height:240px;
    padding:6px;
    margin-right:7px;
    margin-bottom:7px;
    overflow:hidden;
    transition: all 0.2s ease-in;
}
.random-item .product-image{
    height:110px!important;
    overflow:hidden;
}
.random-item:hover{
    transform:scale(1.08,1.08);
}
.random-item h2 a{
    display:block;
    margin-top:4px;
    margin-bottom:4px;
    text-align:center;
    color:#B8263B!important;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
    font-size:16px;
}
.random-item h2 a:hover{
    text-decoration:underline;
}

.product-image a{    
    display:block;
    text-align:center;
}
.product-image a img{
    max-width:200px;
    max-height:120px;    
}
.product-buttons{
    position:absolute;
    height:22px;
    bottom:10px;
}
.random-product-amount{
    text-align:center;
    margin-top:-20px;
    padding:4px;
    font-size:80%;
}
.product-amount{
    text-align:center;
    padding:6px;
    font-size:80%;
}
.product-amount-true{
    color:#5B9620;
}
.product-amount-false {
    color:#46428e!important;
}
.product-cost{
    position:absolute;
    bottom:40px;
    text-align:center;
    width:220px;
    color:#B6B6B6;
    font-size:18px;
}
.product-cost span
{
    color:#5B9620;
}
.product-oldcost{
    position:absolute;
    bottom:66px;
    text-align:center;
    width:220px;
    color:#B6B6B6;
    font-size:16px;
}
.product-oldcost span
{
    color:black;
    display:inline-block;
}
.product-oldcost span i:before {
    border-bottom: 1px solid red;
    position: absolute;
    content: "";
    width: 70px;
    height: 40px;
    transform: rotate(-17deg);
    top:-30px;
    right:40px;
}
.random-product-oldcost{
    position:absolute;
    bottom:30px;
    text-align:center;
    width:220px;
    color:#B6B6B6;
    font-size:14px;
}
.random-product-oldcost span
{
    color:black;
    display:inline-block;
}
.random-items{
    margin-top:20px;
}

.random-items h2{
    color:#449A44;
    font-size:14px;
    font-weight:bold;
    display:block;
    margin-bottom:20px;
}
.random-product-oldcost span i:before {
    border-bottom: 1px solid red;
    position: absolute;
    content: "";
    width: 50px;
    height: 20px;
    transform: rotate(-17deg);
    top:-10px;
    right:50px;
}
.random-product-cost{
    position:absolute;
    bottom:10px;
    text-align:center;
    width:220px;
    color:#B6B6B6;
    font-size:18px;
}
.random-product-cost span
{
    color:#5B9620;
}
.catalog-sort {
    position:relative;
    margin-bottom:36px;
}
.catalog-sort a{
    text-decoration:none;
}
.catalog-sort-cost {
    position: absolute;
    right: 120px;
    width:220px;
    top:-20px;
}
#btnPod{
    display:block;
    position:absolute;
    right:-120px;
    top:20px;
}
#costFrom{
    display:block;
    position:absolute;
    left:-70px;
    top:20px;
}
#searchCost{
    position:relative!important;
    width:200px!important;
}
.faSort{
    display:inline-block; 
    position:relative; 
    padding-left:4px; 
    top:3px;
}
.faSortDesc{
    display:inline-block; 
    position:relative; 
    padding-left:4px; 
    top:-3px;
}
.cartAdded{
    background-image:none!important;
    background-color:#5B9620;
}

#itemCost{
    margin-top:30px;
    text-align:right;
    color:#999999;
    position:relative;
    float:left;
    width:320px;
}
#itemCost span
{
    color:#5B9620;
    font-size:28px;
    padding-right:16px;
    padding-left:10px;
}
#itemCost a{
    margin-top:10px;
    margin-right:20px;
}
#oldCost{
    position:absolute;
    text-align:center;
    color:#B6B6B6;
    font-size:12px;
    left:0px;
    top:-30px;
    right:0px;
    text-align:right;
    padding-right:0px;
    width:220px;
    text-align:right;
}
#oldCost span
{
    color:black;
    display:inline-block;
    font-size:20px!important;
}
#oldCost span i:before {
    border-bottom: 1px solid red;
    position: absolute;
    content: "";
    width: 70px;
    height: 40px;
    transform: rotate(-17deg);
    top:-27px;
    right:50px;
}
#productDescription{
    float:left;
    width:95%;
    line-height:22px;
    padding-right:6px;
}
.mainProductPhoto{
    float:left; 
    width:240px;
    margin-right:20px!important;
}
.mainProductPhoto img{
    max-width:220px;
}

.categoryList{
    margin-bottom:30px;
}
.categoryList span{
    color:#B02305;
    text-decoration:underline;
    margin-right:6px;
}
.categoryList a{
    color:#606060;
    font-size:90%;
}
.categoryList i{
    position:relative;
    display:inline-block;
    font-size:50%;
    color:black;
    padding-left:3px;
    padding-right:3px;
    top:-3px;
}

/* =================================================== */
/* === ЕДИНЫЙ ИСПРАВЛЕННЫЙ КОД ДЛЯ МОБИЛЬНЫХ === */
/* =================================================== */

@media (max-width: 768px) {

    /* --- Глобальные отступы страницы --- */
    .pageContent {
        padding-left: 0px;
        padding-right: 0px;
        box-sizing: border-box;
    }

    .container, .container-fluid, .wrapper, #wrapper {
        padding-left: 0 !important;
    }

    /* --- Сетка товаров --- */
    .sortable {
        display: flex;
        flex-wrap: wrap;
    }
	 .product-list {
        display: flex;
        flex-wrap: wrap;
    }

    /* --- ОСНОВНЫЕ СТИЛИ КАРТОЧКИ ТОВАРА --- */
    .product-item {
        width: 46%;
        margin: 0 1% 10px 1%;
        padding: 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column; /* Все дочерние элементы - в столбик */
        height: auto;
    }

        /* --- Все прямые потомки карточки должны быть блоками --- */
        .product-item > * {
            width: 100%; /* Заставляем каждый элемент занять всю ширину */
            display: block; /* Убеждаемся, что они ведут себя как блоки */
            position: static; /* Сбрасываем любое странное позиционирование */
        }

    /* --- Изображение --- */
    .product-image {
        margin-bottom: 8px;
    }

        .product-image img {
            object-fit: contain;
        }

    /* --- Название товара --- */
    .product-item h2 {
        margin: 0 0 10px 0 !important; /* Убираем все отступы, кроме нижнего */
    }

        .product-item h2 a {
            text-align: left;
            font-size: 14px;
        }

    /* --- Цена --- */
    .product-cost {
        margin-top: auto; /* Прижимает цену и кнопку к низу */
        font-weight: bold;
        text-align: left;
    }

        .product-cost span {
            font-size: 18px;
        }

    /* --- Блок с кнопкой "В корзину" --- */
    .product-buttons {
        margin-top: 8px;
    }

        .product-buttons .cartlink {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
        }
}