.card-container { 
    max-width: 1320px;  
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 10px;
}

.card { 
    background: #fff; 
    border-radius: 12px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column;  
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    transition: transform 0.3s;
    cursor: pointer;
    max-width: 1024px;
    padding: 10px;
}

.card .add , .global-product-add {
    width: 100%;
    height: 100%; 
    font-size: 100px;
    border: 1px solid transparent;
    border-image: repeating-linear-gradient(
      45deg,
      #000000,
      #000000 5px,
      transparent 5px,
      transparent 10px
    ) 1 / 1px / 0 round;
    text-align: center;
    display: flex;
    justify-content: center;
    justify-items: center;
}

.card:hover {
    box-shadow: 0 0 10px #ddd;
}

.card .image {  
    height: 200px;
    width: 100%;  
    flex-shrink: 0;
    display: flex;
}

.card .image img{
    width: 100%;
    object-fit: contain;
    object-position: center;
    -o-object-fit: contain;
    -o-object-position: center;
}

.card .content { 
    padding: 15px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}

.card .content h3 { 
    margin: 0 0 10px 0;
    font-size: 18px; 
    color: #333;
}

.card .content p { 
    margin: 0; 
    font-size: 14px; 
    color: #666;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-height: 100px;
}

.card .footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;  
    margin-top: 10px;
}

.card .price {
    flex-basis: 100%;
    font-weight: bold; 
    font-size: 14px;
    font-variant-numeric: tabular-nums; 
    font-family: iran-yekan , sans-serif;
}

.card .save-icon { 
    width: 26px; 
    height: 26px;  
    background-size: contain; 
    cursor: pointer; 
    transition: transform 0.2s;

}

.card .save-icon:hover { 
    transform: scale(1.2);
}


@media (max-width: 600px) {

    .card { 
        flex-direction: row;  
        max-height: 200px; 
        max-width: unset !important; 
    }

    .card .image { 
        width: 40%; 
        height: 100%; 
    }

    .card .content { 
        width: 60%; 
        padding: 10px; 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
    }

    .card .footer { 
        margin-top: 10px; 
        padding: 0; 
        display: flex; 
        justify-content: space-between; 
        align-items: center;

    }

}