/* ========================
   Product Card Styles
========================= */

/* Container for Product Cards */

@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');

.product-card{
    position: relative;
    height: 533px;
}

/* Single Product Card */
.product-card-wrapper {
    padding: 0 8px;
    margin: 0;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.product-card-wrapper:hover {
    transform: translateY(-10px);
    outline: 8px solid #F8F9FA;

}

.product-card-wrapper:hover {
    transform: translateY(-10px);
    outline: 8px solid #F8F9FA;

}


.favorite-icon {
    font-size: 1.5rem;
}

/* Product Image and New Label */
.product-image {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 18px 0 8px 0;
}

.product-image img {
    padding: 18px;
    display: block;
    width: 250px;
    margin: auto;
}

.new-label {
    position: absolute;
    left: 0;
    border-radius: 0 41px 41px 0;
    background-color: #DC3545;
    color: #FFFFFF;
    padding: 8px;
    line-height: 12.02px;
    font-weight: 500;
}

/* Product Info Section */
.product-info {
    margin: 0;
    position: relative;
    margin-top: auto;
}

.price-badge {
    position: absolute;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: -230px;
    right: 0;
    width: 60px;
    height: 60px;
    padding: 4px 8px;
    line-height: 16px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.875rem;
    color: #FFFFFF;
    background-color: #DC3545; /*#1E8194;*/
    /*display: inline-block;*/
    margin: 0;
}

.product-title {
    text-transform: uppercase;
    margin-top: 8px;
    height: 58px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 1rem;
    line-height: 19.68px;
    overflow: hidden;
}

.product-title > a {
    max-height: 58px; /**/
}

.product-info .product-title:hover {
    min-height: 58px !important; /**/
    height: auto !important; /**/
    max-height: auto !important; /**/
    overflow: visible;/**/
    background: #ffffff;/**/
}

.product-info:hover .product-title a span {
    background: #ffffff;/**/
}

.product-title > a:hover {
    height: auto !important; /**/
    max-height: auto !important; /**/
    background: #ffffff;/**/
}

.product-meta {
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 0.75rem;
}

.availability {
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 500;
    color: #28A745; 
}

.quantity{
    background-color: #DEE2E6;
    border-radius: 100px;
    padding: 4px 8px;
}

.product-code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    flex-grow: 1;
    
}

.product-details {
    margin-top: 16px;
    margin-left: 8px;
    color: #6C757D;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    display: flex;
    line-height: 13px;
}

.price-section {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 28px;
    font-weight: 500;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
    font-size: 18px;
}

.current-price {
    color: #1e8194;
}

/* Buy Button Styles */
.buy-btn {
    background-color: #106B7D;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    width: 100%;
    line-height: 13.74px;
    padding: 12px 0;
    border-radius: 41px;
    display: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease-in-out;
    margin-top: 10px;
    margin-bottom: 8px;
}

.product-card-wrapper:hover .buy-btn {
    display: block;
}


/* ========================
   Like and Cart Buttons
========================= */

.product-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-cart {
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute;
    top: 10px; */
    font-size: 14px;
    border-radius: 30px;
    color: #6C757D;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease-in-out;
}

.btn-cart svg {
    margin-right: 8px;
    fill: #6C757D;
    transition: fill 0.3s ease;
}

.btn-cart {
    margin-top: 8px;
}

.btn-cart:hover {
    background-color: #1E8194;
    color: #FFFFFF;
    transform: scale(1.03);
}

.btn-cart:hover svg path{
    fill: #FFFFFF;
}

.btn-cart.added:hover svg path{
    fill: #1E8194;
}
.btn-cart.added {
    background-color: #1E8194;
    color: #FFFFFF;
}



.btn-like {
    background-color: transparent;
    border: none;
    border-radius: 50%;
    padding-top: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, fill 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.btn-like svg {
    transition: transform 0.3s ease;
}

.btn-like:hover svg {
    transform: scale(1.1);
}

.btn-like svg path {
    fill: transparent;
    stroke: #495057;
}


.btn-like.active svg path {
    fill: #212529 !important; 
    stroke: #212529 !important; 
}

.product-card.large-card-wrapper {
    display: block; /* Показывать */
  }
  
  .product-card.compact-card-wrapper {
    display: none; /* Скрывать */
  }

.categories-wrapper h3 {
    margin-bottom: 30px;
}

.category-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.category-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 160px;
    height: 200px;
    gap: 10px;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
}

.category-card:hover {
    transform: translateY(-10px);
    outline: 8px solid #F8F9FA;
}

.category-card > a {
    text-wrap: wrap;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 1440px) {

    /* .product-card {
        flex: 1 1 calc(33% - 20px);
        max-width: calc(33% - 20px);
        height: 533px;
    } */
    
    .product-wrapper {
        gap: 20px;
        padding: 20px;
        justify-content: flex-start;
    }
    
    /* .product-card-wrapper {
        max-width: calc(100% - 20px);
    } */

}

@media (max-width: 1024px) {

    .product-card-wrapper:hover {
        transform: none;
        outline: none;
    }

    .product-card-wrapper:hover .buy-btn {
        display: none;
    }
    .product-title{
        align-items: baseline;
    }
    .product.info {
        height: 30px;
    }

    .product-info, .product-title {
        font-size: 14px;
    }

    .price-section {
        font-size: 16px;
        gap: 8px;

    }

    .current-price {
        color: #212529;
    }
    .product-card.large-card-wrapper {
        display: none; /* Показывать */
      }
      
      .product-card.compact-card-wrapper {
        display: block; /* Скрывать */
      }
}

@media (max-width: 768px) {
    /* .product-card{
        flex: 1 1 calc(33% - 20px); 
        max-width: calc(33% - 10px);
    }

    .product-wrapper {
        gap: 20px;
        padding: 20px;
    }
    .product-card-wrapper {
        max-width: calc(100% - 20px);
    } */

    .product-card-wrapper:hover {
        transform: none;
        outline: none;
    }

    .product-card-wrapper:hover .buy-btn {
        display: none;
    }

    .btn-like:hover svg {
        transform: none;
    }
    
    
    .btn-cart:hover {

        transform: none;
    }

}

@media (max-width: 480px) {
    .product-wrapper {
        justify-content: center;
    }
    /* .product-card{
        max-width: calc(50% - 10px);
    } */

    .btn-cart {
        font-size: 10px;
    }

    .btn-like svg {
        width: 18px;
        height: 18px;
    }

    .product-info{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .product-size {
        display: block;
        margin-top: 20px;
    }

    .product-title {
        height: auto;
        max-height: 96px;
    }

    .product-title > a {
        max-height: 78px; /**/
        margin-bottom: 15px;
    }

    #button-search {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
    }

    .category-block {
        gap: 8px;
    }

    .category-card {
        width: 32%;
        height: 200px;
        gap: 5px;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 8px;
    }

    .price-badge {
        top: -190px;
    }

}