@import url(./style.css);
@import url(./swiper-bundle.min.css);
/*@import url(../../assets/styles/header.css);*/
/*@import url(../../assets/styles/footer.css);*/

.probuct-body {

    padding-bottom: 15px;
}
.swiper-container {
    width: 100%;
    display: flex;
    gap: 30px;
    flex-direction: column;
}

@media (max-width: 1200px) {
    .swiper-container{
        max-height: 100%;
    }
}

.btn-participate {
    margin-top: auto;
    display: flex;
    padding: 10px 15px;
    align-items: center;
    border-radius: 10px;
    background: #555E90;
    color: #FFF;
    font-size: 14px;
    font-style: normal;
}

.gallery-mini {
    flex-shrink: 0;
    height: fit-content;
}
/*.gallery-mini .swiper-wrapper {*/
/*    flex-direction: row;*/
/*    gap: 15px ;*/
/*}*/
/*.gallery-mini .swiper-wrapper .swiper-slide {*/
/*    width: 90px !important;*/
/*    !*height: 90px !important;*!*/
/*    border-radius: 10px;*/
/*    !*border: 0.129px solid #8AB73A;*!*/
/*    flex-shrink: 0;*/
/*    overflow: hidden;*/
/*}*/
.gallery-mini-button-prev {
    /*transform: rotate(180deg);*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-mini-button-next {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*.gallery-mini .swiper-slide img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

.swiper-block {
padding: 30px;
width: calc(100% - 50px - 90px);
border: 1px solid var(--green);
border-radius: 10px;
position: relative;
}
.gallery-button-prev {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5;
}
.gallery-button-next {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5;
}
.gallery {
    width: 100%;
    margin: 0 auto !important;
}
/*.gallery .swiper-slide {*/
/*    border: 1px solid var(--green);*/
/*border-radius: 10px;*/
/*}*/
.gallery .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
}
.swiper {
margin: 0;
}
.info-container {
    max-width: calc(50% - 50px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.probuct-body {
    border-radius: 10px;
    background: #FDFDFF;
}
.probuct-body .content {
    display: flex;
    gap: 50px;
}
/*.swiper-button-next {*/
/*    transform: rotate(90deg);*/
/*    top: 105%;*/
/*}*/
.row {
    display: flex;
    gap: 30px;
}
.row span:first-child {
    display: flex;
    padding: 8px 15px;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    border: 1px solid #C6CAE2;
    color: #484848;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.product-price {
    margin-top: 0;
}
.product-price {
    align-items: flex-start;
}
.product-price-old {
    color: #484848;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; 
}
.product-price-old span {
    color: #E23C2B;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-decoration: line-through;
}
.product-price-new {
    color: #484848;
    font-family: Rounded Mplus 1c;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
}
.product-price-new span {
    color: #484848;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
}
.description {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.descr-title {
    color: #484848;
    font-size: 25px;
    font-style: normal;
    font-weight: 800;
}
.list {
    display: flex;
    gap: 10px;
    padding-bottom: 25px;
}
.list li {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: calc(50% - 50px);
    align-items: flex-start;
}
.list li::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289L19.7071 11.2929C20.0976 11.6834 20.0976 12.3166 19.7071 12.7071L13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071C11.9024 18.3166 11.9024 17.6834 12.2929 17.2929L17.5858 12L12.2929 6.70711C11.9024 6.31658 11.9024 5.68342 12.2929 5.29289ZM6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289L13.7071 11.2929C13.8946 11.4804 14 11.7348 14 12C14 12.2652 13.8946 12.5196 13.7071 12.7071L7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071C5.90237 18.3166 5.90237 17.6834 6.29289 17.2929L11.5858 12L6.29289 6.70711C5.90237 6.31658 5.90237 5.68342 6.29289 5.29289Z' fill='%238AB73A'/%3E%3C/svg%3E");
    display: block;
    margin-top: 3px;
}
.list li p {
    display: inline-block;
    color: #484848;
    font-size: var(--preset--font-size--medium);
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}
.list li p span {
    color: #484848; 
    font-size: var(--preset--font-size--medium);
    font-style: normal;
    font-weight: 800;
    line-height: 170%; /* 34px */
}



@media(max-width: 768px) {
    .list li{
        max-width: 100%;
    }
    .list{
        flex-direction: column;
    }
}

.dop-info {
    /*padding: 50px 0;*/
    border-top: 1px solid #DEE2F6;
}
.dop-info .content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.dop-info h2 {
    color: #555E90;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 68px */
}
.dop-info p {
    color: #484848;
    font-size: var(--preset--font-size--medium);
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 42.5px */
}
.dop-info .bold {
    color: #484848;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 170%;
}
.dop-info  ul {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.dop-info  ul li {
    display: flex;
    gap: 20px;
}
.dop-info  ul li a {
    color: #484848;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 42.5px */
}
.dop-info  ul li::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M21.9994 16.9738V19.9846C22.0005 20.2642 21.9432 20.5408 21.831 20.7969C21.7188 21.053 21.5542 21.2829 21.3478 21.4719C21.1415 21.6608 20.8978 21.8047 20.6325 21.8942C20.3672 21.9838 20.0861 22.017 19.8072 21.9919C16.7128 21.6563 13.7404 20.601 11.1289 18.9108C8.69921 17.3699 6.63926 15.3141 5.09534 12.8892C3.39586 10.271 2.33824 7.29008 2.00816 4.18795C1.98303 3.91042 2.01608 3.63071 2.1052 3.36663C2.19432 3.10254 2.33757 2.85987 2.52581 2.65407C2.71405 2.44826 2.94317 2.28383 3.19858 2.17123C3.45398 2.05864 3.73008 2.00036 4.0093 2.0001H7.02608C7.5141 1.9953 7.98722 2.16778 8.35725 2.48537C8.72727 2.80297 8.96896 3.24401 9.03727 3.72629C9.1646 4.68982 9.40074 5.63587 9.74118 6.54642C9.87648 6.90563 9.90576 7.29602 9.82556 7.67133C9.74536 8.04665 9.55903 8.39115 9.28867 8.66402L8.01156 9.93859C9.44308 12.4512 11.5276 14.5315 14.0451 15.9602L15.3222 14.6856C15.5956 14.4158 15.9408 14.2298 16.3169 14.1498C16.6929 14.0698 17.0841 14.099 17.444 14.234C18.3564 14.5738 19.3043 14.8095 20.2698 14.9365C20.7582 15.0053 21.2044 15.2509 21.5233 15.6265C21.8422 16.0021 22.0116 16.4817 21.9994 16.9738Z' stroke='%238AB73A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: block;
    margin-top: 9px;
}

.content-delete{
    padding-bottom: 50px;
}

.btn {
    display: flex;
    padding: 15px 40px;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    background: #555E90;
    color: #FFF;
    font-size: var(--button-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 42.5px */
    width: fit-content;
}
.btn:hover {
    background: #9FAAE9;
}
.viewed {
    background: #F8F9FF;
}
.viewed-slider-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 50px 0 50px;
    width: 100%;
}
.viewed-btn-prev , .viewed-btn-next {
    border-radius: 5px;
    background: #555E90;
    display: flex;
    width: 29px;
    height: 29px;
    justify-content: center;
    align-items: center;
}
.viewed-slider-container  .viewed-swiper {
    max-width: calc(100% - 70px);
    width: 100%;
}
.viewed-swiper .swiper-wrapper .swiper-slide {
    max-width: 435px ;
    width: 100%;
}
.viewed-card {
    height: 200px;
    display: flex;
    /* width: 435px; */
    padding: 20px;
    align-items: center;
    gap: 30px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.2);
}

@media (max-width: 768px) {
    .viewed-card {
        height: 300px;
    }
}

.viewed-card .product-image {
    display: flex;
    width: 135px;
    height: 135px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 232.759px;
}
.viewed-swiper .swiper-wrapper {
    padding: 5px;
}
.col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.viewed-card .product-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.viewed-card .product-price-old {
    margin-top: 10px;
}
.viewed-card  .product-price-new span {
    font-size: 25px;
}
.viewed-card .product-image {
    margin-bottom: 0;
}

@media (max-width:1200px) {
    .probuct-body .content {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
    .swiper-container , .info-container {
        max-width: 100%;
    }
    .gallery-mini .swiper-wrapper {
        flex-direction: row;
    }
    .info-container .row:first-child {
        flex-wrap: wrap;
    }
    .swiper-block {
        width: 100%;
    }
    .gallery-mini-button-prev , .gallery-mini-button-next {
        display: none;
    }
    .product-price-new {
        font-size: 30px;
    }
}

@media (max-width:768px) {
    .tabs-panel {
        overflow-x: scroll;
    }
}
@media (max-width:550px) {
    .viewed-card {
        flex-direction: column;
    }
    .viewed-swiper .swiper-slide {
        max-width: 95% !important;
        width: 100%;
    }
    .viewed-swiper .swiper-wrapper {
        padding: 10px;
    }
}

.swiper-container .gallery .gallery-button-prev::after {
    content: url("data:image/svg+xml,%3Csvg width='26' height='53' viewBox='0 0 26 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-0.499998 53C6.52824 53 13.2686 50.208 18.2383 45.2383C23.208 40.2686 26 33.5282 26 26.5C26 19.4718 23.208 12.7314 18.2383 7.76167C13.2686 2.79196 6.52824 -8.38109e-08 -0.5 0V26.5L-0.499998 53Z' fill='white'/%3E%3Cpath d='M15 27H1' stroke='%23484848' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 20L1 27L8 34' stroke='%23484848' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.notice {
    display: flex;
    padding: 20px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: fit-content;
}

.notice-link {
    display: flex;
    padding: 10px 30px;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    background: #555E90;
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 42.5px */
}

.notice-link:hover {
    background: #465179;
    color: #FFF;
}

@media (max-width:1200px) {
    .notice-link {
        font-size: 20px;
    }
}

@media (max-width:768px) {
    .notice-link {
        padding: 20px 20px;
        font-size: 15px;
    }
}
@media (max-width:550px) {
    .notice {
        flex-direction: column;
    }
    .notice-link {
        padding: 8px 20px;
        font-size: 15px;
    }
}