/*
 * ?? ?? ?? ??????? ?? ??? ?????? ????? ????
 * Slick Carousel ???? ??????? ??? ???? ??? ???
 * ?? ???? ???? ????? ???? ?? ???? ??? ???? ??????? ?? ?? ???? ?? ???? ??? ????
 */
.my-product-slider {
    width: 100%;
    margin: 0 auto; /* ??????? ?? ??? ??? ???? ?? ??? */
    padding: 20px 0; /* ???? ??? ???? ??? ????? */
    box-sizing: border-box;
}

.my-slide {
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    /* ???????? ?? ?????? ??? ??? ?? ??? */
    /* ??? ?? slidesToShow ?? 1 ?? ????? ????? ??? ?? ?? ??? ?? */
    margin: 0 10px; /* ???????? ?? ?????? ????? */
}

.my-slide img {
    max-width: 100%;
    height: auto;
    display: block; /* ???? ?? ???? ????? ??? ??? ???? ?? ??? */
    margin: 0 auto 10px auto; /* ???? ?? ??? ??? ???? ??? ???? ?? ????? */
    border: 1px solid #eee; /* ???? ????? */
    border-radius: 5px; /* ???? ?????? */
}

.my-slide h3 {
    font-size: 1.2em;
    margin: 0 0 5px 0;
    color: #333;
}

.my-slide h3 a {
    text-decoration: none;
    color: inherit;
}

.my-slide p.price {
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    margin: 0;
}

/* Slick Carousel ?? ????? (arrows) ??? ???? (dots) ?? ??? ???? ???? ?? ??????? */
/* ?? ????? ?????? ?? ?? ????? Slick ?? ?????? ????? ?? ???????? ???? */
.slick-prev:before, .slick-next:before {
    color: #000 !important; /* ????? ?? ??? */
}

.slick-dots li button:before {
    color: #ccc !important; /* ???? ?? ??? */
}

.slick-dots li.slick-active button:before {
    color: #0073aa !important; /* ????? ??? ?? ??? (?? ?? ???? ?? ?????) */
}