/* =========================================
   SHARED PRODUCT CARD SYSTEM
   Used by index.php and products.php so every
   product grid in the site looks identical.
========================================= */

.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.product-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

/* CARD */

.card{
    background:#fff;
    border-radius:var(--radius-lg, 16px);
    overflow:hidden;
    border:1px solid var(--store-border,#e5e7eb);
    transition:transform .22s ease, box-shadow .22s ease;
    height:100%;
    display:flex;
    flex-direction:column;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg, 0 15px 30px rgba(0,0,0,.12));
}

/* IMAGE */

.product-image-box{
    position:relative;
    background:#fff;
}

.product-image-box img{
    width:100%;
    height:220px;
    object-fit:contain;
    padding:15px;
}

/* SALE BADGE */

.sale-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:linear-gradient(135deg, var(--signal-red, #c23b33), #8f231d);
    color:#fff;
    padding:8px 12px;
    border-radius:var(--radius-full, 30px);
    font-family:var(--font-mono, inherit);
    font-size:11px;
    font-weight:600;
    letter-spacing:.02em;
    z-index:10;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* WISHLIST HEART TOGGLE */

.wishlist-heart-btn{
    position:absolute;
    top:12px;
    right:12px;
    z-index:10;
    width:36px;
    height:36px;
    border-radius:50%;
    border:0;
    background:#fff;
    color:var(--store-muted,#66737c);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}

.card:hover .wishlist-heart-btn{
    opacity:1;
    transform:translateY(0);
}

.wishlist-heart-btn:hover{
    background:#FDECEC;
    color:var(--signal-red,#C23B33);
}

.wishlist-heart-btn.saved{
    opacity:1;
    transform:none;
    color:var(--signal-red,#C23B33);
}

@media(max-width:900px){
    .wishlist-heart-btn{
        opacity:1;
        transform:none;
    }
}



/* CARD CONTENT */

.card-body{
    padding:15px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.product-name{
    font-family:var(--font-body, inherit);
    font-size:15px;
    font-weight:600;
    color:var(--ink, var(--store-dark,#2F5F66));
    line-height:1.4;
    margin-bottom:10px;
    /* Hard 2-line cap (not just min-height) so one long product
       name can never make a single card — and therefore its whole
       grid row — grow taller than the rest. */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:42px;
}

.card-rating{
    display:flex;
    align-items:center;
    gap:6px;
    margin:-4px 0 8px;
}

.card-rating .star-row{
    color:var(--brass, #f5a623);
}

.card-rating-count{
    font-size:11.5px;
    color:#8a97a0;
}

.price{
    font-family:var(--font-mono, inherit);
    font-size:19px;
    font-weight:600;
    letter-spacing:-.01em;
    color:var(--deep-teal, var(--store-dark,#2F5F66));
    margin-top:5px;
    /* Force the price onto a single line — whether it's a short
       number or the longer "Call For Price" / "Get Quote" string —
       so text wrapping can never make one card's row taller than
       the rest of the grid row (this was the actual cause of the
       gap that showed up specifically next to Call For Price cards).
       Truncating with an ellipsis is a safe fallback on extremely
       narrow cards instead of silently growing the row. */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.25;
}

.stock{
    margin-top:10px;
    font-size:13px;
    font-weight:600;
}

.in-stock{
    color:#28a745;
}

.out-stock{
    color:#dc3545;
}

/* BUTTONS */

.button-group{
    margin-top:auto;
    padding-top:15px;
}

.btn{
    display:block;
    width:100%;
    text-align:center;
    text-decoration:none;
    padding:10px;
    border-radius:8px;
    color:#fff;
    font-weight:600;
    border:0;
    cursor:pointer;
    font-size:14px;
}

.cart-btn,
.quote-btn{
    background:var(--store-primary,#4F7F86);
}

.cart-btn:hover,
.quote-btn:hover{
    background:var(--store-dark,#2F5F66);
}

/* INACTIVE PRODUCTS */

.card.inactive{
    background:#f7f7f7;
    border:1px solid #ddd;
}

.card.inactive .product-name{
    color:#777;
}

/* RESPONSIVE */

@media(max-width:1100px){
    .products-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){
    .products-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .product-image-box img{
        height:160px;
    }
}

@media(max-width:480px){
    .products-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .product-image-box img{
        height:120px;
    }

    .product-name{
        font-size:13px;
        min-height:50px;
    }

    .price{
        font-size:17px;
    }
}