/**
 * Product Grid V2 - Styles
 * Synchronized with V1 Appearance
 */

.product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.product-img {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: #fff;
}

.product-main-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 10px !important;
}

.product-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.product-favorite i {
    color: #ef4444;
    font-size: 1.1rem;
}

.product-info {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 2.8em;
}

.product-short-desc {
    color: #6b7280;
    font-size: 0.8rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
}

.product-rating {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: #fbbf24;
}

/* The colors will be injected via JS or CSS Variables if we want, 
   but for now we use the ones assigned to the buttons in the renderer 
   or we can use CSS variables passed to the container */

.product-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.product-price-box {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    clear: both !important;
}

.price-original {
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-bottom: 0.1rem;
    display: block;
}

.price-main {
    font-size: 1.5rem;
    font-weight: 850;
    line-height: 1;
}

.price-pix {
    font-size: 0.85rem;
    color: #16a34a;
    font-weight: 600;
    margin-top: 0.4rem;
    white-space: nowrap;
}

.price-pix span {
    font-size: 1rem;
    font-weight: 800;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
}

/* Base button styles - Colors are usually handled by theme, 
   but we can set defaults here */
.btn-buy-v2 {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border-radius: 8px;
    color: white;
    border: none;
    font-weight: 600;
    cursor: pointer;
    background-color: #1f2937;
    /* Fallback */
}

.product-add-cart-v2 {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
    border: none;
    cursor: pointer;
    background-color: #3b82f6;
    /* Fallback */
}

.btn-buy-v2:hover,
.product-add-cart-v2:hover {
    opacity: 0.9;
}

/* Add custom coloring via inline style if needed, 
   or better yet, data attributes if we had more time */