
.product__detail__wrapper {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 150px;
    grid-template-areas: 'img desc';
    display: grid;
    grid-template-columns: 350px auto;
}

.product__detail__img{
    
    width: 340px;
    height:350px;
    grid-area: img;

}

.product__detail__img img{
    width: 350px;
    height: 350px;
}
.product__detail__description {
    grid-area: desc;
    margin-left:30px;
 
}

.city{
    height:36px;
    
}
.product__detail__name{
    font-size: 28px;
}

.product__detail__price{
    font-size:24px;
    font-weight:500;
    margin-top:24px;
}

.product__detail__form {
    margin-top: 24px;
    margin-bottom: 8px;
}

.product__detail_select{
    height:36px;
}


.product__detail__category{
    border-top-style:solid;
    border-top-color:lightgray;
    border-top-width:1px;
    padding-top:8px;

}

.product__detail__category span{
    font-weight:500
}

.product__detail__table tr, th, td {

    
    /*убираем пустые промежутки между ячейками*/
    border: 1px solid lightgrey;
    /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
    border-top-width: 1px;
}
.product__detail__table table {
    border-collapse: collapse;
}

.product__detail__table th {
    width: 150px;
    font-weight: 400;
    padding: 8px;
    border-top: 0;
    text-align: left;
}

.product__detail__table td {
 
    padding: 8px;
    border-top: 0;
    text-align: left;
}
.product__detail__table table {
    width:100%;
}

.product__detail__table{
    padding-top:8px;
}

.slick-list{
    overflow:hidden;
}
.slick-track{
    display:flex;
}

.detail__slider{
    position:relative
}

    .detail__slider .slick-arrow {
        position: absolute;
        top: 50%;
        z-index:4;
        width: 25px;
        height: 25px;
        border-style: none;
        background-color: rgba(0, 0, 0, 0);
        cursor:pointer;
    }

        .detail__slider .slick-arrow.slick-prev {
            left: 0;
            font-size: 0;
            border-left: 3px solid rgb(55,55,55);
            border-top: 3px solid rgb(55,55,55);
            transform: rotate(-45deg)
        }
    .detail__slider .slick-arrow.slick-next{
        right: 0;
        font-size:0;
        border-left: 3px solid rgb(55,55,55);
            border-top: 3px solid rgb(55,55,55);
            transform: rotate(135deg)
    }


.shop__modal {
    display: none;
    position: absolute;
    left: 0;
    top: 136px;
    width: 100%;
    min-height:100%;
    background-color: white;
    border: 2px solid lightgray;
    z-index: 5;
}

.shop__modal-showed{
    display:block
}

.shop__modal-body {
    position: relative;
    margin: 0px;
    padding: 8px;
}

.shop__modal-cross {
    position: absolute;
    right: 0;
    padding: 6px;
    cursor: pointer;
}
.shop__modal-title{

}

.shop__modal-list {

}

.shop__modal__item {
    margin-top: 7px;
    max-width: 100%;
    border: 2px solid lightgray;
    border-radius: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.shop__modal__item-street {
    width: 50%;
    font-size: 22px;
}

.shop__modal__item-price-span {
    font-size: 22px;
    margin-left: 7px;
}

.shop__modal__item-button{

}


    .shop__modal__item-button button {
        padding: 8px;
        border-style: none;
        background-color: rgb(229,9,127);
        color: white;
        border-radius: 3px;
        font-size: 18px;
        box-shadow: 1px 1px 1px gray
    }

.shop__modal__item-button button:active {
    box-shadow:none;
}

.button__choise__shop {
    height: 36px;
    border: 2px solid rgb(229,9,127);
    background-color: white;
    color: darkslateblue;
    border-radius: 3px;
    font-size: 18px;
    box-shadow: 1px 1px 1px gray;
}

.button__choise__shop:active{
    box-shadow:none;
}

.add__to__cart {
    height: 36px;
    border-style: none;
    background-color: rgb(229,9,127);
    color: white;
    border-radius: 3px;
    font-size: 18px;
    box-shadow: 1px 1px 1px gray;
}

    .add__to__cart:active {
        background-color: darkslateblue;
        box-shadow: none;
    }

.product__detail-img{
    display:none
}
.product__detail-img-list {
    display: grid;
    grid-template-areas: 'miniature full';
}
.product__detail-img-miniatures {
    grid-area: miniature;
}

.product__detail-img-full {
    grid-area: full;
}

.shop__modal__img-content:hover {
    cursor: zoom-in;
}

.shop__modal__img-img{
    width:500px;
    height:500px;
}

.shop__modal__img {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.shop__modal__img-content {
    z-index: 20;
    /* top: 20%; */
    position: absolute;
    /* top: 200px; */
    left: calc(50% - 250px);
}
.shop__modal__img-body {
    position: relative;
    top: 120px;
}
.shop__modal__img-cross{
    padding:12px
}

@media(max-width:767px) {
    .shop__modal__img-content {
        z-index: 20;
        /* top: 20%; */
        position: absolute;
        /* top: 200px; */
        left: auto;
    }
    .shop__modal__item {
        display: block;
        padding:6px;
    }
    .shop__modal__img-img {
        width: 100%;
        height: 100%;
    }
    .product__detail-img-list {
        display: flex;
        flex-direction: column-reverse;
    }
    .product__detail-img-miniatures {
        display: flex;
        margin-top: 6px;
    }
    .product__detail__wrapper {
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 100px;
       
        display: block;
       
    }

    .shop__modal{
        left:0;
        width:100%;
    }

    .product__detail__description {
        grid-area: desc;
        margin-left: 7px;
        margin-top: 10px;
    }
    .product__detail__img {
        display: block;
        width: 100%;
        height: 300px;
        margin-top: 75px;
        margin-bottom: 75px;
    }

        .product__detail__img img{
            width:300px;
            height:300px;
        }
        .product__detail__form button {
            width: 100%;
            margin-top: 5px;
        }
        .city {
        height: 36px;
        width:100%;
        margin-top:3px;
    }
    .product__detail__form_form {
        display: block;
        flex-direction: column;
        margin-top:5px;
    }
    .product__detail_select {
        height: 36px;
        width:100%;
    }
}
.cart__detail__total td {

    border-radius: 5px;

}